vue项目form表单的校验,使用rules属性可以进行校验,对于复杂表单的校验,如下
<el-form ref="form" :model="form" :rules="rules" label-position="right" label-width="120px">
<el-row >
<el-col :span="6" style="margin-right:20px">
<el-form-item label="药店ID配置:" prop="userDoctorPhysicianDto.ydhStoreId" >
<el-input placeholder="请输入药店ID" v-model="form.userDoctorPhysicianDto.ydhStoreId" maxlength="10" :disabled="disabled"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="渠道code配置:" prop="userDoctorPhysicianDto.ydhChannelCode">
<el-input placeholder="请输入渠道code" v-model="form.userDoctorPhysicianDto.ydhChannelCode" maxlength="10" :disabled="disabled"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-form/>
<script>
export default {
data() {
var channelidLimit = (rule, value, callback) => {
if(this.form.userDoctorPhysicianDto.ydhChannelCode){
if (!/^\d+$/g.test(this.form.userDoctorPhysicianDto.ydhChannelCode)) {
callback(new Error("请输入数字!"));
}
else if(!this.form.userDoctorPhysicianDto.ydhStoreId && !this.form.userDoctorPhysicianDto.ydhDrugstoreType){
callback(new Error("请先配置药店ID、门店类型"));
}
else if(!this.form.userDoctorPhysicianDto.ydhStoreId && this.form.userDoctorPhysicianDto.ydhDrugstoreType){
callback(new Error("请先配置药店ID"));
}
else if(this.form.userDoctorPhysicianDto.ydhStoreId && !this.form.userDoctorPhysicianDto.ydhDrugstoreType){
callback(new Error("请先配置门店类型"));
}
else{
callback();
}
}
else {
callback();
}
};
var drugStoreIdLimit = (rule, value, callback) => {
if(this.form.userDoctorPhysicianDto.ydhStoreId){
if (!/^\d+$/g.test(this.form.userDoctorPhysicianDto.ydhStoreId)) {
callback(new Error("请输入数字!"));
}
else if( !this.form.userDoctorPhysicianDto.ydhDrugstoreType){
callback(new Error("请先配置门店类型"));
}
else{
callback();
}
}
else {
callback();
}
};
return {
form:{
userDoctorPhysicianDto: {
ydhStoreId:"",
ydhChannelCode:"",
}
},
rules:{
'userDoctorPhysicianDto.ydhStoreId':[
{ validator: drugStoreIdLimit, trigger: "blur" }
],
'userDoctorPhysicianDto.ydhChannelCode':[
{ validator: channelidLimit, trigger: "blur" },
],
}
}
}
}
</script>
对于复杂表单的校验,rules里要对其加 ' '