这篇文章主要介绍了Vue+Element实现动态生成新表单并添加验证功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
首先有一个这样的需求，表单中默认有一个联系人信息，用户可以再添加新的联系人信息
点击添加更多联系人之后
官方文档中有写用v-for来实现新增表单，但是那是单表单的新增，现在多表单的新增，可以考虑的实现方法是先写死一个必须的表单，需要新增的两个表单放在一个div里，在div中使用v-for生成，达到同时新增的效果
代码如下
//必填一个联系人的表单 //动态生成的联系人表单 <div class="moreRules"> <div class="moreRulesIn"> 删除</div></div> <i class="iconfont icon-tianjialianxiren"></i>添加更多联系人
和普通表单验证不同的是，动态表单要新增自己的验证规则，和添加普通表单的方式一样
ruleForm:{ //普通表单的验证规则 }， //新增表单的验证规则 moreNotifyOjbectRules: { moreNotifyOjbectName: [{ required: true, message: '请输入联系人名称', trigger: 'blur' }, { validator: (rule, value, callback) => { if (value.length > 15 || value.length <2) { callback(new Error('长度必须为2~8个字符')) } else { var reg = new RegExp("[`~!@#$^&*()=|{}':',\\[\\].《》/?~！@#￥……&*（）――|{}【】‘；：”“'。，、？]") if (reg.test(value)) { callback(new Error('不能含有特殊字符')) } else { callback() } } }, trigger: 'change' } ], moreNotifyOjbectEmail: [{ required: true, message: '请输入邮箱地址', trigger: 'blur' }, { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' } ] }
这里需要注意的是：rules是每个表单都要都要添加的，有多个的话就要给每个表单绑定一个规则
另外要注意的是：prop，正常表单验证单项是依靠prop，但是动态生成话要用：prop。
书写的语法是:prop="'moreNotifyObject.' + index +'.notifyobject本文来源gaodaimacom搞#^代%!码&网('"，moreNotifyObject是v-for绑定的数组，index是索引，notifyobject是表单绑定的v-model的名称，然后用.把他们链接起来。
所以总结起来的语法就是:prop="'v-for绑定的数组.' + index + '.v-model绑定的变量'”
还有一个需要注意就是v-for的写法，要将表单的model名写进去
<div class="moreRulesIn">
还有要注意的就是v-for绑定的数组也要在表单的对象里，写在表单对象外是验证不了的，在data里添加
ruleform：{ moreNotifyObject: [{ notifyobject: '', email: '' }] }
然后新增联系人的函数应该这样写
addUser() { this.ruleForm.moreNotifyObject.push({ notifyobject: '', email: '' }) }
同理删除联系人也是
deleteRules(item, index) { this.index = this.ruleForm.moreNotifyObject.indexOf(item) if (index !== -1) { this.ruleForm.moreNotifyObject.splice(index, 1) } }
如果一开始只想让默认必填的表单显示，而新增的不显示，如文章最开头的表现一样，则可以在methods中初始化v-for绑定的数组
methods：{ //初始化数据 initData(){ this.ruleFrom.moreNotifyObject = [] }}
总结
以上就是Vue+Element实现动态生成新表单并添加验证功能的详细内容，更多请关注gaodaima搞代码网其它相关文章！
转载请注明原文链接：Vue+Element实现动态生成新表单并添加验证功能
