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.target.value.replace(/^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(!reg.test(this.phone)){
        this.phoneerrmsg = '請輸入正確的手機號';
        return false;
    }else{
        this.phoneerrmsg = '';
    }
    
    //獲取驗證碼的邏輯省略。。。
},

補充點：
在input事件中打印e時，會發現有時候事件對象中的isTrusted爲false，這是由於Event.isTrusted返回一個布爾值,爲true代表當前事件是由用戶行爲觸發(好比說真實的鼠標點擊觸發一個click事件), 爲false代表事件由一個腳本生成的(使用事件構造方法,好比event.initEvent)