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)