关于 async-validator 是一个🐂🍺的表单验证包

1、它的作用是能够帮助我们，更快速，以及更方便高效的对表单中填写的数据进行验证

比如说我要验证一个邮箱，正常来写，我需要写很长时间的正则，但是使用了这个包，我们只需要写v.email(value)，就可以了，他会返回给我们一个布尔值

这是官网提供的 type类型

2、除了直接使用他提供的方法，我们也可以对他提供的方法里的规则进行扩展

var descriptor = {
  email: [
    {type: "string", required: true, pattern: schema.pattern.email},
    {validator(rule, value, callback, source, options) {
      var errors = [];
      // test if email address already exists in a database
      // and add a validation error to the errors array if it does
      return errors;
    }}
  ]
}

看到上面的required: true了没，这个是不能为空的意思，以下是一些常用的值

(1)、required:true               必输字段
(2)、remote:"remote-valid.jsp"   使用ajax方法调用remote-valid.jsp验证输入值
(3)、email:true                  必须输入正确格式的电子邮件
(4)、url:true                    必须输入正确格式的网址
(5)、date:true                   必须输入正确格式的日期，日期校验ie6出错，慎用
(6)、dateISO:true                必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性
(7)、number:true                 必须输入合法的数字(负数，小数)
(8)、digits:true                 必须输入整数
(9)、creditcard:true             必须输入合法的信用卡号
(10)、equalTo:"#password"        输入值必须和#password相同
(11)、accept:                    输入拥有合法后缀名的字符串（上传文件的后缀）
(12)、maxlength:5                输入长度最多是5的字符串(汉字算一个字符)
(13)、minlength:10               输入长度最小是10的字符串(汉字算一个字符)
(14)、rangelength:[5,10]         输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
(15)、range:[5,10]               输入值必须介于 5 和 10 之间
(16)、max:5                      输入值不能大于5
(17)、min:10                     输入值不能小于10

3、这个包我之前在 vue 以及 jQuery 中使用过， 如果只是单纯的使用，直接引入这个包，然后使用就行了，所有这不是今天的重点，上代码

import schema from 'async-validator';
var descriptor = {
  name(rule, value, callback, source, options) {
    var errors = [];
    if(!/^[a-z0-9]+$/.test(value)) {
      errors.push(
        new Error(
          util.format("%s must be lowercase alphanumeric characters",
            rule.field)));
    }
    return errors;
  }
}
var validator = new schema(descriptor);
validator.validate({name: "Firstname"}, (errors, fields) => {
  if(errors) {
    return handleErrors(errors, fields);
  }
  // validation passed
});

今天主要是要说说，在react中 引入了antd后，在antd Form组件中的使用，因为antd的 Form表单，内置了一个包 rc-form, 以及validator

所以写的时候,直接从rc-form中解构出 getFieldDecorator，然后调用 getFieldDecorator，在里面写validator的规则就行了， antd不需要手动引入和解构rc-form，但是如果你用的是antd-mobile 就需要了，下面是我写的antd中表单验证的一些代码

4、自定义规则验证，今天我主要想分享的重点，因为我为了写这个自定义规则验证，花了半小时时间去看文档, 上代码

自定义验证的话，只需要在getFieldDecorator第二个参数的对象中的rules中，写一个validator就行了，这是一个函数，(rule: any, value: any, callback: any, source?: any, options?: any) => any) ,前三个参数是必写的， 今天主要就在纠结第一个参数rule的用法，结果最后发现，没什么用

第一个参数中主要包含的是当前检验的这个值的信息，比如说名字之类的

第二个参数是当前验证的值

第三个参数是验证过后的回调值，传一个[]表示验证通过（不传会出现很多bug）,验证不通过，就向里面传一个Error 或者false 就可以了

效果图