现在的项目在使用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位数字最大最小值,严谨点还要对电话格式做正则判断!!