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.
I defined an input box of type number
However, special symbols such as "e",".", etc. can still be entered in the input box.
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~~~~~~