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

最新推荐文章于 2024-11-08 15:16:59 发布

原创

最新推荐文章于 2024-11-08 15:16:59 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

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

实现效果

在这里插入图片描述

实现思路

通过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" />
        <<