antd-vue 自定义表单验证

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

二、具体实现步骤：

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

      },

三、效果展示：

你已经成功了，撒花。
今天的分享到此结束，欢迎小伙伴们一起交流