AntDesign Form表单字段校验的三种方式

Posted 2021-01-28 chaoxiz

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