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

风清云淡_A 2020-07-03 15:03:07

566

分类专栏： vue 文章标签： vue.js 前端 element-ui

本文链接：https://blog.csdn.net/qq_27702739/article/details/107105606

版权

现在的项目在使用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;
});

测试结果：