记录element验证踩坑：async-validator: [‘region is required‘]

最新推荐文章于 2023-07-03 20:15:45 发布

转载最新推荐文章于 2023-07-03 20:15:45 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://blog.csdn.net/iseyre/article/details/125779312

文章标签：

#javascript #elementui #vue.js

在使用ElementUI进行下拉框表单验证时遇到问题，错误源于v-model的region与el-form-item的prop不匹配。解决方案是确保<el-form>的v-model（这里是addForm）和prop（如region）一致，同时注意数据模型的嵌套结构。文章提供了一个修正后的代码示例。

记录一下。在写element下拉框表单验证的时候出现的报错

这个报错中：‘region’指的是名字，错误原因也就是v-model和验证的prop验证名不一致造成的

一定要记得<el-form> 的el-form-item的prop与v-model名字保持一致

注意最外层:model数据嵌套

<el-form :model="addForm" :rules="rules" ref="numberValidateForm" style="position: absolute;bottom: 7%;left: 10%;" label-position="right" label-width="100px" class="form">
<el-form-item label='单位角色' prop='region'>
<el-select
placeholder="请选择单位角色"
v-model="addForm.region"
>
<el-option
v-for="item in seldata"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>

</el-form>

rules: {
region: [
{ required: true, message: "请选择单位角色", trigger: ['blur','change'] }
]
},
seldata:[
{
value:'建设单位',
lable:'建设单位'
},
{
value:'施工单位',
lable:'施工单位'
},{
value:'监理单位',
lable:'监理单位'
},{
value:'设计单位',
lable:'设计单位'
}
],
addForm:{
region:''
}