ant design of vue v-decorator失焦时校验

校验手机号

本文以校验手机号为例

1、标签使用失焦事件

           <a-input
                  v-decorator="['reporterTel']"
                  :disabled="disabled"
                  @blur="validatePhoneBlur"
                />

2、通过对e.target.value校验后，生成错误信息

    validatePhoneBlur(e) {
        // 判断是否有输入内容，防止空校验
      if (!e.target.value) {
        this.form.setFields({
          reporterTel: { value: e.target.value, errors: null }
        });
      }
        //手机号正则 表示13、14等等开头时的校验规则
      const validatePhoneReg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (e.target.value && !validatePhoneReg.test(e.target.value)) {
        // 此处field须对应
        const arr = [
          {
            message: "您输入的手机格式不正确",
            field: "reporterTel"
          }
        ];
        this.form.setFields({
          reporterTel: { value: e.target.value, errors: arr }
        });
      }
    },