antv自定义表单验证方法以及具体实现（身份证，手机，邮箱验证）

本文链接：https://blog.youkuaiyun.com/pig_pig32/article/details/118541036

本文档介绍如何使用AntV表单验证API实现自定义校验规则，包括手机号码、身份证和邮箱的正则验证。通过在HTML模块中设置model、rules和自定义验证方法，实现在表单输入时触发blur事件进行实时验证，确保输入数据的合法性。

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

实现效果

在这里插入图片描述

实现思路

通过antv表单验证api接口得知，如果想自定义表单校验规则需要使用validator字段调用自定义校验方法，自定义方法需要传rule, value, callback这三个参数。知道这些使用方法就可以动手敲代码了，具体实现如下
在这里插入图片描述

HTML模块

      <h1>表单正则验证</h1>
      <a-form-model
        :model="checkData"
        :rules="rules"
        ref="ruleForm"
        :labelCol="{ span: 3 }"
        :wrapper-col="{ span: 20 }"
      >
        <a-form-model-item prop="idCard" label="身份证：">
          <a-input v-model="checkData.idCard"  />
        </a-form-model-item>
        <a-form-model-item prop="iphone" label="手机号码：">
          <a-input v-model="checkData.iphone" />
        </a-form-model-item>
        <a-form-model-item prop="Email" label="邮箱：">
          <a-input v-model="checkData.email" />
        </a-form-model-item>
      </a-form-model>
    </div>

数据定义及验证方法

checkData: { idCard: string, iphone: string,email: string} = { idCard: '', iphone: '',email: '',};


  /** 表单验证规则 */
  rules: object = {
    iphone: [{ validator: this.validaIphone, trigger: 'blur' }],
    idCard: [{ validator: this.validaIdCard, trigger: 'blur' }],
    email: [{ validator: this.validaEmail, trigger: 'blur' }],
  };

// 手机号码验证
  validaIphone(rule: any, value: any, callback: any) {
    if (!value) {
    //手机号码为空的时候
      callback(new Error('请输入手机号码'));
    } else {
    //不为空用正则验证手机号码
      let iphone = new RegExp(/^1[2-9]\d{9}$/);
      if (!iphone.test(value)) {
      //验证不通过回调给出相应提示
        callback(new Error('请正确的手机号码'));
      } else {
        callback();
      }
    }
  }

  // 身份证号码验证
 validaIdCard(rule: any, value: any, callback: any) {
  if (!value) {
    callback(new Error('请输入身份证号码!'));
  } else {
    let isCard = new RegExp(
      /^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|31)|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}([0-9]|x|X)$/
    );
    if (!isCard.test(value)) {
      callback(new Error('请输入正确的身份证号码!'));
    } else {
      callback();
    }
  }
}

// 邮箱验证
 validaEmail(rule: any, value: any, callback: any) {
  if (!value) {
    callback(new Error('请输入邮箱!'));
  } else {
    let email = new RegExp(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/);
    if (!email.test(value)) {
      callback(new Error('请输入合法邮箱!'));
    } else {
      callback();
    }
  }
}