Vue input组件验证输入框输入内容

时间:2022-09-08 JackieDYH 人气:0

AntD是什么？

AntD is An enterprise-class UI design language and React UI library.(AntD是一款企业级的UI设计语言和React UI类库。)

antd的特性和优势如下：

1、提炼自企业级中后台产品的交互语言和视觉风格。

2、开箱即用的高质量 React 组件。

3、使用 TypeScript 构建，提供完整的类型定义文件。

4、全链路开发和设计工具体系

5、数十个国际化语言支持。

6、深入每个细节的主题定制能力。

antd应用方法

1、安装

安装组件库：npm install antd --save或yarn add antd

安装图标库：npm install @ant-design/icons -s

下面看下Vue input组件验证输入框输入内容的实现代码，效果图如下所示：

效果图

示例代码

<a-form-model-item prop="phone">
  <a-input v-model="form.phone" :maxLength="11" placeholder="手机号" />
</a-form-model-item>
<a-form-model-item prop="code">
  <a-input v-model="form.code" placeholder="验证码" />
</a-form-model-item>
<a-form-model-item prop="num">
  <a-input v-model="form.num" placeholder="请输入数字" />
</a-form-model-item>

<script>
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;
    },
  },
};
</script>

加载全部内容