问题描述:在vue的input框只能输入数字,如电话号码等
实现代码:
其中:
1、type="number"限定只能输入数字,但可以是小数、自然对数的底:e,负数等
2、οninput=“if(value.length>11)value=https://www.it610.com/article/value.slice(0,11)” 限定输入长度不得大于11位
3、@keydown则是添加一个vue键盘输入事件,触发方法checkInput
checkInput(e){
let prohibitInput= ["-", "e", "+", "E","."];
if(prohibitInput.includes(e.key)){
e.preventDefault()
}
}
此方法作用为,当键盘输入与prohibitInput中值匹配到时,阻止元素发生的默认行为,实现prohibitInput中的值不能被输入。
但存在一个问题:当用中文输入法输入e并按回车,此时的输入的e则会在input框中展示,但输入框绑定的值其实是空的,所以需要增加一步校验就可以了,但是,出现这个问题我也没搞懂,希望有大佬能给解答一波~
【vue中input框只能输入数字】增加输入校验
checkTelHead(tel){
//const r = /^\+?[0-9][0-9]*$/;
// 正整数(可以以0打头)
const r = /^\+?[1-9][0-9]*$/;
// 正整数
if (!r.test(tel)) {
this.$alert("请输入正确的号码!");
return false;
};
if(telHead.length != 11){
this.$alert("请填写11位的号码!");
return false;
};
return true;
}
推荐阅读
- node|node和express实现mySql模糊搜索
- vue|vue中使用videojs
- js|vue实现顶部导航栏
- vue|仓管系统设计
- vue|程序员接私活必备后台框架,不用重复造轮子,网友(太好用了!)
- 毕业设计|SpringMVC+Vue项目运动品交易商城
- 课程设计|SpringMVC+Vue项目旅游资源网站
- vue|npm方法安装vue
- typescript|【Vue】vue2.6使用TS之vue-class-component与vue-property-decorator使用详解