本文介紹了兩種特殊表單的校驗方式。

1. 對象里包含數(shù)組
2. 對象里包含對象

首先看第一種谒亦，對象里包含數(shù)組放闺，表單通過v-for生成
示例代碼如下：

  <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
    >
     <el-form-item label="年齡" prop="age">
        <el-input v-model.number="ruleForm.age"></el-input>
      </el-form-item>
      <!-- start---看這里！---start -->
      <div v-for="(item,index) in ruleForm.citiesList" :key="index">
        <el-form-item
          :label="index==0?'去過的城市：':''"
          :prop="`citiesList[${index}].name`"
          :rules="citiesList.name"
          required
        >
           <el-input type="text" v-model="item.name"></el-input>
           <el-button type="text" @click="addCity()">新增</el-button>
        </el-form-item>
     <!-- end---看這里盆驹！---end-->
      </div>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
      </el-form-item>
    </el-form>

<script>
  export default {
    data() {
      var checkAge = (rule, value, callback琅催， params) => {
        // params為當前表單key值和value拼接成的字符串居凶，如 name[1]:ccc，可以通過截取params獲取當前索引
        let key = Object.keys(params)[0]
        let index = +key.replace(/\D+/g, '')
        // 在此編寫具體校驗邏輯
        if (!value) {
          return callback(new Error('年齡不能為空'));
        }
      };
      return {
        ruleForm: {
          age: '',
          citiesList: [
              name: ''
          ]
        },
        rules: {
          age: [
            { validator: checkAge, trigger: 'blur' }
          ]
        },
        // 注意此處
        citiesList: {
            name: [
                {required:true,message: '請輸入城市名稱', trigger: ['change', 'blur']}
            ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
      addCity() {
        this.ruleForm.citiesList.push([ name: ''])
      }
    }
  }
</script>

對象中包含對象

第二種情況示例代碼如下：

<el-form :model="form" :rules="rules">
   <el-form-item label="收件人郵箱：" prop="mailVo.receiver" required>
      <el-input  type="text"  v-model="form.mailVo.receiver" />
   </el-form-item>
</el-form>

data () {
  return {
    form: {
          mailVo: {  receiver: '' }
      },
    rules: {
        receiver: [{ required: true, message: '請輸入收件人郵箱', trigger: ['blur', 'change'] }]
      }
}

表單綁定了 form.mailVo.receiver藤抡，如果像上面代碼中rules那樣寫侠碧，是起不了校驗作用的。
只需改成：

  rules: {
        'mailVo.receiver': [{ required: true, message: '請輸入收件人郵箱', trigger: ['blur', 'change'] }]
      }

一定要記得加引號~