有個小需求 驗證手機號(移動h5)
手機上點輸入框調起數字鍵盤,並且只能輸入11位純數字
一開始用的<input type='number' v-model="phone" maxlengt="11">
但是有兩個問題:
一是maxlength不起作用 無法限制長度
另一個是 由於數字鍵盤可以輸入'-+.'這兩個字符 一旦輸入這兩個字符 this.phone 的值就變成空
比如輸入021 繼續輸入- e.target.value就會變為空,因為021-不是數字,不合法。不過 -4是合法的
解決辦法:
type的屬性值 有一個tel 定義用於電話號碼的文本字段
於是改為<input type='tel' v-model="phone" @input="input" maxlengt="11">
這樣寫maxlength會生效 由於是電話鍵盤 除了'-+.' 還允許輸入‘#*’時 此時 this.phone 就是 輸入框中的值
因此還需要通過js代碼 處理這兩個符號 添加一個input方法:
input() {
this.phone = this.phone.replace(/[^0-9]/g, '');
}
這樣就實現了我們想要的功能。