这里举例校验姓和名的长度和不少于3
<el-col :lg="scanType=='newOrderInput'?8:6" :sm="12" class="row_content">
<el-form-item label="姓" class="title" prop="crsExpand.familyName">
<el-input size='mini' placeholder="请输入姓" @blur="()=>this.$refs['applicant'].validateField('crsExpand.firstName')" v-model="applicant.crsExpand.familyName" clearable maxlength='64'></el-input>
</el-form-item>
</el-col>
<el-col :lg="scanType=='newOrderInput'?8:6" :sm="12" class="row_content">
<el-form-item label="名" class="title" prop="crsExpand.firstName">
<el-input size='mini' placeholder="请输入名" @blur="()=>this.$refs['applicant'].validateField('crsExpand.familyName')" v-model="applicant.crsExpand.firstName" clearable maxlength='64'></el-input>
</el-form-item>
</el-col>
规则：
'crsExpand.familyName': [
{ required: true, message: Tips.applicant.crsExpand.familyName.isNull, trigger: 'blur' },
{ validator: validateFamilyName, trigger: 'blur' }
],
'crsExpand.firstName': [
{ required: true, message: Tips.applicant.crsExpand.firstName.isNull, trigger: 'blur' },
{ validator: validateFirstName, trigger: 'blur' }
],
验证器validator:
// 校验crs 姓
const validateFamilyName = (rule, value, callback) => {
const res = Validate.isValidEnName(value, 'En'); //这里有个校验英文 ，可以不要，同下
if (res !== true) {
// '录入不合法'
return callback(new Error('录入不合法'));
}
if (this.applicant.crsExpand.familyName && this.applicant.crsExpand.firstName) {
if ((this.applicant.crsExpand.familyName.length + this.applicant.crsExpand.firstName.length) < 3) {
return callback(new Error('姓与名长度和不少于3'));
}
}
callback();
};
// 校验crs 名
const validateFirstName = (rule, value, callback) => {
const res = Validate.isValidEnName(value, 'En');
if (res !== true) {
// '录入不合法'
return callback(new Error('录入不合法'));
}
if (this.applicant.crsExpand.familyName && this.applicant.crsExpand.firstName) {
if ((this.applicant.crsExpand.familyName.length + this.applicant.crsExpand.firstName.length) < 3) {
return callback(new Error('姓与名长度和不少于3'));
}
}
callback();
};
参考：https://blog.csdn.net/xiaomogg/article/details/102554641
