首先有一個這樣的需求，表單中默認有一個聯系人信息，用戶可以再添加新的聯系人信息
點擊添加更多聯系人之后
官方文檔中有寫用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實現動態生成新表單并添加驗證功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
