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

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页