elementui的async-validator验证数字类型(min max range验证)的探究

 现在的项目在使用elementui的做表单验证的时候,框架默认使用的是async-validator,但是很多坑在这里!今天记录下怎么验证number类型的输入值。

<el-form-item label="联系电话:" style="margin-left:20px" prop="tel">
     <el-input v-model="form.tel" style="width:400px"></el-input>
</el-form-item>

验证规则

    tel: [
          {
            required: true,
            message: "电话不能为空",
            trigger: "change,blur"
          },
          {
            min: 1,
            max: 11,
            type: "number",
            message: "必须为11位数字"
          }
        ]

经测试,第一条验证时可以触发的。

第二条规则在我们输入数字的时候也不能通过验证

主要时input框输入的都是string类型,即使用vue默认的v-model.number也不起作用。这个坑大了!!!!!!!!!!!

放弃吗?当然想过,但是作为一个负责任的前端er,必须想办法解决!不到万不得已不能无视这种坑!

于是就有了下面的解决方案:

         {
            min: 10000000000,
            max: 20000000000,
            type: "number",
            message: "必须为11位数字",
            transform: value =>
              this.$options.filters.formValidateFun(value, "number")
          }

此外我们的自定义指令:

import Vue from "vue";
Vue.filter("formValidateFun", (value, type) => {
  value = (value + "").replace(/(^\s*)|(\s*$)/g, ""); // 先去除前后空格,排除都是空格的情况
  switch (type) {
    case "number":
      value = value || value === 0 ? Number(value) : "";
      break;
  }
  return value;
});

测试结果:

完全输入数字

这样就通过了验证!!

注意点:

1.min,max在type为string类型的时候指的是字符串长度;

2.在type为number时指的是最大值,最小值,我这里的是验证电话号码,所以取的是11位数字最大最小值,严谨点还要对电话格式做正则判断!!

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页