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.propslet 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('邮箱后缀请与业务伙伴官邮后缀保持一致')] }})}
}