vue开发中利⽤正则限制input框的输⼊（⼿机号、⾮0开头的正
整数等）
我们在前端开发中经常会碰到类似⼿机号输⼊获取验证码的情况，通常情况下⼿机号的输⼊需要只能输⼊11位的整数数字、并且需要过滤掉⼀些明显不符合⼿机号格式的输⼊，那么我们就需要⽤户在输⼊的时候就控制可以输⼊到输⼊框的字符。例如，⾸个字符是0或者⾮数字字符即使编辑了也输⼊不进去。这种需要通常就需要在input事件触发时就利⽤正则验证来实现了。以⼿机号为例：
html
<div class="e">
<label>⼿机号</label>
<input class="txt phonenum" maxlength="11" type="text" id="phonenum" v-model="phone" @input="inputPhone" placeholder="请输⼊⼿机号">
<p class="err" id="err_phonenum" v-show="phoneerrmsg"><span>{{phoneerrmsg}}</span></p>
</div>
js
//input事件处理
inputPhone(e){
this.phoneerrmsg = '';  //验证输⼊的提⽰信息
let filtered = e.place(/^0|[^\d]/g, '');
if(this.phone != filtered){
this.phone = filtered;
}
console.log(this.phone.length,this.phone,e)
},
//点击获取验证码的逻辑
getCode(){
//获取⼿机验证码
let reg = /^1[3-9][0-9]{9}$/;  //以1开头第⼆位数字为3-9 的11位数字
if(this.phone.length == 0){
this.phoneerrmsg = '请输⼊⼿机号';
return false;
}else if(!st(this.phone)){
this.phoneerrmsg = '请输⼊正确的⼿机号';
return false;
}else{
this.phoneerrmsg = '';
}
onpaste不能用input
//获取验证码的逻辑省略。。。
},
补充点：
在input事件中打印e时，会发现有时候事件对象中的isTrusted为false，这是因为Event.isTrusted返回⼀个布尔值，为true表明当前事件是由⽤户⾏为触发(⽐如说真实的⿏标点击触发⼀个click事件), 为false表明事件由⼀个脚本⽣成的(使⽤事件构造⽅法,⽐如event.initEvent)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。