React的form表单自定义校验规则

        使用antd开发的过程中，必定会遇到需要对form表单进行必填校验的处理，正常情况下，我们都会一个空的必填校验，如下：一般我们只需要简单配置rules即可

<FormItem label="管理员姓名" {...itemLayout.wholeLine}>
   {getFieldDecorator('adminName', {
     initialValue: '',
     rules: [
       { required: true, message: '请输入管理员姓名' },
     ],
   })(
     <AInput placeholder="请输入管理员姓名" maxLength={30} />
   )}
</FormItem>

        遇到一些情况是：输入框有多个校验规则，比如说一个邮箱输入框

我们既需要：1、不为空；2、也需要邮箱格式正确；3、还需要与其他邮箱的后缀保持一致；

         这个时候我们可能需要用到自定义的校验规则：validator配置自定义校验规则

<FormItem label="管理员邮箱" {...itemLayout.wholeLine}>
  {getFieldDecorator('adminEmail', {
    initialValue: '',
    rules: [
      {
        required: true,
        whitespace: true,
        validator: this.adminEmailVerification,
      }
    ],
  })(
    <AInput placeholder="请输入管理员邮箱" maxLength={30}/>
  )}
</FormItem>


// 校验方法
adminEmailVerification = (rule, value, callback)=>{
  if(!value){
    callback(new Error('请输入管理员邮箱'));
    return
  } else{
    const emailRegex = /^([^@\u4e00-\u9fa5]+)@([^@\\.\u4e00-\u9fa5]+)(\.[^\\.@\u4e00-\u9fa5]+)+$/;  
    if(!emailRegex.test(value)){
      callback(new Error('邮箱格式错误'));
      return
    } else{
      callback()
      this.emailSuffixVerification()
    }
  }
  callback()
  return
}

emailSuffixVerification = ()=>{
  const {form} = this.props
  let collaboratorEmail = form.getFieldValue('collaboratorEmail');
  let adminEmail = form.getFieldValue('adminEmail');
  let [, suffix1] = (collaboratorEmail || '').split('@');  
  let [, suffix2] = (adminEmail || '').split('@'); 
  if(suffix1 && suffix2 && (suffix1 != suffix2)){
    this.props.form.setFields({
      adminEmail: {value: adminEmail, errors: [new Error('邮箱后缀请与业务伙伴官邮后缀保持一致')] }
    })
  }
}