輸入框中限制一般有三種處理方法正則表達式
第一種:設置type屬性(不推薦)this
設置type屬性爲number,text等等,此方法輸入框的後面會有沒必要要樣式出現spa
<el-input type="number"></el-input>
第二種:在屬性中添加onkeyup或者oninput進行正則判斷code
onkeyup,oninput,onchange各有好壞,在這裏,推薦onkeyup,在要求不是過高的系統中能夠這樣使用orm
<el-input v-model="form" onkeyup="value=value.replace(/[^\d]/g,0)"> </el-input>
第三種:經過監聽事件監聽,對於一些特殊要求的輸入框能夠採用此方法blog
當輸入完畢後檢查整段輸入值的規則是否符合,若是不符合就設置爲空。事件
由於不知道用戶中途會不會輸入英文字母,漢字,特殊字符等等不規則字符。input
採用第二種方法就會難以判斷字符的格式,最後用戶確認時說不定會報錯。form
以手機號碼爲例(其餘格式都同樣,都只是換一下正則表達式罷了)class
<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 = ''; },