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

快来打我* 2022-10-13 12:51 378阅读 0赞

## 实现效果 ##

![在这里插入图片描述][20210707103024135.gif_pic_center]

## 实现思路 ##

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

## 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();
        }
      }
    }

[20210707103024135.gif_pic_center]: /images/20221005/a9430a1d4ba54678b988af7f7d69e6d6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpZ19waWczMg_size_16_color_FFFFFF_t_70]: /images/20221005/0e30ce75ae30422992d448956fd24c85.png