NocoBase PasswordInput 组件实战：基于 Antd Input.Password 的密码输入与强度提示条

NocoBase PasswordInput 组件实战基于 Antd Input.Password 的密码输入与强度提示条【免费下载链接】nocobaseNocoBase is an open-source AI no-code platform for building business systems fast. Instead of generating everything from scratch, AI works on top of production-proven infrastructure and a WYSIWYG no-code interface, so you get both speed and reliability.项目地址: https://gitcode.com/GitHub_Trending/no/nocobasePasswordInput是 NocoBase client-v2 表单体系中对 AntdInput.Password的轻量封装组件核心价值在于开启checkStrength后会在输入框下方渲染一条实时更新的密码强度提示条帮助用户直观感知密码强弱。本文以 password-input.md 文档为主体结合 PasswordInput.tsx 源码与 v1/v2 两代实现完整讲解基本用法、表单接入方式、API 参数、强度评分算法与 UI 实现原理并厘清强度条 ≠ 表单校验这一关键边界。组件定位一个带可选强度条的表单输入框PasswordInput不是一个全新的密码组件而是对 AntdInput.Password的薄封装。它的设计目标非常明确默认行为与 Antd 完全一致透传Input.Password的全部能力明文/密文切换、placeholder、autoComplete、maxLength、disabled等所以可以直接替换现有代码中的Input.Password而无需修改任何业务逻辑可选的增强能力通过checkStrength开关在输入框下方追加一条密码强度提示条从纯 UI 层面给用户即时反馈。从源码结构看组件被设计为与 AntdInput.Password值形状兼容value-shape compatible因此可以无缝嵌入任何Form.Item场景见 PasswordInput.tsxexport function PasswordInput(props: PasswordInputProps) { const { value, checkStrength, ...rest } props; return ( span Input.Password {...(rest as InputProps)} value{value} / {checkStrength ? StrengthBar score{getStrength(String(value || ))} / : null} /span ); }组件从nocobase/client-v2包统一导出见 form/index.tsx 中的export * from ./PasswordInput并作为表单组件体系中的一员与EnvVariableInput、FileSizeInput、JsonTextArea、RemoteSelect等并列。基本用法三行代码接入最简用法无需任何配置直接当作 AntdInput.Password使用即可import { PasswordInput } from nocobase/client-v2; PasswordInput placeholder请输入密码 /;需要强度提示时加上checkStrengthPasswordInput placeholder请输入密码 checkStrength /官方文档配套的完整可运行示例位于 docs/docs/cn/shared-components/_demos/password-input.tsx其核心逻辑如下import React, { useState } from react; import { PasswordInput } from nocobase/client-v2; import { Space, Typography } from antd; export default function PasswordInputDemo() { const [value, setValue] useState(); return ( Space directionvertical style{{ width: 320 }} PasswordInput value{value} checkStrength placeholderInput password onChange{(event) setValue(event.target.value)} / Typography.Text typesecondary The strength bar is only a visual hint. /Typography.Text /Space ); }该示例同时印证了两个要点PasswordInput是受控组件value与onChange的事件签名与 AntdInput.Password完全一致onChange回调参数为React.ChangeEventHTMLInputElement通过event.target.value取值强度提示条只是视觉提示源码注释 The strength bar is only a visual hint不承载任何校验语义。在表单中使用接入 Form.Item 与校验规则密码输入最常见的场景是表单如修改密码、注册、设置初始密码。与 Antd 表单体系的用法保持一致将PasswordInput放入Form.Item中name用于绑定字段rules用于定义校验import { Form } from antd; import { PasswordInput } from nocobase/client-v2; Form.Item namenewPassword label{t(New password)} rules{[{ required: true }]} PasswordInput autoCompletenew-password checkStrength / /Form.Item;这里的几个细节值得注意autoCompletenew-password明确告知浏览器这是新密码输入框避免浏览器自动填充旧密码是密码表单的推荐实践rules{[{ required: true }]}负责必填校验——这部分由Form.Item承担与强度条无关checkStrength仅控制是否展示强度条不产生任何校验副作用。API 说明一个自有参数 全量 Antd 继承PasswordInput的自有 API 极其收敛仅有一个参数参数类型默认值说明checkStrengthbooleanfalse是否显示密码强度提示条其余参数全部继承自 AntdInput.Password包括但不限于placeholder占位提示文本autoComplete自动填充行为new-password/current-password等maxLength/minLength输入长度限制disabled/readOnly禁用与只读visibilityToggle是否显示明文/密文切换按钮Antd 默认开启prefix/suffix前后缀内容onChange/onBlur/onFocus等事件回调。类型定义上PasswordInputProps extends AntdPasswordProps并叠加可选的checkStrength?: boolean见 PasswordInput.tsx。这意味着任何现有基于 AntdInput.Password的代码都可以通过替换组件名的方式无损迁移到PasswordInput。源码解析强度评分算法与提示条实现原理强度评分getStrength的五档分桶算法强度条背后的评分函数getStrength是一个无外部依赖的纯函数从 v1 客户端的密码工具函数移植而来可对任意字符串安全求值。其评分逻辑综合了以下维度见 PasswordInput.tsx字符类多样性统计数字num、小写lower、大写upper、符号symbol四类字符的数量四类均出现的字符串会获得额外的callMe加成要求长度 ≥ 8 且类别数 2 时额外 1 分档长度因子基础分随总长度线性增长4 * length类别稀疏度奖励仅含字母时扣除长度分length lower upper时sum - length纯数字同理sum - num鼓励混合字符中间非字母非符号奖励MNS位于字符串中间位置的数字或符号非首尾会获得2 * MNS的加分对应密码中间穿插数字/符号更安全的直觉三类惩罚项repC重复字符惩罚同一字符出现多次时按间距折算扣分consecutive连续同类字符惩罚如aaa、111每次-2sequential顺序字符惩罚如abc、123、连续符号等差序列每次-3。最终原始分被Math.max(0, Math.min(100, sum))收敛到[0, 100]再分桶映射到[20, 40, 60, 80, 100]五个档位if (sum 80) return 100; if (sum 60) return 80; if (sum 40) return 60; if (sum 20) return 40; return 20;空字符串返回0此时强度条呈现为全空状态。五档分值恰好对应强度条被 4 条白色分隔线切出的 5 个区间UI 与算法严格对齐。强度条 UIStrengthBar的渐变裁剪动画StrengthBar组件的实现颇具巧思见 PasswordInput.tsx背景轨道灰色底#e0e0e0五档刻度4 条绝对定位的 1px 白色竖线分别位于 20%、40%、60%、80% 处将轨道视觉上切成 5 段与getStrength的五档分值一一对应渐变填充始终渲染完整的橙色渐变-webkit-linear-gradient(left, #ff5500, #ff9300)再通过clip-path: polygon(0 0, ${score}% 0, ${score}% 100%, 0 100%)将超出当前分值比例的部分裁剪掉平滑过渡transition: all 0.35s ease-in-out用户输入时强度条会以 0.35 秒的缓动动画平滑伸缩而不是生硬跳变。采用全量渐变 clip-path 裁剪而非按分值重绘渐变避免了每次输入都重新绘制渐变背景是兼顾流畅动画与渲染性能的实现方式。v1 到 v2两代 Password 组件的演进脉络PasswordInput并非凭空出现的新组件而是 v1 客户端Password组件在 client-v2 体系中的移植与简化。对照两代实现可以更清晰地理解其设计取舍v1 实现packages/core/client/src/schema-component/antd/password/Password.tsx基于 Formily 的connect高阶封装特点包括通过connect(..., mapReadPretty(...))处理只读态展示——值非空时渲染为********空值渲染为空 div这是 schema 驱动渲染read-pretty场景所必需的多一个showForgotPassword属性v2 中未保留强度计算抽离为独立的PasswordStrength渲染属性组件PasswordStrength.tsx支持 children 渲染函数模式将getStrength分值传给子节点自由定制展示。v2 实现PasswordInput则面向普通 React 组件化用法不再依赖 FormilyconnectcheckStrength直接控制内部StrengthBar的渲染。官方注释明确说明评分与强度条 UI 与 v1 保持逐像素一致colors and pixel sizes intentionally kept identical to v1因此从 v1 页面切换到 v2 页面的用户会看到完全相同的视觉信号迁移体验平滑。同时v2 的PasswordInput已被内建到过滤器的值渲染器中在 FilterValueInput.tsx 中当筛选条件的x-component解析为Password时即渲染PasswordInput作为密码类字段的筛选值输入框可见它在查询/筛选场景同样承担密码字段的输入职责。实战提醒强度条是界面提示不是表单校验这是使用PasswordInput最需要牢记的一条边界。官方文档以 warning 形式明确指出强度条只是界面提示不是表单校验。弱密码能不能提交仍然取决于Form.Item.rules、服务端校验或单独的密码策略插件。源码层面的注释也反复强调这一点见 PasswordInput.tsxcheckStrength开启后只做本地分值计算与视觉呈现不注入任何校验逻辑。因此如果你的业务要求弱密码不可提交需要组合以下任意一种手段前端校验在Form.Item.rules中编写 validator例如校验长度与字符类别组合Form.Item namenewPassword label{t(New password)} rules{[ { required: true, message: t(Please enter a new password) }, { validator: (_, value) value value.length 8 /[A-Za-z]/.test(value) /\d/.test(value) ? Promise.resolve() : Promise.reject(new Error(t(Password must be at least 8 chars with letters and numbers))), }, ]} PasswordInput autoCompletenew-password checkStrength / /Form.Item;服务端校验在业务 API 层对密码强度做最终校验防止绕过前端密码策略插件如果项目引入了独立的密码策略插件可复用其规则做统一约束。PasswordInput提供的强度条更多承担引导用户设置更强密码的产品体验职责——让用户在提交前就感知密码质量而把是否放行的决策权留给真正的校验链路。小结PasswordInput以极低的接入成本一个组件 一个布尔开关为 NocoBase 表单体系补齐了密码输入的体验增强能力纯封装、可替换与 AntdInput.Password值形状兼容其余参数全量透传强度反馈开箱即用checkStrength一键开启五档强度条评分算法覆盖字符多样性、长度、重复/连续/顺序模式与中间穿插奖励UI 通过 clip-path 过渡动画实现平滑反馈边界清晰强度条定位为 UX 提示真正的强度约束依赖Form.Item.rules、服务端校验或密码策略插件。需要进一步探索时可参阅组件实现 PasswordInput.tsx、组件导出 form/index.tsx、v1 对照实现 Password.tsx 与官方文档 password-input.md。【免费下载链接】nocobaseNocoBase is an open-source AI no-code platform for building business systems fast. Instead of generating everything from scratch, AI works on top of production-proven infrastructure and a WYSIWYG no-code interface, so you get both speed and reliability.项目地址: https://gitcode.com/GitHub_Trending/no/nocobase创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考