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>

 

__EOF__

本文作者：蓝色帅-橙子哥
本文链接：https://www.cnblogs.com/lhl66/p/12848559.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！