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里面来处理