Element-UI 中使用rules验证

第一种：写在data中进行验证

• <el-form>：代表这是一个表单
• <el-form> -> ref：表单被引用时的名称，标识
• <el-form> -> rules：表单验证规则
• <el-form> -> model：表单数据对象
• <el-form> -> label-width：表单域标签的宽度，作为 Form 直接子元素的 form-item 会继承该值
• <el-form> -> <el-form-item>：表单中的每一项子元素
• <el-form-item> -> label：标签文本
• <el-form-item> -> prop：表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的
• <el-input>：输入框
• <el-input> -> v-model：绑定的表单数据对象属性
• <el-input> -> style：行内样式
• <el-input> -> maxlength：最大字符长度限制

1.Template代码

<template>
  <div class="">
    <el-form
      :model="editvalue"
      :rules="editRules"
      ref="schoolEdit"
      label-width="150px"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="姓名：" prop="name">
            <el-input
              v-model="editvalue.name"
              placeholder="请输入姓名"
              maxlength="10"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="身份证号：" prop="idCardNumber">
            <el-input
              v-model="editvalue.idCardNumber"
              clearable
              maxlength="18"
              placeholder="请输入身份证号"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="入职日期：" prop="contractEntryDate">
            <el-date-picker
              style="width: calc(100% - 20px)"
              v-model="editvalue.contractEntryDate"
              clearable
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择入职日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">{{ $t("common.cancel") }}</el-button>
      <el-button type="primary" @click="Submit">{{
        $t("common.save")
      }}</el-button>
    </div>
  </div>
</template>

2.Script代码

<script>
var $this = null;
export default {
  props: {
    id: { type: Number },
  },
  data() {
    var checkIdentitytionId = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("身份证号不能为空"));
      }
      if (!/(^\d{15}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
        callback(new Error("你输入的身份证长度或格式错误"));
      }
      //身份证城市
      var aCity = {
        11: "北京",
        12: "天津",
        13: "河北",
        14: "山西",
        15: "内蒙古",
        21: "辽宁",
        22: "吉林",
        23: "黑龙江",
        31: "上海",
        32: "江苏",
        33: "浙江",
        34: "安徽",
        35: "福建",
        36: "江西",
        37: "山东",
        41: "河南",
        42: "湖北",
        43: "湖南",
        44: "广东",
        45: "广西",
        46: "海南",
        50: "重庆",
        51: "四川",
        52: "贵州",
        53: "云南",
        54: "西藏",
        61: "陕西",
        62: "甘肃",
        63: "青海",
        64: "宁夏",
        65: "新疆",
        71: "台湾",
        81: "香港",
        82: "澳门",
        91: "国外",
      };
      if (!aCity[parseInt(value.substr(0, 2))]) {
        callback(new Error("你的身份证地区非法"));
      }
      // 出生日期验证
      var sBirthday = (
          value.substr(6, 4) +
          "-" +
          Number(value.substr(10, 2)) +
          "-" +
          Number(value.substr(12, 2))
        ).replace(/-/g, "/"),
        d = new Date(sBirthday);
      if (
        sBirthday !=
        d.getFullYear() + "/" + (d.getMonth() + 1) + "/" + d.getDate()
      ) {
        callback(new Error("身份证上的出生日期非法"));
      }
      // 身份证号码校验
      var sum = 0,
        weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2],
        codes = "10X98765432";
      for (var i = 0; i < value.length - 1; i++) {
        sum += value[i] * weights[i];
      }
      var last = codes[sum % 11]; //计算出来的最后一位身份证号码
      if (value[value.length - 1] != last) {
        callback(new Error("你输入的身份证号非法"));
      }
      callback();
    };
    return {
      rules: {
        name: [
          {
            required: true,
            maxlength: 10,
            message: "请输入姓名",
            trigger: "blur",
          },
        ],
        idCardNumber: [
          { required: true, validator: checkIdentitytionId, trigger: "blur" },
        ],
        contractEntryDate: [
          { required: true, message: "请选择入职日期", trigger: "blur" },
        ],
      },
      editvalue: {},
      isWorkflowRefer: false,
    };
  },
  created() {
    $this = this;
   },
  methods: {
    Submit() {
      this.$refs["schoolEdit"].validate(async (valid) => { 
        if (valid) {
           //验证通过代码逻辑
          } else {
          //验证不通过代码逻辑
          this.$message({
            type: "error",
            message: "数据检查失败,请检查数据是否填写正确",
          });
          return;
        }
      });
    },
    },
};

• editRules：与上文 '表单内容' 中 <el-form> 表单的 :rules 属性值相同
• name、idCardNumber、contractEntryDate：与上文 '表单内容' 中 <el-form-item> 表单子元素的 prop 属性值相同
• 验证内容是：必填，失去焦点时验证，如果为空，提示信息为 '请输入XXX'
• 对contractEntryDate验证为自定义方法验证：将验证函数checkIdentitytionId写入data里面，使用validator调用对数据进行验证。

第二种验证：写在行内

1.Template代码

<el-form ref="rulesForm" :rules="editRules" :model="rulesForm" label-width="200px">
   <el-row>
        <el-col :span="24">
          <el-form-item label="姓名：" prop="name">
            <el-input
              v-model="editvalue.name"
              placeholder="请输入姓名"
              maxlength="10"
              clearable
       :rules=" [{ required: true, message: "请输入姓名", trigger: "blur"}]"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
</el-form>

 

本文仅做学习笔记，文章参考：https://blog.csdn.net/qq_41402200/article/details/86016313  此篇文章记录更全，知识点更广。