react + antd Form表單校驗

• 非空限制

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

• 空格校驗

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

• 正則校驗

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