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位数字最大最小值，严谨点还要对电话格式做正则判断！！