|
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部分
//prop、 v-model和rules字段匹配
//script部分
export default {
name: "testForm",
data(){
return{
billInfo: {
invoiceTypeId: '',//这里要包含要校验的字段
},
billRules: {
invoiceTypeId: [{
required: true,
message: "请选择票据类型",
trigger: "change"
}],
}
}
}
}
|