Validator 校验辅助
Validator 仍然只负责把浏览器原生校验结果映射成 Rue 当前的表单视觉,不引入额外校验引擎。基础的className="input validator"写法继续可用,但现在也可以直接通过appearance、size、status和Field组合件来组织更完整的表单场景。
原生校验优先
继续依赖 required、pattern、minLength 等原生约束。
语义外观补充
用 appearance 直接映射 input、select、toggle 等宿主风格。
表单结构复用
Field 统一 label、hint、extra 和基础可访问性连线。
# Validator and validator-hint
最基础的邮箱校验示例,点击按钮即可触发浏览器原生 required / email 校验和 hint 展示。
# Different validator hosts
展示基础 select 和 textarea 场景,并补上 checkbox / toggle 这种同样依赖 validator 的宿主。
Required
Required
# Hidden hint and rule list
提交、失焦或输入时都会同步原生 invalid 状态,隐藏 hint 和多行规则列表现在会在首次校验失败后正确出现。
# Manual status and size
status 适合展示服务端或异步校验反馈;size 则让同一套 Validator 能直接落到不同密度的表单里。
# Field composition
Field 适合搭建单个表单项:label、hint、extra 和 aria-describedby 都能一起就位。
Keep it under 140 charactersMention rollback owner if needed
# Form recipe
把基础散装示例 融合成一个更接近真实业务的登录表单,同时保持 Validator 只负责视觉反馈。
API
Validator 本体负责控件本身的宿主类和状态类,Hint 管理提示文案,Field 则把常见表单项的结构和可访问性连线收敛到一处。
Validator
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
appearance | 自动补充 input、select、textarea、checkbox、toggle 这些宿主类名 | 'input' | 'select' | 'textarea' | 'checkbox' | 'toggle' | - |
as | 指定渲染标签,select 和 textarea 会自动推断对应外观 | 'input' | 'select' | 'textarea' | 'input' |
className | 追加自定义类名,基础写法仍可继续手动传入 input / select / textarea | string | - |
size | 按宿主类型拼接尺寸类,例如 input-lg、checkbox-sm | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | - |
status | 手动追加状态类,适合服务端校验或异步反馈场景 | 'error' | 'success' | 'warning' | - |
Validator.Hint
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
as | 指定 hint 标签 | 'div' | 'p' | 'span' | 'p' |
className | 追加 hint 的自定义类名 | string | - |
hideUntilInvalid | 自动追加 hidden 类,让 hint 在无效前不占布局空间 | boolean | false |
lines | 按多行规则渲染 hint 内容,每一项会单独包成一行 | any[] | - |
Validator.Field
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
className | Field 外层容器类名 | string | - |
controlClassName | 内部 Validator 控件的类名 | string | - |
extra | 底部补充说明,会以 label 风格文本渲染 | any | - |
extraClassName | extra 区域的类名 | string | - |
fieldAs | 外层容器标签,默认是 fieldset,也可切到 div | 'fieldset' | 'div' | 'fieldset' |
hint | 快捷生成 Validator.Hint | any | - |
hintAs | 快捷生成的 hint 标签 | 'div' | 'p' | 'span' | 'p' |
hintClassName | 快捷生成的 hint 类名 | string | - |
hideHintWhenValid | 等价于给快捷 hint 开启 hideUntilInvalid | boolean | false |
label | 快捷生成字段标题,并在传入 id 时自动关联到控件 | any | - |
labelClassName | 字段标题类名 | string | - |
requiredMark | 强制展示必填星号,未设置时会跟随 required | boolean | 根据 required 推断 |