這裏舉例校驗姓和名的長度和不少於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