做游戏自媒体视频网站,惠州做棋牌网站建设哪家好,虞城县住房和城乡建设局网站,服装设计网站排行榜前十名使用antd开发的过程中#xff0c;必定会遇到需要对form表单进行必填校验的处理#xff0c;正常情况下#xff0c;我们都会一个空的必填校验#xff0c;如下#xff1a;一般我们只需要简单配置rules即可
FormItem label管理员姓名 {...itemLayout.wholeLi… 使用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(邮箱后缀请与业务伙伴官邮后缀保持一致)] }})}
}
