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