快捷導(dǎo)航

Vue+Element實(shí)現(xiàn)動(dòng)態(tài)生成新表單并添加驗(yàn)證功能

更新時(shí)間：2019年05月23日 16:57:26 作者：酒香飄在巷子里

這篇文章主要介紹了Vue+Element實(shí)現(xiàn)動(dòng)態(tài)生成新表單并添加驗(yàn)證功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

首先有一個(gè)這樣的需求，表單中默認(rèn)有一個(gè)聯(lián)系人信息，用戶可以再添加新的聯(lián)系人信息

點(diǎn)擊添加更多聯(lián)系人之后

官方文檔中有寫用v-for來實(shí)現(xiàn)新增表單，但是那是單表單的新增，現(xiàn)在多表單的新增，可以考慮的實(shí)現(xiàn)方法是先寫死一個(gè)必須的表單，需要新增的兩個(gè)表單放在一個(gè)div里，在div中使用v-for生成，達(dá)到同時(shí)新增的效果

代碼如下

//必填一個(gè)聯(lián)系人的表單
<el-form-item class="rules" label="通知對(duì)象:" prop="notifyobject">
      <el-input v-model="ruleForm.notifyobject" placeholder="請(qǐng)輸入聯(lián)系人名稱" :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="請(qǐng)輸入郵箱" :disabled="isReadonly" class="el-select_box"></el-input>
     </el-form-item> 
//動(dòng)態(tài)生成的聯(lián)系人表單
     <div class="moreRules">
      <div class="moreRulesIn" v-for="(item, index) in ruleForm.moreNotifyObject" :key="item.key">
       <el-form-item class="rules" label="通知對(duì)象:" :prop="'moreNotifyObject.' + index +'.notifyobject'" :rules="moreNotifyOjbectRules.moreNotifyOjbectName">
        <el-input v-model="item.notifyobject" placeholder="請(qǐng)輸入聯(lián)系人名稱" :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="請(qǐng)輸入郵箱" :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>添加更多聯(lián)系人</el-button>
     </el-form-item>

和普通表單驗(yàn)證不同的是，動(dòng)態(tài)表單要新增自己的驗(yàn)證規(guī)則，和添加普通表單的方式一樣

ruleForm:{
  //普通表單的驗(yàn)證規(guī)則
}，
//新增表單的驗(yàn)證規(guī)則
   moreNotifyOjbectRules: {
    moreNotifyOjbectName: [{ required: true, message: '請(qǐng)輸入聯(lián)系人名稱', trigger: 'blur' },
     {
      validator: (rule, value, callback) => {
       if (value.length > 15 || value.length < 2) {
        callback(new Error('長度必須為2~8個(gè)字符'))
       } else {
        var reg = new RegExp("[`~!@#$^&*()=|{}':',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]")
        if (reg.test(value)) {
         callback(new Error('不能含有特殊字符'))
        } else {
         callback()
        }
       }
      },
      trigger: 'change'
     }
    ],
    moreNotifyOjbectEmail: [{ required: true, message: '請(qǐng)輸入郵箱地址', trigger: 'blur' },
     { type: 'email', message: '請(qǐng)輸入正確的郵箱地址', trigger: 'blur' }
    ]
   }

這里需要注意的是：rules是每個(gè)表單都要都要添加的，有多個(gè)的話就要給每個(gè)表單綁定一個(gè)規(guī)則

<el-form-item class="rules" label="通知對(duì)象:" :prop="'moreNotifyObject.' + index +'.notifyobject'" :rules="moreNotifyOjbectRules.moreNotifyOjbectName">
<el-form-item class="rules" label="郵箱:" :prop="'moreNotifyObject.'+ index +'.email'" :rules="moreNotifyOjbectRules.moreNotifyOjbectEmail">

另外要注意的是：prop，正常表單驗(yàn)證單項(xiàng)是依靠prop，但是動(dòng)態(tài)生成話要用：prop。

書寫的語法是:prop="'moreNotifyObject.' + index +'.notifyobject'"，moreNotifyObject是v-for綁定的數(shù)組，index是索引，notifyobject是表單綁定的v-model的名稱，然后用.把他們鏈接起來。

所以總結(jié)起來的語法就是:prop="'v-for綁定的數(shù)組.' + index + '.v-model綁定的變量'"

還有一個(gè)需要注意就是v-for的寫法，要將表單的model名寫進(jìn)去

<div class="moreRulesIn" v-for="(item, index) in ruleForm.moreNotifyObject" :key="item.key">

還有要注意的就是v-for綁定的數(shù)組也要在表單的對(duì)象里，寫在表單對(duì)象外是驗(yàn)證不了的，在data里添加

ruleform：{
  moreNotifyObject: [{
     notifyobject: '',
     email: ''
    }]
}

然后新增聯(lián)系人的函數(shù)應(yīng)該這樣寫

 addUser() {
   this.ruleForm.moreNotifyObject.push({
    notifyobject: '',
    email: ''
   })
  }

同理刪除聯(lián)系人也是

deleteRules(item, index) {
   this.index = this.ruleForm.moreNotifyObject.indexOf(item)
   if (index !== -1) {
    this.ruleForm.moreNotifyObject.splice(index, 1)
   }
  }

如果一開始只想讓默認(rèn)必填的表單顯示，而新增的不顯示，如文章最開頭的表現(xiàn)一樣，則可以在methods中初始化v-for綁定的數(shù)組

methods：{
  //初始化數(shù)據(jù)
  initData(){
    this.ruleFrom.moreNotifyObject = []
  }}

總結(jié)

以上所述是小編給大家介紹的Vue+Element實(shí)現(xiàn)動(dòng)態(tài)生成新表單并添加驗(yàn)證功能，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: