Daily pit avoidance -- input input box type=number can still input "e", "." and other symbols

problem discovery

When using the input box of ElementUI, we sometimes need to only allow users to enter numeric types.
At this time, you may think of <input type="number">,
the idea is correct, but you are stepping on a pit.

1. I defined an input box of type number

2. However, special symbols such as "e",".", etc. can still be entered in the input box.

3. reason:

This is a real pitfall. Later, Yan checked the reason, because W3C stipulated that our usual scientific notation can be represented by e.

Solution

Yan's solution is: use the original input box and write the regular expression yourself!

code:

// 对地图码的验证规则
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" }],
});

successful result

When we define the regular expression ourselves, we can solve this pit, as shown in the figure below, after we enter "e" and ".", it will return a prompt that the test fails.

---

Hurry up and practice, brother dei, if you don't practice, you will be useless!

Remember to support me, okay, I wish you good things in pairs~~~~~~