Antd Design rule校验规则——表单输入框检验方式

Antd三种表单输入框检验方式

1.使用getFieldDecorator的rules规则

最简单的方法就是使用getFieldDecorator中的rules验证。rules中定义校验规则，message为校验不通过时的提示文字。

{getFieldDecorator('inputContent', {
       rules: [{
              required: true, 
              message: '请输入内容!',
           	 }],
 })( <Input />)}`

rules校验规则

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>

注意： 这种校验方法有一个不足之处，就是不使用getFieldDecorator的话没办法设置字段名，获取输入的值的时候不能用getFieldsValue和setFieldsValue等方法对表单进行赋值和取值。