快捷導(dǎo)航

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

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

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

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

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

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

代碼如下

//必填一個聯(lián)系人的表單
<el-form-item class="rules" label="通知對象:" prop="notifyobject">
      <el-input v-model="ruleForm.notifyobject" placeholder="請輸入聯(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="請輸入郵箱" :disabled="isReadonly" class="el-select_box"></el-input>
     </el-form-item> 
//動態(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="通知對象:" :prop="'moreNotifyObject.' + index +'.notifyobject'" :rules="moreNotifyOjbectRules.moreNotifyOjbectName">
        <el-input v-model="item.notifyobject" placeholder="請輸入聯(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="請輸入郵箱" :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>

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

ruleForm:{
  //普通表單的驗證規(guī)則
}，
//新增表單的驗證規(guī)則
   moreNotifyOjbectRules: {
    moreNotifyOjbectName: [{ required: true, message: '請輸入聯(lián)系人名稱', 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是每個表單都要都要添加的，有多個的話就要給每個表單綁定一個規(guī)則

<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，但是動態(tài)生成話要用：prop。

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

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

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

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

還有要注意的就是v-for綁定的數(shù)組也要在表單的對象里，寫在表單對象外是驗證不了的，在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實現(xiàn)動態(tài)生成新表單并添加驗證功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具