日常避坑--input输入框type=number仍可以输入“e“,“.“等符号

问题发现

在使用ElementUI的input框时候，我们有时候需要只让用户输入数字类型。
这个时候你可能就会想到<input type="number">,
思路没错，但是踩着坑啦。

1. 我定义了一个number类型的input框

2. 但是，输入框仍旧可以输入"e","."等特殊符号。

3. 原因:

这个是真的坑啊，后来Yan查阅了一下原因，是因为W3C规定了,我们平常的科学计数法是可以用e来表示的啊。

解决办法

Yan的解决办法就是：用原生的input框, 自己写正则表达式!

代码:

// 对地图码的验证规则
let checkMapCode = (rule: any, value: any, callback: any) => {
    if (!value) {
        //判断是否必填
        return callback(new Error('请输入地图码(必填，数字类型)'))
    } else {
        //验证是否是数字的正咋表达式
        let reg = /^[0-9]*$/;
        //是的话，放行。不是的话，提示。
        if (reg.test(value)) {
            callback();
        } else {
            return callback(new Error('请输入数字类型'))
        }
    }
}

// 检验表单，validator对应使用上面checkMapCode方法
let ListFormRules = reactive({
    MapCode: [{ required: true, validator: checkMapCode, trigger: "change" }],
});

成功结果

当我们自己定义了正则表达式后,我们就解决了这个坑，如下图所示，我们输入"e"和"."后，就会返回检测不通过的提示。

---

抓紧时间练起来吧，兄dei，再不练你就废啦！

记得支持我哦，么么哒，祝您好事成双~~~~~~