SepForm / SepFormItem 表单组件 v1.0.0
表单项(label · required · help · 校验态 · feedback 图标 · 布局)· 表单容器(布局 · 尺寸 · 数据收集 · 全表校验 · 提交)· 校验引擎(同步/异步 · continueOnError · 占位符)
0. HTML 声明式标签 — SepBase.autoInit() 自动驱动
所有 SepForm / SepFormItem 及子组件(SepSelect / SepCheckbox / SepSwitch / SepRadioGroup)的声明式标签均由 SepBase.autoInit(state, computed) 自动驱动,无需手动初始化。state 中的对象可通过 options="cityOptions" 绑定到组件。
1. SepFormItem 基础用法(label + required + help)
label 标签文字,required 必填标记,help 提示文字。通过 _initSetters 自动生成的 setter(setLabel / setRequired / setHelp / setHasFeedback 等)可动态修改并同步 DOM。
2. 校验规则(required + email + minLength + trigger)
rules 规则数组,支持 required / type / min / max / minLength / maxLength / pattern / enum / 自定义 validator。trigger 控制触发时机(change / blur),失焦时只触发 blur 规则。
3. 校验态 + hasFeedback 图标
status 取值 success / error / warning,hasFeedback 开启后在控件右侧显示对应状态图标。状态切换由 _initSetters 的 handler 驱动,确保图标与边框同步。
4. FormItem 布局选项(labelWidth / labelAlign / colon / inline / noStyle)
labelWidth 标签宽度,labelAlign 标签对齐(left / right),colon 是否显示冒号,inline 行内紧凑排列,noStyle 无边框样式(纯布局)。
5. SepForm 完整表单(数据收集 + 全表校验 + 提交)
SepForm 收集所有子 SepFormItem 的数据,validate() 全表校验,submit() 触发 onFinish(成功)或 onFinishFailed(失败)回调。resetFields() 重置所有字段值与校验态。
6. Form 布局切换(horizontal / vertical / inline)+ 尺寸
layout 控制表单布局:horizontal(标签与控件水平排列)、vertical(标签在控件上方)、inline(行内紧凑排列)。size 控制表单内控件尺寸(small / default / large)。setLayout / setSize 由 _initSetters 生成,动态切换无需重建。
7. Form API 操作(setFieldsValue / getFieldsValue / resetFields / validateFields)
setFieldsValue 批量回填字段值并触发校验,getFieldsValue 获取所有字段值,resetFields 重置值与校验态,validateFields 校验指定字段,submit 提交并触发回调。
8. 表单与 SepX 组件组合(Select / Checkbox / Switch / RadioGroup)
FormItem 通过 SepBase._registry 自动识别子 SepX 组件实例,调用通用 getValue()/setValue() 收集与回填数据,并通过 subscribe 监听值变化触发校验。
子组件需设置 id 以注册到注册表。
9. disabled 禁用 + onValuesChange 值变化 + getFieldError/clearValidate
disabled 支持 Form 级与 FormItem 级(取并集),禁用字段自动跳过校验; onValuesChange(changedValues, allValues) 监听字段值变化; getFieldError(name) / getFieldsError() 获取错误信息;clearValidate(nameList) 清除校验态。
10. Form.List 动态字段列表
Form.List 支持动态增删行,行模板用 data-sep-form-list-row 标记,
模板内 name 中的 __index__ 占位符会自动替换为行索引。
新增按钮用 data-sep-form-list-add,删除按钮用 data-sep-form-list-remove。
11. validateMessages 自定义校验消息 + validateFirst
validateMessages 可在 Form 级统一覆盖默认校验消息模板,支持 {field}/{min}/{max} 等占位符;
validateFirst 为 true 时,校验遇到第一个错误即停止。
12. dependencies 联动校验
dependencies 指定当前字段依赖的其他字段名,当被依赖字段值变化时,当前字段自动重新校验。 常用于"确认密码"等场景。
修改密码字段时,确认密码字段会自动重新校验(dependencies 联动)。自定义 validator 函数请使用 JS API。
13. useForm 独立实例 + size 尺寸继承
Form.useForm() 创建独立 form 实例,可在外部直接调用 setFieldsValue/getFieldsValue/validate 等方法;
size 支持 Form 级(small/default/large),自动继承到所有 FormItem 及子控件。
14. formatter / parser 输入输出格式化
formatter 将外部值转换为控件显示值(如数字 1234 → "1,234"),
parser 将控件显示值还原为外部值(如 "1,234" → 1234)。
数据收集(getFieldsValue)和提交拿到的是 parser 后的真实值。
声明式中函数类型通过字符串引用 window 上的函数(如 formatter="formatAmount")。
15. hidden 隐藏字段 + preserve 保留值
hidden 隐藏字段但不销毁,值仍参与收集; preserve(默认 true)字段销毁后值仍保留,重新挂载时回填。
16. extra 常驻提示 + whitespace 规则
extra 是控件下方常驻的灰色说明文字(与 error 浮层并存); whitespace 规则让全空格字符串也视为"未填写"。
17. 阶段二增强 API(useWatch / setFields / isFieldTouched / scrollToField)
useWatch 订阅字段值变化(返回取消订阅函数); setFields 批量设置字段值与错误状态; isFieldTouched/isFieldsTouched 检测字段是否被用户操作过; isFieldValidating 检测字段是否在校验中; scrollToField 滚动到指定字段; getFieldInstance 获取字段实例。 这些 API 均通过 JS 调用,字段本身支持声明式标签。
19. Form.List 增删行回调 + removeFields 批量删除
onBeforeAdd/onAfterAdd 在新增行前后触发(onBeforeAdd 返回 false 可阻止添加); onBeforeRemove/onAfterRemove 在删除行前后触发; removeFields(name, indices) 批量删除多行(自动从高索引到低索引删除避免索引漂移)。
20. feedbackIcons 校验反馈图标
setFeedbackIcons 可设置校验反馈图标;Form 级 feedbackIcons 配置会自动继承到所有 FormItem(FormItem 自身显式设置优先)。 支持 success / error / warning / validating 四种状态图标,图标可以是 HTML 字符串或函数。
21. readOnly 只读控制
readOnly(只读)与 disabled(禁用)不同:只读字段值仍参与提交,仅禁止用户编辑。 Form 级 readOnly 会自动继承到所有 FormItem(显式设置的 FormItem 优先)。
22. Form.List 行移动 + 列表内联动校验
moveUp(index)/moveDown(index) 上移/下移一行; 列表内字段的 validator 可通过 ctx.rowIndex、ctx.listName、ctx.getRowValue() 访问同行其他字段,实现联动校验。
23. Form.List 拖拽排序
设置 draggable="true" 启用行拖拽排序,复用 SepBase.enableDragSort 通用拖拽工具。
行模板中添加 data-sep-form-list-drag-handle 作为拖拽把手(省略则整行可拖)。
拖拽完成后行内字段索引自动重排,onSortEnd 回调返回 { fromIndex, toIndex }。
24. FormItem 拖拽排序
设置 draggable="true" 启用 FormItem 拖拽排序。每个 FormItem 可通过
data-sep-form-drag-handle 指定拖拽把手(省略则整行可拖)。
拖拽仅调整 DOM 顺序,不影响表单数据收集(按字段名取值)。
onSortEnd 回调返回 { order }(排序后的字段名数组)。
25. shouldUpdate 条件显示(v1.1 新增)
shouldUpdate 声明式控制 FormItem 的显示/隐藏,基于其他字段值动态计算。
支持函数形式 (curValues, prevValues) => boolean:返回 false 则隐藏该字段。
26. ErrorList 集中错误展示(v1.1 新增)
ErrorList 在表单顶部自动汇总所有校验错误,点击错误项可滚动至对应字段。 校验失败时自动显示,校验清除时自动隐藏,无需手动控制。
27. getValueFromEvent 自定义值提取(v1.1 新增 demo)
getValueFromEvent 从事件对象中自定义提取值,适用于自定义输入组件(如 switch 返回 boolean、richtext 返回 html 等)。
默认从 event.target.value 提取,通过此函数可覆盖。
28. messageVariables 动态消息变量(v1.1 新增 demo)
messageVariables 在错误消息中使用自定义占位符 {customVar},运行时动态替换。
配合 validator 使用,可在校验函数中传递上下文变量。
29. trigger="submit" 仅提交时校验(v1.1 新增)
trigger="submit" 时字段不进行 blur/change 自动校验,仅在调用 validateFields() 或 submit() 时校验。
适用于"用户填写过程不想被打断,提交时统一校验"的场景。
30. setFieldError / setFieldWarning 服务端错误展示(v1.2 新增)
服务端校验返回错误时,可通过 setFieldError(name, errors) / setFieldWarning(name, warnings) 手动展示字段错误或警告;
也支持 setFieldsError({...}) / setFieldsWarning({...}) 批量设置。传入 null 即可清除。
31. 脏值追踪 isFieldDirty / isFieldsDirty(v1.2 新增)
通过 isFieldDirty(name) / isFieldsDirty() 判断字段值是否被修改过(与 initialValue 比较)。
可用于"离开页面前提示未保存修改"等场景。resetDirty() 可将当前值标记为干净基准。
32. Form 级统一开关 showMessage / statusIcon / hideRequiredAsterisk(v1.2 新增)
Form 级别可统一控制:showMessage(是否显示校验信息)、statusIcon(是否显示校验状态图标)、
hideRequiredAsterisk(是否隐藏必填星号)。FormItem 未显式指定时继承 Form 级配置。