Vue+elementUI自定义验证

Vue+elementUI自定义验证

实战例子：

 <el-table
        ref="multipleTable" //制定table的ref属性
        :data="articleData.data"//指定数据源
        tooltip-effect="light"//样式
        stripe
        style="width: 100%"
        class="min_table"
      >
        <el-table-column prop="lecturer_name" label="讲师姓名" min-width="80" show-overflow-tooltip></el-table-column>
        <el-table-column label="职位" min-width="80" show-overflow-tooltip prop="position"></el-table-column>
        <el-table-column
          label="讲师介绍"
          align="center"
          min-width="570"
          show-overflow-tooltip
          prop="introduction"
        ></el-table-column>
      </el-table>

 data() {
    let validMobile = (rule, value, callback) => {
      if (value == "" || value == undefined) {
        callback(new Error("请填写手机号"));
      } else {
        let reg =/^1[3456789]\d{9}$/;  
        if (!reg.test(value)) {
          callback(new Error("格式不对"));
        } else {
          callback();
        }
      }
    };
    return {
      infos: "上传图片",
      types: "success",
      articleData: [],
      page: 1,
      typeofchose: "类型选择",
      // 业务员列表
      isDialogStudent: false,
      ruleForm: {
        school_name: "",
        telephones: "",
        school_address: "",
        sort: "",
        school_image: ""
      },
      rules: {
		//自定义手机号验证
        telephones: [{ validator:validMobile,trigger:'blur',required: true,}]
      },
    };
  },