# Form 表单

# 代码演示

WARNING

为什么在表单验证时,明明已经有值,却还是验证不通过?

因为表单验证时使用了 sync-validator,根据 rules 官方文档,需提供 Type 类型,默认是 string,如 type: 'number/boolean/array/object',请参考 sync-validator

# API

# Form Attributes

参数 说明 类型 可选值 默认值 Version
show-colon 是否显示 label 后的冒号 Boolean false v2.0.8
hide-required-asterisk 是否隐藏必填字段的标签旁边的红色星号 Boolean v2.0.0
inline 是否为行内表单 Boolean
inline-message 是否以行内形式展示校验信息 Boolean v2.0.0
label-width label 的长度, 支持 auto 属性,label 自由展开 String v1.7.10
label-align label 对齐方式 String 'left' | 'right' | 'center' | 'top'
label-position * 同 label-align String 'left' | 'right' | 'center' | 'top' v2.0.0
label-suffix 表单域标签的后缀 String v2.0.0
model 表单绑定的数据 Object
rules 表单的验证规则 Object
sizes 控制表单元素大小(已在 v2.0.0 被废弃, 被size代替) String 'large' | 'medium' | 'small' | 'mini'
size 控制表单元素大小 String 'large' | 'medium' | 'small' | 'mini'
text 是否为纯文本表单 Boolean
show-message 是否显示提示文字 Boolean true v2.0.0
validate-on-rule-change 是否在 rules 属性改变后立即触发一次验证 Boolean true v2.0.0
show-error-bg 验证时错误提示背景色块 Boolean false v2.1.1
correct-label-wrap 纠正 label 文字超出正确换行 Boolean false v2.4.30

| hide-asterisk-when-no-required | 非必填时隐藏字段的标签旁边的红色星号占位 | Boolean | — | false | v2.4.37 |

# Form Methods

事件名称 说明 回调参数 Version
clearValidate 清除表单元素的验证结果(props 可以是 string | array 如果不传参则默认清空所有表单元素的验证结果) Function(props: string | array) v1.5.22
resetFields 重置表单, 将字段值重置为初始值
validateField 验证表单部分字段 Function (props: array | string, cb) v1.4.13
validateForm 验证表单(回调函数第一个参数 valid 表示表单是否验证成功, 第二个参数 invalidFields 是所有未通过验证的表单字段) Function (cb: Function(valid, invalidFields)) v1.5.25
validate * 同 validateForm Function (cb: Function(valid, invalidFields)) v2.0.0
validatePromise * 同 validateForm (支持异步) Function (cb: Function(valid, invalidFields)) v2.3.6

# Form Events

事件名称 说明 回调参数 Version
validate 任一表单项被校验后触发 被校验的表单项 prop 值,校验是否通过,错误消息(如果存在) v2.0.0
validatePromise 任一表单项被校验后触发(支持异步) 被校验的表单项 prop 值,校验是否通过,错误消息(如果存在) v2.3.6

# Form-Item Attributes

参数 说明 类型 可选值 默认值 Version
label label 的文本值 String
label-width label 的长度, 支持 auto(优先级高于 form 中的 labelWidth 属性) String v1.7.12
prop 在表单 model 中的所属字段, 需要验证或重置表单时必填 String
rules 该表单的验证规则 Array
required 是否必填 Boolean true
show-message 是否显示提示文字 Boolean true
empty-placeholder 是否显示空数据下占位背景块 Boolean false V2.4.27
help-tips 表单项帮助指引提示内容 String - V2.4.27
help-tips-theme tooltip 主题 String light v2.4.27
help-tips-placement tooltip 位置 String top v2.4.27
help-tips-position 图标位置 String left v2.4.27
help-tips-icon 表单项帮助指引提示 icon String w-icon-qmark-solid V2.4.32

# Form-Item Events

事件名称 说明 回调参数 Version
help-tips-click 点击 表单项帮助指引提示 icon V2.4.32

# Form-Item Methods

事件名称 说明 回调参数 Version
resetField 对该表单项进行重置,将其值重置为初始值并移除校验结果 Function(props: string | array) v1.5.22
clearValidate 移除该表单项的校验结果

# Form-Item Slots

参数 说明 Version
表单元素
label 表单的标签
error 自定义表单校验信息的显示方式,参数为 { error } v2.0.0
help-tips 自定义表单项帮助指引提示内容 v2.4.27
上次更新: 12/20/2024, 11:38:26 AM