el-form表单rules验证

最新推荐文章于 2025-04-14 13:48:04 发布

随便放个文字在这里

最新推荐文章于 2025-04-14 13:48:04 发布

阅读量891

点赞数

文章标签： servlet javascript elementui

本文链接：https://blog.youkuaiyun.com/ProgrammingWhite/article/details/112272372

版权

在Vue.js应用中，作者遇到一个表单验证问题，当输入信息后仍然显示错误提示。问题根源在于el-form-item的prop属性引用了错误的数据路径，应指向formInfo.address.username，而ref用于验证的关联。修正方法是删除el-form-item的prop属性，直接使用v-model绑定的数据路径进行验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天在工作中遇到一个小问题，绑定的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>