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

更新时间：2019年05月23日 16:57:26 作者：酒香飘在巷子里

这篇文章主要介绍了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实现动态生成新表单并添加验证功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

Vue组件之间数据共享浅析
本文章向大家介绍vue组件中的数据共享，主要包括vue组件中的数据共享使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下
2022-11-11
vue实现At人文本输入框示例详解
这篇文章主要为大家介绍了vue实现At人文本输入框示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
深入理解使用Vue实现Context-Menu的思考与总结
这篇文章主要介绍了使用Vue实现Context-Menu的思考与总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-03-03
Vue获取表单数据的多种方式
这篇文章主要给大家介绍了关于Vue获取表单数据的多种方式,在Vue中我们通常使用v-model命令绑定表单的属性值(通常是value),获取到的属性值就是表单数据,需要的朋友可以参考下
2023-09-09
基于Vue的延迟加载插件vue-view-lazy
这篇文章主要介绍了基于Vue的延迟加载插件vue-view-lazy，可以使图片或者其他资源进入可视区域后加载，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05
Vue3.3 + TS4构建实现ElementPlus功能的组件库示例
Vue.js 是目前最盛行的前端框架之一,而 TypeScript 则是一种静态类型言语,它能够让开发人员在编写代码时愈加平安和高效,本文将引见如何运用 Vue.js 3.3 和 TypeScript 4 构建一个自主打造媲美 ElementPlus 的组件库
2023-10-10
vue悬浮可拖拽悬浮按钮的实例代码
这篇文章主要介绍了vue悬浮可拖拽悬浮按钮的实例代码，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-08-08
Vue+SpringBoot开发V部落博客管理平台
V部落是一个多用户博客管理平台。这篇文章主要介绍了Vue+SpringBoot开发V部落博客管理平台,需要的朋友可以参考下
2017-12-12
vue中关于@media媒体查询的使用
这篇文章主要介绍了vue中关于@media媒体查询的使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
Vue3属性绑定方法解析
这篇文章主要介绍了Vue3属性绑定方法解析，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2022-09-09