如何在Vue中使用Element实现动态生成新表单并添加验证功能

这篇文章给大家介绍如何 在Vue中使用Element实现动态生成新表单并添加验证功能,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

创新互联建站主营惠农网站建设的网络公司,主营网站建设方案,成都app开发,惠农h5小程序开发搭建,惠农网站营销推广欢迎惠农等地区企业咨询

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

如何 在Vue中使用Element实现动态生成新表单并添加验证功能

点击添加更多联系人之后

如何 在Vue中使用Element实现动态生成新表单并添加验证功能

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

代码如下

//必填一个联系人的表单

      
     
     
      
      
//动态生成的联系人表单
     
      
       
        
       
       
        
       
       删除
      
     
            添加更多联系人      

和普通表单验证不同的是,动态表单要新增自己的验证规则,和添加普通表单的方式一样

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'",moreNotifyObject是v-for绑定的数组,index是索引,notifyobject是表单绑定的v-model的名称,然后用.把他们链接起来。

所以总结起来的语法就是:prop="'v-for绑定的数组.' + index + '.v-model绑定的变量'"

还有一个需要注意就是v-for的写法,要将表单的model名写进去

还有要注意的就是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是什么

Vue是一套用于构建用户界面的渐进式JavaScript框架,Vue与其它大型框架的区别是,使用Vue可以自底向上逐层应用,其核心库只关注视图层,方便与第三方库和项目整合,且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。

关于如何 在Vue中使用Element实现动态生成新表单并添加验证功能就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


当前标题:如何在Vue中使用Element实现动态生成新表单并添加验证功能
本文网址:http://scyanting.com/article/geeosh.html

其他资讯