vue 表单相互校验

这里举例校验姓和名的长度和不少于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