antd-vue 自定义表单验证

最新推荐文章于 2024-07-04 15:38:08 发布

原创最新推荐文章于 2024-07-04 15:38:08 发布

· 1.1k 阅读

6 ·

版权

文章标签：

#vue.js #javascript #前端

本文介绍了在组件库默认验证不足时，如何在React-AntDesign表单中实现自定义验证，如身份证号码的长度检查。通过实例展示了如何在证件类型变化时动态调整验证规则。

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

一、业务场景：
在做表单验证的时候，组件库自带的条件无法满足多条验证的需求，这个时候需要用到自定义的验证
在这里插入图片描述

二、具体实现步骤：

   <a-col :span="6" class="continstance" >
         <a-form-model-item label="证件号码" prop="IDNumber">
            <a-input v-model="form.IDNumber" placeholder="请输入"/>
         </a-form-model-item>
   </a-col>

  IDNumber: [{ required: true, message: '请输入', trigger: 'change'},
            { validator: this.valiIDNumber, trigger: 'change' },
          ],

      valiIDNumber(rule, value, callback) {
        // 如果 证件号码是空的时候 就不显示验证下面的提示文字了
        if (this.form.IDNumber==''){
          callback()
        }
        // 如果证件类型是身份证就验证一下身份证
        if (this.form.CardType=='IDENTITY_CARD'){
          // 自定义规则：检查密码是否包含特殊字符
          const specialCharacters = /^\d{15}(\d{2}(\d|X|x))?$/
          if (!specialCharacters.test(value)) {
            callback(new Error('身份证号长度为15位或18位'))
          } else {
            callback()
          }
        } else {
          callback();
        }

      },

三、效果展示：

在这里插入图片描述