Vue元素实现动态生成新表单并添加验证功能

首先有一个这样的需求，表单中默认有一个联系人信息，用户可以再添加新的联系人信息

点击添加更多联系人之后

官方文档中有写用迭代来实现新增表单，但是那是单表单的新增，现在多表单的新增，可以考虑的实现方法是先写死一个必须的表单，需要新增的两个表单放在一个差异里，在差异中使用迭代生成，达到同时新增的效果

代码如下

//必填一个联系人的表单el-form-item class='rules '标签='通知对象： ' prop=' notify object ' El-input v-model=' Ruleform。通知对象“占位符=”请输入联系人名称：禁用=' Isreadonly ' class=' El-select _ box '/El-input/El-form-item El-form-item class=' rules ' label='邮箱： ' prop=' email ' El-input v-model='规则表单。电子邮件“占位符=”请输入邮箱：禁用=' Isreadonly ' class=' El-select _ box '/El-input/El-form-item//动态生成的联系人表单div class='更多规则' div class=' v-for='中的更多规则(项，索引)在规则形式。morenotifyobject ' :键='项。键' El-form-item class=' rules '标签='通知对象： ' : prop=' MorenotifyObject ' .索引notifyobject ' ' : rules=' morenofyojebectrules。morenofyojbectname ' El-input v-model=' item。notifyobject“占位符=”请输入联系人名称：禁用=' Isreadonly ' class=' El-select _ box '/El-input/El-form-item El-form-item class=' rules ' label='邮箱： ' : prop=' MorenotifyObject ' .索引电子邮件“: rules=”morenotfoybectrules。morenotfoybectemail ' El-input v-model='项。电子邮件“占位符=”请输入邮箱：禁用=' Isreadonly ' class=' El-select _ box '/El-input/El-form-item El-button @ click=' delete rules(item，index)' :禁用=' Isreadonly '删除/El-button/div/div El-form-item v-show='！israd ' El-button type=' text ' class=' AddUser ' @ click=' AddUser ' : disabled=' isradonly ' I class=' icon font icon-tiajialaxiren '/I添加更多联系人/El-按钮/El-表单-项目和普通表单验证不同的是，动态表单要新增自己的验证规则，和添加普通表单的方式一样

ruleForm:{ //普通表单的验证规则},//新增表单的验证规则morenotfoybecless : { morenotfoybectname : [{必需： true，message: '请输入联系人名称，trigger: 'blur' }，{ validator:(规则，值，回调)={ if(值。长度15 | |值。长度2){ 0回调(新错误('长度必须为2~8个字符))} else { var reg=新regexp('[`[emailprotected]#$^*()=|{}':',\\[\\].《》/？~!@#……*()——|{}【】';""'。]')if(reg . test(value)){ 0回调（新错误('不能含有特殊字符))} else { callback()} } } } }，trigger: 'change' } ]，morenotfyojebecemail :[{必需： true，message: '请输入邮箱地址，trigger: 'blur' }，{ type: 'email '，message: '请输入正确的邮箱地址，trigger: 'blur' } ] }这里需要注意的是：规则是每个表单都要都要添加的，有多个的话就要给每个表单绑定一个规则

el-form-item class='rules '标签='通知对象： ' : prop=' MorenotifyObject ' .索引notifyobject ' ' : rules=' morenofyojebectrules。' morenofyojbectname ' El-form-item class=' rules ' label='邮箱： ' : prop=' MorenotifyObject '索引。电子邮件' : rules=' morenofyojebectrules。' morenofyojbectemail '另外要注意的是：道具，正常表单验证单项是依靠道具，但是动态生成话要用：道具。

编写语法是：prop='' moreNotifyObject。索引。notifyobject ' '，morenotifyobject是由v-for绑定的数组，index是索引，notifyobject是窗体绑定的v-model的名称，然后将它们链接起来。

所以总结出来的语法是：prop=''v-for bound数组。索引。v-model绑定变量“”

另外要注意的是v-for的书写，也就是写表单的模型名

规则表单中的div class=' morerrulesin ' v-for='(项目，索引)。morenotifyobject ' :键='项。钥匙。还需要注意的是，由v-for绑定的数组也应该在表单的对象中，当写在表单对象之外时无法验证，所以应该添加到数据中

规则表单：{ morenotfyobject :[{ notifyobject : ' '，email:''}]}那么添加联系人的功能应该编写如下

Adduser () {this。rule form . morenotifyobject . push({ notifyobject : ' '，email:''})}删除联系人也是如此

deleteRules(项，索引){ this . index=this . rule form . morenotifyobject . indexof(项)if (index！==-1){这个。rule form . morenotfyobject . split(index，1)}}如果您只希望首先显示默认的必需表单，但不显示新添加的表单，如本文开头所示，则可以在方法中初始化v-for绑定数组。

方法：{//初始化数据initdata () {this。from . morenotfyobject=[]} }摘要中的规则

上面提到的是边肖推出的Vuelelement实现了新表单的动态生成，增加了验证功能，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！