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 = []
    }
}
           

參考文章