Form 組件提供了表單驗(yàn)證的功能，只需要通過 rules 屬性傳入約定的驗(yàn)證規(guī)則，并將 Form-Item 的 prop 屬性設(shè)置為需校驗(yàn)的字段名即可。

正常情況下的表單驗(yàn)證寫法

<template>
  <div class="user-detail-body">
    <el-form ref="ruleForm" :model="ruleForm" :inline="true" label-width="150px" :rules="rules">
      <el-form-item label="員工姓名" prop="empName">
        <el-input clearable v-model="ruleForm.empName" size="small" placeholder="請輸入" maxlength="20"></el-input>
      </el-form-item>
      <el-form-item label="所屬組織部門" prop="deptName">
        <el-input v-model="ruleForm.deptName" size="small" placeholder="請選擇">
          <i slot="suffix" class="el-input__icon el-icon-search" @click="openDepartmentSelect"></I>
        </el-input>
      </el-form-item>
      <el-form-item label="員工手機(jī)號碼" prop="mobileNo">
        <el-input clearable v-model="ruleForm.mobileNo" size="small" placeholder="請輸入"></el-input>
      </el-form-item>
      <el-form-item label="證件類型" prop="certificateType">
        <el-select placeholder="請選擇" size="small" filterable prop="certificateType" v-model="ruleForm.certificateType">
          <el-option label="身份證" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="性別" prop="gender">
        <el-radio-group v-model="ruleForm.gender">
          <el-radio :label="1">男</el-radio>
          <el-radio :label="2">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="入職日期" prop="entryDate">
        <el-date-picker type="date" placeholder="選擇日期" v-model="ruleForm.entryDate" size="small" style="width: 100%;"></el-date-picker>
      </el-form-item>
    </el-form>
  </div>
</template>

data() {
  return {
    ruleForm: {
      empName: '', //員工姓名
      deptName: '', //部門名
      mobileNo: '', //手機(jī)號碼
      certificateType: '', //證件類型
      gender: '', //性別
      entryDate: '', //入職時(shí)間
    },
    rules: {
      empName: [
        {required: true, message: '請輸入員工姓名', trigger: 'blur'},
      ],
      mobileNo: [
        {required: true, message: '請輸入11位手機(jī)號', trigger: 'blur'},
        {max: 11, message: '請輸入11位手機(jī)號'},
        {
          validator(rule, value, callback) {
            (/^[1][0-9]{10}$/g).test(value) ? callback() : callback(new Error("請輸入正確手機(jī)號"))
          },
          trigger: 'blur'
        }
      ],
      gender: [
        {required: true, message: '請輸入選擇性別', trigger: 'change'},
      ]
    }
  };
},

但是，有可能我們的需求是這樣的，如圖：

image.jpg

商城和系統(tǒng)管理是從后臺接口返回的，隨著開通業(yè)務(wù)的增多，業(yè)務(wù)模塊還會返回更多。那么如果表單項(xiàng)里有通過 v-for 動(dòng)態(tài)生成的表單項(xiàng)，該如何驗(yàn)證呢？

先附上循環(huán)表單項(xiàng)沒有加驗(yàn)證之前的代碼：

<div>已開通的業(yè)務(wù)：</div>
<div v-for="(item, index) in ruleForm.businessList" :key="item.serviceId">
  <el-row>
    <el-col :span="5">
      <span class="opening-app">{{item.serviceName}}</span>
    </el-col>
    <el-col :span="19">
      <el-form-item label="渠道商戶號" label-width="100px">
        <el-input v-model="item.userMercCode" clearable size="small" placeholder="請輸入渠道商戶號"></el-input>
      </el-form-item>
    </el-col>
  </el-row>
</div>

首先是添加rules規(guī)則，這個(gè)和正常添加規(guī)則一樣

data() {
  return {
    ruleForm: {
      businessList: [{"serviceId":null, "serviceName":"", "userMercCode":""}]
    },
    rules: {
      userMercCode: [
        {required: true, message: '請輸入渠道商戶號', trigger: 'blur'},
      ]
    }
  };
}

然后給表單項(xiàng)添加驗(yàn)證

<el-form-item label="渠道商戶號" :prop="'businessList.'+index+'.userMercCode'" :rules="rules.userMercCode" label-width="100px">
  <el-input v-model="item.userMercCode" clearable size="small" placeholder="請輸入渠道商戶號"></el-input>
</el-form-item>

注意事項(xiàng)

• :rules
  原來的寫法是直接在外層 <el-form :rules="rules"> 標(biāo)簽上設(shè)置一個(gè)總的 :rules 就可以了 ，現(xiàn)在是不僅需要設(shè)置總的 :rules ，還需要給 v-for 循環(huán)里的標(biāo)簽單獨(dú)設(shè)置 :rules ，<el-form-item :rules="rules.userMercCode">。注意要用 rules.userMercCode。

• :prop
  另外主要就是 :prop 了，注意正常驗(yàn)證表單項(xiàng)是 prop，而這里是 :prop。
  :prop="'businessList.'+index+'.userMercCode'" 是拼接的形式，前面是 v-for 綁定的數(shù)組，中間是數(shù)組索引 index，最后是表單項(xiàng)綁定的 v-model 的名稱，然后用點(diǎn) . 把它們連接起來。這三項(xiàng)都必須保證正確，錯(cuò)一個(gè)都無法驗(yàn)證。

• ruleForm
  最后就是要注意，v-for 綁定的數(shù)組也必須綁定在 form 對象里，注意上面的 data 里：

ruleForm: {
  businessList: [{"serviceId":null, "serviceName":"", "userMercCode":""}]
},