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...