Vue怎么實現數值型輸入框并限制長度

這篇文章主要介紹了Vue怎么實現數值型輸入框并限制長度的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Vue怎么實現數值型輸入框并限制長度文章都會有所收獲，下面我們一起來看看吧。

vue數值型輸入框并限制長度

描述

原有的 <el-input type="number" /> 個人覺得存在問題，maxlength 屬性無法生效，其次 max 屬性雖然能夠限制，但是無法阻止用戶手動輸入，因此依然存在 bug

代碼

改為正則表達式方式

<el-input v-model="form.level" onkeyup="this.value=this.value.replace(/[^\d.]/g,'');" maxlength="10" 
show-word-limit clearable />

vue輸入框限制各種輸入格式

1.限制只能輸入數字、帶小數點的數字

<el-input v-model="form.userName" @input="onInput('keyName', $event)"></el-input>

// 限制只能輸入數字、帶小數點的數字、小數點保留5位，想要小數點后保留多少位，可將{0,5}中的5改為對應的位數，例如保留1位：{0,1}
onInput(key, event){
   this.form[key] = event.match(/^\d*(\.?\d{0,5})/g)[0]
}

2.限制輸入的只能為11位手機號

<el-input v-model="form.phone" maxlength="11" @input="onInput('keyName', $event)"></el-input>

// 首先限制它只能輸入整數，最大長度為maxlength="11"，其次是當它輸入長度達到11位時進行校驗
onInput(key, event){
   this.form[key] = event.replace(/[^\d]/g,'')
   if(event.length >= 11) {
       const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
       if(!reg.test(event)) {
            console.log('您輸入的手機號不正確')
       }
   }
}

3.電子郵箱正則

/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/

4.身份證正則

// 身份證普通的校驗
/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/

// 18位身份證精準校驗
 /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/

關于“Vue怎么實現數值型輸入框并限制長度”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“Vue怎么實現數值型輸入框并限制長度”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。