如何 在Vue中使用Element實現動態生成新表單并添加驗證功能

這篇文章給大家介紹如何 在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是什么

Vue是一套用于構建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區別是，使用Vue可以自底向上逐層應用，其核心庫只關注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態系統支持的庫開發復雜的單頁應用。

關于如何 在Vue中使用Element實現動態生成新表單并添加驗證功能就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。