Skip to content

Form 表单

表单组件,配合 FormItem 使用,提供验证、布局与提交能力。

组合约定

  • 已在 FormItem 上写 label 时,子级的 InputSelect 等不要再传 label,避免双重标签。
  • 单个子元素时,FormItem 会注入 id / htmlFor;校验错误、helpvalidateStatussuccess / warning 固定文案)、extra 会以 aria-describedby 关联;有错时另有 aria-invalid 与错误文案 role="alert"
  • label 时,根节点为 role="group"aria-labelledby 指向该标签(字段分组语义)。

无障碍要点

说明
分组label 时根节点 role="group" + aria-labelledby
控件label htmlFor 与控件 idaria-describedby 串联 help / 错误 / 状态 / extra
错误校验失败时控件 aria-invalid,错误文案 role="alert"
测试钩子根节点带 data-nova-form-item="true"(与 Buttondata-nova-button 一致,便于 E2E)

示例

API

Form

继承除 onSubmit 以外的 FormHTMLAttributes<HTMLFormElement>(如 classNameautoComplete 等)。

属性说明类型默认值
initialValues各字段初始值Record<string, unknown>-
validateTrigger校验触发时机'onSubmit' | 'onChange' | 'onBlur''onSubmit'
onSubmit校验通过后提交;入参为当前表单值快照(values: Record<string, unknown>) => void-

FormItem

属性说明类型默认值
name字段名(唯一键)string-
label标签ReactNode-
rules验证规则列表FormRule[]-
dependencies依赖字段(变更时触发当前项重算,与规则 deps 等配合)string[]-
requiredMarklabel 存在时,若规则含 required 是否显示红色 *booleantrue
help无校验错误时显示的说明文案;有 error 时优先显示错误ReactNode-
extra辅助区域(在错误/帮助文案之后);带稳定 id,并入控件 aria-describedbyReactNode-
validateStatus人工提示态(与 rules 触发的 error 文案独立);渲染 success / warning 固定文案,并纳入控件 aria-describedbyerror 仅占类型位,无单独 UI'error' | 'success' | 'warning'-
children表单控件(需与 name 对应的值收集方式兼容);为单个子元素时注入 value / onChange / onBlur,并与 label 通过 id + htmlFor 关联help / 校验错误 / validateStatus / extra 写入 aria-describedby(空格分隔,顺序:help/校验错误 → validateStatusextra);有错时 aria-invalid 与错误 role="alert"(子元素已有非空 id 时保留)ReactNode-

FormRule

属性说明类型默认值
required必填boolean-
minLength / maxLength字符串长度number-
pattern正则RegExp-
when是否启用本条规则(依赖整表值)(values: Record<string, unknown>) => boolean-
deps依赖字段(细则实现见源码)string[]-
message错误文案string-
validator自定义校验,返回 null 表示通过(value: unknown, values: Record<string, unknown>) => string | null-