antd 中的表單驗證

輸入框不能為空限制：

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

輸入框長度限制：

{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="請輸入昵稱" />
  )}

空格限制和數字限制

{getFieldDecorator('hobody', {
            rules: [{
              whitespace: true,
              message: '不能輸入空格',
          } ],
         })(
            <Input placeholder="請輸入昵稱" />
)}
{getFieldDecorator('qbc', {
            rules: [{
              message:'只能輸入數字',
              pattern: /^[0-9]+$/
          } ],
            //下面這個函數可以直接把其他字符過濾掉，無法輸入到上面
            getValueFromEvent: (event) => {
                 return event.target.value.replace(/\D/g,'')
             },
         })(
           <Input placeholder="請輸入" />
)}

最重要的自定義驗證：

{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();
  }

當然我們也可以在form.validateFields里面來處理