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

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

主要介绍了Vue+Element实现动态生成新表单并添加验证功能，本文通过实例代码给大家介绍的非常详细，具有

一定的参考借鉴价值,需要的朋友可以参考下

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

点击添加更多联系人之后

官方文档中有写用v-for来实现新增表单，但是那是单表单的新增，现在多表单的新增，可以考虑的实现方法是先写死一个必须的

表单，需要新增的两个表单放在一个div里，在div中使用v-for生成，达到同时新增的效果

代码如下

</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>

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

ruleForm:{

//普通表单的验证规则

}，

//新增表单的验证规则

moreNotifyOjbectRules: {

moreNotifyOjbectName: [{ required: true, message: '请输入联系人名称', trigger: 'blur' },

{

validator: (rule, value, callback) => {

if (value.length > 15 || value.length < 2) {

callback()

}

}

},