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 相关文章推荐
XENON基于JSON变种
Jul 27 Javascript
基于JavaScript 下namespace 功能的简单分析
Jul 05 Javascript
javascript打印输出json实例
Nov 11 Javascript
js控制分页打印、打印分页示例
Feb 08 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
Jun 11 Javascript
javascript实现方法调用与方法触发小结
Mar 26 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
Nov 18 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
Dec 29 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
Apr 25 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
Aug 01 Javascript
vue router自动判断左右翻页转场动画效果
Oct 10 Javascript
WebPack配置vue多页面的技巧
May 15 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
PHP日期函数date格式化UNIX时间的方法
2015/03/19 PHP
Yii中的relations数据关联查询及统计功能用法详解
2016/07/14 PHP
PHP中__set()实例用法和基础讲解
2019/07/23 PHP
PHP实现提高SESSION响应速度的几种方法详解
2019/08/09 PHP
确保Laravel网站不会被嵌入到其他站点中的方法
2019/10/18 PHP
传智播客学习之java 反射
2009/11/22 Javascript
JavaScript 一道字符串分解的题目
2011/08/03 Javascript
JavaScript实现存储HTML字符串示例
2014/04/21 Javascript
JS在IE下缺少标识符的错误
2014/07/23 Javascript
利用Node.js编写跨平台的spawn语句详解
2017/02/12 Javascript
vue axios 表单提交上传图片的实例
2018/03/16 Javascript
微信小程序tabbar底部导航
2018/11/05 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
2020/03/12 Javascript
详解关于Vue单元测试的几个坑
2020/04/26 Javascript
Python常用内置函数总结
2015/02/08 Python
浅谈Python中copy()方法的使用
2015/05/21 Python
python字符串对其居中显示的方法
2015/07/11 Python
解析Python中的生成器及其与迭代器的差异
2016/06/20 Python
Python使用crontab模块设置和清除定时任务操作详解
2019/04/09 Python
python输出电脑上所有的串口名的方法
2019/07/02 Python
python 3.6.7实现端口扫描器
2019/09/04 Python
Python 3.8 新功能大揭秘【新手必学】
2020/02/05 Python
PyQt5实现登录页面
2020/05/30 Python
基于python+selenium自动健康打卡的实现代码
2021/01/13 Python
IE滤镜与CSS3效果(详细整理分享)
2013/01/25 HTML / CSS
用React加CSS3实现微信拆红包动画效果
2017/03/13 HTML / CSS
廉价连衣裙和婚纱礼服在线销售:Tbdress
2019/02/28 全球购物
公司庆典活动邀请函
2014/01/09 职场文书
创业计划书模版
2014/02/05 职场文书
员工拓展培训方案
2014/02/15 职场文书
数学教师个人总结
2015/02/06 职场文书
工程部岗位职责
2015/02/10 职场文书
酒店员工辞职信范文
2015/02/28 职场文书
音乐会主持人开场白
2015/05/28 职场文书
分析JVM源码之Thread.interrupt系统级别线程打断
2021/06/29 Java/Android
python模块与C和C++动态库相互调用实现过程示例
2021/11/02 Python