react+antd系列之Form表單(2)：格式限制驗證

格式限制

antd中表單的功能不少，下面就爲你們整理了一下antd中經常使用的幾種表單輸入格式驗證：

1. 輸入框不能爲空限制，以下：

{getFieldDecorator('name', {
            rules: [{
            required: true,
            message: '名稱不能爲空',
          }],
         })(
      <Input placeholder="請輸入名稱" />
  )}

2. 輸入框字符限制，以下：

字符長度範圍限制：

{getFieldDecorator('password', {
            rules: [{
              required: true,
              message: '密碼不能爲空',
            }, {
            min:4,
            message: '密碼不能少於4個字符',
          }, {
            max:6,
            message: '密碼不能大於6個字符',
          }],
         })(
        <Input placeholder="請輸入密碼" type="password"/>
   )}

字符長度限制：

{getFieldDecorator('nickname', {
            rules: [{
            required: true,
            message: '暱稱不能爲空',
          }, {
            len: 4,
            message: '長度需4個字符',
          }],
         })(
       <Input placeholder="請輸入暱稱" />
  )}

3. 自定義校驗

{getFieldDecorator('passwordcomfire', {
            rules: [{
              required: true,
              message: '請再次輸入密碼',
            }, {
              validator: passwordValidator
          }],
         })(
            <Input placeholder="請輸入密碼" type="password"/>
   )}
   
     //  密碼驗證
  const passwordValidator = (rule, value, callback) => {
    const { getFieldValue } = form;
    if (value && value !== getFieldValue('password')) {
        callback('兩次輸入不一致！')
    }

    // 必須老是返回一個 callback，不然 validateFields 沒法響應
    callback();
  }

validator屬性自定義效驗，必須返回一個callback

4.whitespace空格報錯

{getFieldDecorator('hobody', {
            rules: [{
              whitespace: true,
              message: '不能輸入空格',
          } ],
         })(
            <Input placeholder="請輸入暱稱" />
  )}

若輸入只有一個空格，則會報錯

5.pattern正則驗證

{getFieldDecorator('qbc', {
            rules: [{
              message:'只能輸入數字',
              pattern: /^[0-9]+$/
          } ],
         })(
            <Input placeholder="請輸入ABC" />
)}

若是輸入的不是數字，則提示錯誤

完整代碼地址：
https://gitee.com/hope93/antd...