AntDesign Form表单字段校验的三种方式
AntDesign Form表单字段校验的三种方式
1.使用getFieldDecorator的rules规则
最简单的方法就是使用getFieldDecorator中的rules验证。rules中定义校验规则，message为校验不通过时的提示文字。
{getFieldDecorator('inputContent', {
rules: [{
required: true,
message: '请输入内容!',
}],
})(
<Input />
)}
-
rules校验规则
| 参数 | 说明 | 类型 | 默认值 | |
|---|---|---|---|---|
| enum | 枚举类型 | string | – | |
| len | 字段长度 | number | – | |
| max | 最大长度 | number | – | |
| message | 校验文案 | string | ReactNode | |
| min | 最小长度 | number | – | |
| pattern | 正则表达式校验 | RegExp | – | |
| required | 是否必选 | boolean | false |
|
| transform | 校验前转换字段值 | function(value) => transformedValue:any | – | |
| type | 内建校验类型，可选项 | string | ‘string’ | |
| validator | 自定义校验（注意，callback 必须被调用） | function(rule, value, callback) | – | |
| whitespace | 必选时，空格是否会被视为错误 | boolean | false |
更多高级用法可研究 async-validator。
2.使用getFieldDecorator的validator自定义校验
validator可以自定义校验规则，适用于无法用rules校验规则校验的情况，比如校验再次输入密码与前一次输入的密码是否相同。其中，参数val为输入的值，callback必须被调用，是校验失败时的回调，内容为提示文字。
handleValidator = (rule, val, callback) => { if (!val) { callback(); } let validateResult = ...; // 自定义规则 if (!validateResult) { callback('请输入正确的内容！'); } callback(); } {getFieldDecorator('validator', { rules: [{ required: true, message: '请输入内容' }, { validator: this.handleValidator }] })( <input /> )}
- 注意：一个 Form.Item 建议只放一个被 getFieldDecorator 装饰过的 child，当有多个被装饰过的 child 时，help required validateStatus 无法自动生成。此时可用下面一种方法校验。
3.使用validateStatus自定义校验
antd提供了validateStatus，help，hasFeedback 等属性，你可以不需要使用 Form.create 和 getFieldDecorator，自己定义校验的时机和内容。
- validateStatus: 校验状态，可选 ‘success’, ‘warning’, ‘error’, ‘validating’。
- hasFeedback：用于给输入框添加反馈图标。
- help：设置校验文案。
<FormItem {...formItemLayout} label="Success" hasFeedback validateStatus="success" > <Input placeholder="I'm the content" id="success" /> </FormItem> <FormItem {...formItemLayout} label="Warning" hasFeedback validateStatus="warning" > <Input placeholder="Warning" id="warning" /> </FormItem> <FormItem {...formItemLayout} label="Fail" hasFeedback validateStatus="error" help="Should be combination of numbers & alphabets" > <Input placeholder="unavailable choice" id="error" /> </FormItem>
- 可用属性
| 参数 | 说明 | 类型 | 默认值 | |
|---|---|---|---|---|
| colon | 配合 label 属性使用，表示是否显示 label 后面的冒号 | boolean | true | |
| extra | 额外的提示信息，和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 | string | ReactNode | |
| hasFeedback | 配合 validateStatus 属性使用，展示校验状态图标，建议只配合 Input 组件使用 | boolean | false | |
| help | 提示信息，如不设置，则会根据校验规则自动生成 | string | ReactNode | |
| label | label 标签的文本 | string | ReactNode | |
| labelCol | label 标签布局，同 <Col>组件，设置 span``offset值，如 {span: 3, offset: 12}或 sm: {span: 3, offset: 12}
|
object | ||
| required | 是否必填，如不设置，则会根据校验规则自动生成 | boolean | false | |
| validateStatus | 校验状态，如不设置，则会根据校验规则自动生成，可选：’success’ ‘warning’ ‘error’ ‘validating’ | string | ||
| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | object |
- 注意： 这种校验方法有一个不足之处，就是不使用getFieldDecorator的话没办法设置字段名，获取输入的值的时候不能用getFieldsValue和setFieldsValue等方法对表单进行赋值和取值。
参考
https://ant.design/components/form-cn/#components-form-demo-dynamic-rule
版权声明：本文为chaoxiZ原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。