elementui中表单校验身份证当类型为其他时不验证

最新推荐文章于 2025-05-29 15:46:55 发布

原创最新推荐文章于 2025-05-29 15:46:55 发布 · 2.2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #其他 #前端

本文介绍了一个在项目中实现身份证号验证的场景，当证件类型为身份证时，进行身份证号格式校验；否则，不进行验证。通过自定义校验规则并结合表单验证规则和prop属性，实现了不同证件类型下的逻辑联动。这使得在选择港澳台通行证或护照时，可以灵活地调整验证策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目中遇到以下情况，当证件类型为身份的时候要验证身份证号，如果证件类型是港澳台通行证或者护照的时候就不用校验

此时要将校验规则写道data里进行自定义逻辑

var isCardId = (rule, value, callback) => {
      if (!value) {
        return new Error("请输入身份证号)");
      } else {
        if (this.addPersonnelForm.documenttype == "idcard") {
          const reg =
            /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[0-2])(([0-2][1-9])|10|20|30|31)\d{3}(\d|X|x)$/;
          const card = reg.test(value);
          if (!card) { 
            callback(new Error("身份证号格式有误！"));
          } else {
            callback();
          }
        }
      }
    };

表单验证规则里要写如下代码

IDNumber: [
          { required: true, message: "请输入证件号", trigger: "blur" },
          { validator: isCardId, trigger: "blur" },
        ],

同时在表单里要写prop属性才能进行匹配校验

<el-form-item label="证件号" prop="IDNumber">
          <el-input
            v-model="addPersonnelForm.IDNumber"
            placeholder="请输入"
            autocomplete="off"
            style="width: 70%"
          ></el-input>
        </el-form-item>

这样便能联动证件类型，当选择身份证时才进行身份证校验，当是护照或者港澳台通行证的时候不用验证，当然了也可以进行相应的验证，只需要判断以下证件类型进行相应的验证即可！！！