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