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 相关文章推荐
Dom 学习总结以及实例的使用介绍
Apr 24 Javascript
火狐textarea输入法的bug的触发及解决
Jul 24 Javascript
jQuery插件expander实现图片翻转特效
May 21 Javascript
jquery日历插件datepicker用法分析
Jan 22 Javascript
jQuery实现点击行选中或取消CheckBox的方法
Aug 01 Javascript
Angularjs 制作购物车功能实例代码
Sep 14 Javascript
Bootstrap媒体对象学习使用
Mar 07 Javascript
JS表单传值和URL编码转换
Mar 03 Javascript
JS实现访问DOM对象指定节点的方法示例
Apr 04 Javascript
vue实现前台列表数据过滤搜索、分页效果
May 28 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
Dec 12 Javascript
JavaScript实例 ODO List分析
Jan 22 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获得当前的脚本网址
2007/12/10 PHP
PHP chmod 函数与批量修改文件目录权限
2010/05/10 PHP
php数组使用规则分析
2015/02/27 PHP
PHP正则表达式过滤html标签属性(DEMO)
2016/05/04 PHP
3种方法轻松处理php开发中emoji表情的问题
2016/07/18 PHP
php实现的SSO单点登录系统接入功能示例分析
2016/10/12 PHP
laravel 解决多库下的DB::transaction()事务失效问题
2019/10/21 PHP
RGB颜色值转HTML十六进制(HEX)代码的JS函数
2009/04/25 Javascript
js获取url参数值的两种方式
2013/09/10 Javascript
引用 js在IE与FF之间的区别详细解析
2013/11/20 Javascript
javaScript的函数对象的声明详解
2015/02/06 Javascript
div中文字内容溢出常见的解决方法
2017/03/16 Javascript
从源码看angular/material2 中 dialog模块的实现方法
2017/10/18 Javascript
webpack开发环境和生产环境的深入理解
2018/11/08 Javascript
微信小程序仿知乎实现评论留言功能
2018/11/28 Javascript
koa+mongoose实现简单增删改查接口的示例代码
2019/05/13 Javascript
详解Nuxt.js 实战集锦
2019/11/19 Javascript
[47:53]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#2COL VS Spirit
2016/03/02 DOTA
使用python BeautifulSoup库抓取58手机维修信息
2013/11/21 Python
Python列表生成器的循环技巧分享
2015/03/06 Python
Python标准模块--ContextManager上下文管理器的具体用法
2017/11/27 Python
Python中摘要算法MD5,SHA1简介及应用实例代码
2018/01/09 Python
解决python os.mkdir创建目录失败的问题
2018/10/16 Python
Python自动重新加载模块详解(autoreload module)
2020/04/01 Python
python如何爬取网页中的文字
2020/07/28 Python
css3的动画特效之动画序列(animation)
2017/12/22 HTML / CSS
美国眼镜网:GlassesUSA
2017/09/07 全球购物
德国机车企业:FC-Moto
2017/10/27 全球购物
会计师事务所审计实习自我鉴定
2013/09/20 职场文书
电力公司个人求职信范文
2014/02/04 职场文书
工程类专业自荐信范文
2014/03/09 职场文书
社团活动总结
2014/04/28 职场文书
精彩的演讲稿开头
2014/05/08 职场文书
我的中国梦演讲稿300字
2014/08/19 职场文书
优秀团员自我评价
2015/03/10 职场文书
《当代神农氏》教学反思
2016/02/23 职场文书