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


Posted in Javascript onMay 23, 2019

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

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

点击添加更多联系人之后

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

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

代码如下

//必填一个联系人的表单
<el-form-item class="rules" label="通知对象:" prop="notifyobject">
      <el-input v-model="ruleForm.notifyobject" placeholder="请输入联系人名称" :disabled="isReadonly" class="el-select_box"></el-input>
     </el-form-item>
     <el-form-item class="rules" label="邮箱:" prop="email">
      <el-input v-model="ruleForm.email" placeholder="请输入邮箱" :disabled="isReadonly" class="el-select_box"></el-input>
     </el-form-item> 
//动态生成的联系人表单
     <div class="moreRules">
      <div class="moreRulesIn" v-for="(item, index) in ruleForm.moreNotifyObject" :key="item.key">
       <el-form-item class="rules" label="通知对象:" :prop="'moreNotifyObject.' + index +'.notifyobject'" :rules="moreNotifyOjbectRules.moreNotifyOjbectName">
        <el-input v-model="item.notifyobject" placeholder="请输入联系人名称" :disabled="isReadonly" class="el-select_box"></el-input>
       </el-form-item>
       <el-form-item class="rules" label="邮箱:" :prop="'moreNotifyObject.'+ index +'.email'" :rules="moreNotifyOjbectRules.moreNotifyOjbectEmail">
        <el-input v-model="item.email" placeholder="请输入邮箱" :disabled="isReadonly" class="el-select_box"></el-input>
       </el-form-item>
       <el-button @click="deleteRules(item, index)" :disabled="isReadonly">删除</el-button>
      </div>
     </div>
     <el-form-item v-show="!isRead">
      <el-button type="text" class="addUser" @click="addUser" :disabled="isReadonly"><i class="iconfont icon-tianjialianxiren"></i>添加更多联系人</el-button>
     </el-form-item>

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

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是每个表单都要都要添加的,有多个的话就要给每个表单绑定一个规则

<el-form-item class="rules" label="通知对象:" :prop="'moreNotifyObject.' + index +'.notifyobject'" :rules="moreNotifyOjbectRules.moreNotifyOjbectName">
<el-form-item class="rules" label="邮箱:" :prop="'moreNotifyObject.'+ index +'.email'" :rules="moreNotifyOjbectRules.moreNotifyOjbectEmail">

另外要注意的是:prop,正常表单验证单项是依靠prop,但是动态生成话要用:prop。

书写的语法是:prop="'moreNotifyObject.' + index +'.notifyobject'",moreNotifyObject是v-for绑定的数组,index是索引,notifyobject是表单绑定的v-model的名称,然后用.把他们链接起来。

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

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

<div class="moreRulesIn" v-for="(item, index) in ruleForm.moreNotifyObject" :key="item.key">

还有要注意的就是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实现动态生成新表单并添加验证功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
ie focus bug 解决方法
Sep 03 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
Jul 04 Javascript
javascript full screen 全屏显示页面元素的方法
Sep 27 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
May 04 Javascript
javascript 用函数实现继承详解
May 28 Javascript
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
Jun 12 jQuery
vue中阻止click事件冒泡,防止触发另一个事件的方法
Feb 08 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
Apr 17 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
Aug 26 Javascript
微信小程序 下拉刷新及上拉加载原理解析
Nov 06 Javascript
JavaScript原型式继承实现方法
Nov 06 Javascript
JS中forEach()、map()、every()、some()和filter()的用法
May 11 Javascript
vue elementui el-form rules动态验证的实例代码详解
May 23 #Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
May 23 #Javascript
使用vue自定义指令开发表单验证插件validate.js
May 23 #Javascript
微信小程序开发实现消息推送
Nov 18 #Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 #jQuery
js打开word文档预览操作示例【不是下载】
May 23 #Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
May 23 #Javascript
You might like
如何选购合适的收音机
2021/03/01 无线电
php判断用户是否关注微信公众号
2016/07/22 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
JavaScript 垃圾回收机制分析
2013/10/10 Javascript
qq悬浮代码(兼容各个浏览器)
2014/01/29 Javascript
javascript制作的网页侧边弹出框思路及实现代码
2014/05/21 Javascript
javascript获取元素偏移量的方法有哪些
2014/06/24 Javascript
创建、调用JavaScript对象的方法集锦
2014/12/24 Javascript
有效提高JavaScript执行效率的几点知识
2015/01/31 Javascript
JS数组合并push与concat区别分析
2015/12/17 Javascript
JS运动相关知识点小结(附弹性运动示例)
2016/01/08 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
2016/04/26 Javascript
js实现砖头在页面拖拉效果
2020/11/20 Javascript
基于jQuery的select下拉框选择触发事件实例分析
2016/11/18 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
2017/02/20 Javascript
JavaScript初学者必看“new”
2017/06/12 Javascript
vue封装一个简单的div框选时间的组件的方法
2019/01/06 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
2019/02/21 Javascript
Vue管理系统前端之组件拆分封装详解
2020/08/23 Javascript
python使用wxpython开发简单记事本的方法
2015/05/20 Python
Python深入06——python的内存管理详解
2016/12/07 Python
Python 解决中文写入Excel时抛异常的问题
2018/05/03 Python
利用python将图片版PDF转文字版PDF
2019/05/03 Python
PyQT实现菜单中的复制,全选和清空的功能的方法
2019/06/17 Python
django框架单表操作之增删改实例分析
2019/12/16 Python
Python 面向对象之类class和对象基本用法示例
2020/02/02 Python
基于python3实现倒叙字符串
2020/02/18 Python
Python使用pyexecjs代码案例解析
2020/07/13 Python
python二维图制作的实例代码
2020/12/03 Python
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
2013/01/30 HTML / CSS
新加坡第一大健康与美容零售商:屈臣氏新加坡(Watsons Singapore)
2020/12/11 全球购物
演讲比赛获奖感言
2014/02/02 职场文书
人力资源职位说明书
2014/07/29 职场文书
Redis数据结构之链表与字典的使用
2021/05/11 Redis
《吸血鬼:避世 血猎》官宣4.27发售 系列首款大逃杀
2022/04/03 其他游戏
flex布局中使用flex-wrap实现换行的项目实践
2022/06/21 HTML / CSS