今天在工作中遇到一个小问题,绑定的rules验证出现一个小Bug,验证规则和绑定的表单都正确,但是为什么输入完信息之后还是会提示错误输入时候的提示信息?
Bug重现:项目联系人只添加一个require验证规则,在输入框中我明明输入进去了,但是为什么还是会提醒我错误提示信息?
找了一会原因发现是因为el-form-item中的prop和ref用错了,prop是form表单绑定的formInfo对象中第一层的数据,ref是form表单绑定rules时为了确认验证的某一项而临时建立的连接。
el-input双向绑定的值传入到formInfo第二层的address对象里,所以输入框失焦时候验证的时formInfo.username,而不是formInfo.address.username,此时formInfo.username为空,所以验证失败。
<el-form :model="formInfo" :rules="rules" ref="form" label-width="150px">
<el-form-item label="项目联系人:" prop="username" ref="username">
<el-input v-model="formInfo.address.username" placeholder="请输入项目联系人(可选择地址带出)" size="small" @change="changeinput"></el-input>
</el-form-item>
</el-form>
data() {
return {
formInfo: {
paymethod:'1',
deliverymethod:'1',
address: {}
},
rules: {
projectname: [ { required: true, message: '请输入项目名称', trigger: 'blur' }],
username: [ { required: true, message: '请输入项目联系人', trigger: ['blur'] }],
mobile: [ { required: true, message: '请输入联系电话', trigger: ['blur'] }],
addressinfo: [ { required: true, message: '请填写详细地址', trigger: 'blur' }],
deliveryperiod: [ { required: true, message: '请输入交货期限', trigger: 'blur' }],
},
};
解决方法就是:直接删除el-form-item中的prop就可以了。
<el-form-item label="项目联系人:" ref="username">
<el-input v-model="formInfo.address.username" placeholder="请输入项目联系人(可选择地址带出)" size="small"></el-input>
</el-form-item>