Vue使用antd中input组件去验证输入框输入内容

81次阅读

共计 1299 个字符，预计需要花费 4 分钟才能阅读完成。

导读	这篇文章主要介绍了 Vue 使用 antd 中 input 组件去验证输入框输入内容 -rules- 案例, 本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

效果图

Vue 使用 antd 中 input 组件去验证输入框输入内容

示例代码

export default {
  name: "Login",
  data() {const validateCode = (rule, value, callback) => {if (value === "") {callback(new Error("验证码为空"));
        return false;
      } else if (value !== this.identifyCode) {callback(new Error("验证码不正确"));
        return false;
      } else {callback();
      }
    };
    // 使用正则表达式验证手机号
    const checkPhone = (rule, value, callback) => {if (!value) {return callback(new Error("手机号不能为空"));
      } else {
        // 获取工具类中的手机号正则表达式
        const phoneReg =
          /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
        if (phoneReg.test(value)) {callback();
        } else {
          // 如果验证输入错误就清空
          this.form.phone = "";
          return callback(new Error("请输入正确的手机号"));
        }
      }
    };
    return {
      form: {
        phone: "",
        password: "",
        code: "",
        num:"",
      },
      rules: {
        phone: {
          validator: checkPhone,// 自定义校验
          //   required: true,
          //   message: "手机号",
          trigger: "blur",
        },
        password: {required: true, message: "请输入密码", trigger: "blur"},
        code: [
          {
            // validator: validateCode,
            required: true,
            message: "请输入验证码",
            trigger: "blur",
          },
        ],
        num: [
          {
            required: true,
            pattern: new RegExp(/^[0-9]\d*$/, 'g'),// 正则表达式校验
            message: '请输入类型为整数!',
            trigger: 'blur',
          },
        ],
      },
    };
  },
  computed: {
    // 用于校验手机号码格式是否正确
    phoneNumberStyle() {let reg = /^1[3456789]\d{9}$/;
      if (!reg.test(this.form.phone)) {return false;}
      return true;
    },
  },
};

到此这篇关于 Vue 使用 antd 中 input 组件去验证输入框输入内容 -rules- 案例的文章就介绍到这了。