el-input限制只能輸入數字(開發小記)


輸入框中限制通常有三種處理方法

第一種:設置type屬性(不推薦)

設置type屬性為number,text等等,此方法輸入框的后面會有不必要樣式出現

<el-input  type="number"></el-input>

第二種:在屬性中添加onkeyup或者oninput進行正則判斷

onkeyup,oninput,onchange各有好壞,在這里,推薦onkeyup,在要求不是太高的系統中可以這樣使用

<el-input 
    v-model="form" 
    onkeyup="value=value.replace(/[^\d]/g,0)">
</el-input>

第三種:通過監聽事件監聽,對於一些特殊要求的輸入框可以采用此方法

當輸入完畢后檢查整段輸入值的規則是否符合,如果不符合就設置為空。

因為不知道用戶中途會不會輸入英文字母,漢字,特殊字符等等不規則字符。

采用第二種方法就會難以判斷字符的格式,最后用戶確認時說不定會報錯。

以手機號碼為例(其他格式都一樣,都只是換一下正則表達式罷了)

<el-input
     v-model="form.telephone"
     placeholder="請輸入11位手機號"
     @change="confirmTelephone">
</el-input>

methods中

confirmTelephone() {
        if (!/^1[0-9]{10}$/.test(this.form.telephone))
          this.form.telephone = '';
 },

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM