element-ui表单验证无效解决
2019-08-20 20:18
4780 查看
最近在项目中遇到了一个需求,需要动态增减表单元素,同时给新增的表单元素增加校验规则。
element-ui官网给出了解决方案:点击新增按钮时,向循环渲染的数组中push新的对象,数据驱动视图,通过增加数据的方式来增加新的dom元素;同样的,通过删除循环遍历的数据来达到删除dom的效果。
但是,校验规则不起作用,即使填写了表单已经提示未填写。在仔细检查后发现,element-ui的表单校验规则中,el-form-item绑定的prop必须和该item下的表单元素绑定的v-model值的名称一致。但和通常表单不同的是,该表单是动态增减的,对应el-form-item需要绑定的prop值必须带上遍历的索引值index:
<el-form ref="..." :model="test">
<div v-for="(item, index) in test.line" :key="index">
<el-form-item :prop="'line.'+index+'.value1'" :rules="{...}">
<el-input v-model="item.value1"></el-input>
</el-form-item>
<el-form-item :prop="'line.'+index+'.value2'" :rules="{...}">
<el-input v-model="item.value2"></el-input>
</el-form-item>
<div>
</el-form>
<script>
export default {
data() {
return {
test: {
...,
line: [{
value1: '',
value2: ''
}]
}
}
}
}
</script>
完整代码见element-ui官网的动态增减表单项
相关文章推荐
- element-ui 表单验证时规则对象二级验证失效 - 记录贴(已解决)
- 饿了么组件库element-ui正则表达式验证表单,后端验证表单
- element-ui+vuex共享自定义方法进行表单验证 validator
- vue + ElementUI 关闭对话框清空验证,清除form表单
- element-ui 表单自定义验证
- 详解ElementUI之表单验证、数据绑定、路由跳转
- element.ui多个表单同时验证
- vue封装 element-ui form表单验证 正则匹配手机号 自定义校验表格内容
- element UI number验证无效
- Vue ElementUI之Form表单验证遇到的问题
- vue elementUI之Form表单 验证
- Vue使用vux-ui自定义表单验证遇到的问题及解决方法
- element ui 表单验证 要主要的问题(小结1)
- vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
- vue+elementUI 复杂表单的验证、数据提交方案问题
- 实现elementUI表单的全局验证的方法步骤
- vue + ElementUI 关闭对话框清空验证,清除form表单
- element-ui 的form表单验证
- vue + ElementUI 关闭对话框清空验证,清除form表单
- Vue+Element UI 下,如何给一个表单设置自定义规则或多个验证规则(:rules)