elementUI——el-form表單數據校驗（包含數組循環）

一、普通的值類型的數據校驗
①設置 el-form-item 的 prop 值 與 formdata 中定義的 key 保持一致`
②如果 rules 需要通過 el-form 統一設置，rules 的 key 定義也與 prop 保持一致（如果不一致，需要在 el-form-item 中 手動指定）
③複雜的校驗函數可通過 validator 單獨定義

<el-form
  class="demo-form"
  :model="form"
  :rules="rules"
>
  <el-form-item label="數據庫庫名：" prop="database">
     <el-input v-model="form.database" placeholder="請輸入數據庫庫名"> </el-input>
  </el-form-item>
  <el-form-item label="數據表名稱：" prop="sheet">
        <el-input v-model="form.sheet" placeholder="請輸入數據表名稱"> </el-input>
  </el-form-item>
</el-form>

<script>
import { Reg_w } from '@/utils/reg'
export default {
  data() {
    // 數據庫表名校驗
    let validatorSheet = (rule, value, callback) => {
      if (!value) {
        callback(new Error('請輸入數據表名稱'))
      } else if (!Reg_w(value)) {
        callback(new Error('表名稱僅支持字母數字下劃線組合'))
      } else {
        callback()
      }
    }
    return {
      // 表單數據
      form: {
        // 數據表名稱
        sheet: undefined,
        // 數據庫庫名
        database: undefined,
      },
      // 校驗規則
      rules: {
        sheet: [{ required: true, validator: validatorSheet, trigger: 'blur' }],
        database: [{ required: true, message: '請輸入數據庫庫名', trigger: 'blur' }],
      },
    }
  },
}
</script>

二、表單數據爲數組，數組循環中的每個字段需要校驗
在上述使用方式的基礎上，需要額外注意：
①prop 在循環中需要對應到 formdata 中 數組的某一項具體值，可以利用 index 等變量 進行鎖定，再取到 具體的key
②v-model 結合循環正常使用
③el-form-item 的 rules 需要 手動指定

<el-form
  class="demo-form"
  :model="form"
  :rules="rules"
>
  <div v-for="(item, index) in form.fieldList" :key="item.id" class="sheet-item">
    <!-- 字段名稱 -->
    <el-form-item :prop="`fieldList[${index}][field]`" :rules="rules.field_name">
      <el-input v-model="item.field" placeholder="請輸入字段名"> </el-input>
    </el-form-item>
    <!-- 字段註釋 -->
    <el-form-item :prop="`fieldList[${index}][comment]`" :rules="rules.field_comment">
      <el-input v-model="item.comment" placeholder="請輸入字段註釋"> </el-input>
    </el-form-item>
  </div>
</el-form>

<script>
export default {
  data() {
    return {
      // 表單數據
      form: {
        // 表單字段列表
        fieldList: [
          //內部是這樣的格式： { id: 1, field: '字段1', comment: '註釋1' } 
        ],
      },
      // 校驗規則
      rules: {
        field_name: [{ required: true, message: '請輸入字段名', trigger: 'blur' }],
        field_comment: [{ required: true, message: '請輸入字段註釋', trigger: 'blur' }],
      },
    }
  },
}
</script>