element表单校验失败的可能的集中情况
1、检查是否在el-form-item组件上绑定了prop名称,是否和rules中的名称一致
element官方解说:Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可。
2、检查el-form和el-form-item中的v-model属性,el-form的v-model如果绑定的是billInfo对象,那么el-form-item的v-model属性一定是绑定了billInfo对象的某个属性且和prop的值保持一致。如下面的代码所示:
3、如果billInfo在data中的初始值中未包含rules中的某个属性,也会出现有值校验失败的错误,可能出现的情况包括:
第一种: billInfo在data中的初始值为空对象,但是后面在页面初始化方法中给赋值了;
第二种: billInfo在data中的初始值不是空对象,但是并没有包含校验失败的这个属性,同时在页面初始化方法中也有重新赋值了校验失败的属性。
上面两种情况都会导致表单中有值但是校验失败的提示。此时我们务必要保证data初始化中表单对象billInfo一定要包含需要校验的字段就不在报错了。如下面的代码所示(部分代码已省略),
//template部分
<template>
<el-form ref="billInfo" :model="billInfo" :rules="billRules" :key="billDialogKey" class="bill-form" label-width="120px">
//prop、 v-model和rules字段匹配
<el-form-item label="表单字段:" prop="invoiceTypeId" class="inline-block">
<el-select :disabled="!canEdit" v-model="billInfo.invoiceTypeId" placeholder="请选择" @change="changeInvoiceType" size="small">
<el-option v-for="(type, iti) in invoiceTypes" :key="'type' + iti" :label="type.name" :value="type.id"></el-option>
</el-select>
</el-form-item>
</el-form>
</template>
//script部分
<script>
export default {
name: "testForm",
data(){
return{
billInfo: {
invoiceTypeId: '',//这里要包含要校验的字段
},
billRules: {
invoiceTypeId: [{
required: true,
message: "请选择票据类型",
trigger: "change"
}],
}
}
}
}
</script>