1.使用getFieldDecorator的rules規則

最簡單的方法就是使用getFieldDecorator中的rules驗證。rules中定義校驗規則，message為校驗不通過時的提示文字。

{getFieldDecorator(‘inputContent‘, {
            rules: [{
              required: true, 
              message: ‘請輸入內容!‘,
            }],
          })(
            <Input />
)}

• rules校驗規則

更多高級用法可研究 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>

• 可用屬性

• 註意： 這種校驗方法有一個不足之處，就是不使用getFieldDecorator的話沒辦法設置字段名，獲取輸入的值的時候不能用getFieldsValue和setFieldsValue等方法對表單進行賦值和取值。

參考

https://ant.design/components/form-cn/#components-form-demo-dynamic-rule

AntDesign Form表單字段校驗的三種方式