在项目开发的时候，一般表单检验都是做非空检验即可，但是难免会遇到证件号码或者手机号校验，通常我们都要调用公共js进行实现，input校验较为简单，但是select如果没有用过的还是会有点头疼。下面我将对我在项目开发的一部分校验跟大家分享一下。

首先肯定要准备好公共js（validate.js）

基本结构是必要的:rules="formRules" 和  prop="dsrmc"

        <el-form
          ref="editAdminForm"
          key="formRules"
          :rules="formRules"
          :model="formTable"
          label-width="220px"
          class="demo-ruleForm"
        >
              <el-form-item label="当事人名称：" prop="dsrmc">
                <el-input
                  v-model="formTable.dsrmc"
                  placeholder="请输入当事人名称"
                  maxlength="100"
                ></el-input>
              </el-form-item>
              <el-form-item label="当事人类型：" prop="dsrlx">
                <el-select
                  v-model="formTable.dsrlx"
                  clearable
                  placeholder="请选择当事人类型"
                >
                  <el-option
                    v-for="(item, index) in dsrlxList"
                    :key="index"
                    :label="item.mc"
                    :value="item.bm"
                  ></el-option>
                </el-select>
              </el-form-item>

        </el-form>

然后就是应用validate.js

import { validate } from "@/utils/validate";

select的号码校验

接下来是对select的校验，放在data里和return同层级，自定义变量定义要校验的参数，this.formTable.zjlx是选择的证件类型下拉选择，选择完证件类型，再输入证件号码才有效：

    var checkPersonalCertificate = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("证件号码不能为空"));
      }
      if (!this.formTable.zjlx) {
        return callback(new Error("请先选择证件类型"));
      }
      switch (this.formTable.zjlx) {
        case "1": // 身份证
          if (validate.idCardValidate(value)) {
            callback();
          } else {
            callback(new Error("证件号码格式有误"));
          }
          break;
        case "2": // 中国护照
          if (validate.passportValidate(value)) {
            callback();
          } else {
            callback(new Error("证件号码格式有误"));
          }
          break;
        case "3": // 台湾
          if (validate.taiwValidateL(value)) {
            callback();
          } else {
            callback(new Error("证件号码格式有误"));
          }
          break;
        case "4": // 港澳
          if (validate.hKongMacaoValidate(value)) {
            callback();
          } else {
            callback(new Error("证件号码格式有误"));
          }
          break;
        case "7": // 信用代码
          if (validate.checkSocialCredit(value)) {
            callback();
          } else {
            callback(new Error("证件号码格式有误"));
          }
          break;

        default:
          callback();
          break;
      }
    };

实现的代码：

看清楚红色的框框，frRules是表单要传的:rules的参数,只要在frRules里面找到zjhm的校验属性添加多一个validator把data自定义好的参数传进来：  validator:checkPersonalCertificate 这样即可。

input的号码校验代码

单个input进行号码校验更加简单，直接再validator:validate.cellphone 。这里的validate是引入的js，通过定义名直接点js里面的函数名即可

也欢迎有更好办法的朋友下面留言交流