el-form-item 单独验证
针对很多表单中校验非空情况使用该方法可以减少对校验规则的重复,减少代码冗余
其中输入框用blur,选择框使用change
//div中代码
<el-form :inline="true" ref="form" :model="detailInfoData" label-width="100px">
<el-form-item :rules="[request]" prop="name" label="名称">
<el-input class="input-select-width" v-model="detailInfoData.name"/>
</el-form-item>
<el-form-item label="地区">
<el-select class="input-select-width"
v-model="detailInfoData.region"
filterable
allow-create
default-first-option
>
<el-option
v-for="dict in dict.type.sys_region_name"
:key="dict.value"
:label="dict.label"
:value="dict.label">
</el-option>
</el-select>
</el-form-item>
<!--等等-->
<el-button type="success" size="small" icon="el-icon-tickets" @click="createSummaryDataEvent()">保存</el-button>
<el-form/>
//data中代码
data(){
return{
request:{required: true, message: '该内容不能为空', trigger: 'blur'},
requestSelect:{required: true, message: '该内容不能为空', trigger: 'change'},
detailInfoData:{}
}
}
//methods中代码
methods:{
createSummaryDataEvent(){
this.$refs.addInfoData.validate(valid=>{
if(valid){
//验证通过
console.log('success');
}else{
//验证失败
}
})
}
}
多表单校验
在div中关于不同表单的ref值需不同,rule可以继续使用相同的规则;主要代码在于方法中的校验
//methods中代码
async createSummaryDataEvent() {
try {
await Promise.all([
this.$refs.form1.validate(),
this.$refs.form2.validate(),
this.$refs.form3.validate(),
this.$refs.form4.validate(),
this.$refs.form5.validate()
]);
// 验证成功
console.log('success');
} catch (error) {
// 验证失败
console.log("error");
}