如何在Vue中使用Element实现动态生成新表单并添加验证功能-创新互联
这篇文章给大家介绍如何 在Vue中使用Element实现动态生成新表单并添加验证功能,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
我们提供的服务有:成都做网站、网站设计、微信公众号开发、网站优化、网站认证、浦江ssl等。为成百上千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的浦江网站制作公司首先有一个这样的需求,表单中默认有一个联系人信息,用户可以再添加新的联系人信息
点击添加更多联系人之后
官方文档中有写用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实现动态生成新表单并添加验证功能就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
新闻标题:如何在Vue中使用Element实现动态生成新表单并添加验证功能-创新互联
当前地址:http://ybzwz.com/article/dicpej.html