element ui表格的校驗和自定義校驗規則

<!-- * @Description: element ui表格校驗 由於最近太多人問這個需要怎么校驗所以貼了一個demo供參考 * @Version: 2.0 * @Autor: lhl * @Date: 2020-01-15 11:15:40 * @LastEditors: lhl * @LastEditTime: 2020-05-08 09:21:48 -->
<template>
  <div>
    <el-form :model="tableForm" ref="tableForm">
      <el-table :data="tableForm.tableData" border style="width: 100%"
      >
        <el-table-column label="姓名">
          <template slot-scope="scope">
            <el-form-item :prop="`tableData.${scope.$index}.name`" :rules="tableRules.name">
              <el-input v-model="scope.row.name"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="年齡">
          <template slot-scope="scope">
            <el-form-item :prop="`tableData.${scope.$index}.age`" :rules="tableRules.age">
              <el-input v-model="scope.row.age"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="電話">
          <template slot-scope="scope">
            <el-form-item :prop="`tableData.${scope.$index}.phone`" :rules="tableRules.phone">
              <el-input v-model="scope.row.phone"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <div>
      <el-button type="primary" @click="submitForm('tableForm')">提交</el-button>
      <el-button @click="resetForm('tableForm')">重置</el-button>
    </div>
  </div>
</template>

<script> export default { data() { // 自定義校驗規則
    var checkPhone = (rule, value, callback) => {   let reg = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/   if (!reg.test(value)) {     callback(new Error('請輸入正確號碼'))   } else {     callback()   } } return { tableForm: { tableData: [ { name: "", age: "", phone: "" } ] }, tableRules: { // 姓名
 name: [ { required: true, message: "請輸入姓名" , trigger: 'blur' }, { max: 20, message: "長度在20個字符以內" , trigger: 'blur' } ], //年齡
 age: [ { required: true, message: "請輸入年齡", trigger: 'blur' }, { max: 20, message: "長度在20個字符以內", trigger: 'blur' } ], //電話
 phone: [ { required: true, message: "請輸入電話", trigger: 'blur' }, { validator: checkPhone, trigger: 'blur' } ] } }; }, methods: { submitForm(formName) { this.$refs[formName].validate(valid => { if (valid) { alert("submit!"); } else { console.log("error submit!!"); return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); } } }; </script>