Vue實現(xiàn)數(shù)值型輸入框并限制長度
更新時間：2022年05月31日 14:18:14 作者：樂之終曲
這篇文章主要介紹了Vue實現(xiàn)數(shù)值型輸入框并限制長度，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue數(shù)值型輸入框并限制長度
描述
原有的 <el-input type="number" /> 個人覺得存在問題，maxlength 屬性無法生效，其次 max 屬性雖然能夠限制，但是無法阻止用戶手動輸入，因此依然存在 bug
代碼
改為正則表達(dá)式方式
<el-input v-model="form.level" onkeyup="this.value=this.value.replace(/[^\d.]/g,'');" maxlength="10"? show-word-limit clearable />
vue輸入框限制各種輸入格式
1.限制只能輸入數(shù)字、帶小數(shù)點的數(shù)字
<el-input v-model="form.userName" @input="onInput('keyName', $event)"></el-input>// 限制只能輸入數(shù)字、帶小數(shù)點的數(shù)字、小數(shù)點保留5位，想要小數(shù)點后保留多少位，可將{0,5}中的5改為對應(yīng)的位數(shù)，例如保留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>// 首先限制它只能輸入整數(shù)，最大長度為maxlength="11"，其次是當(dāng)它輸入長度達(dá)到11位時進(jìn)行校驗
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位身份證精準(zhǔn)校驗
?/^[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]$/以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這兩天在學(xué)習(xí)vue，主要是為了實現(xiàn)前后端的分離，因此數(shù)據(jù)的傳輸是必不可少的一個環(huán)節(jié)，這篇文章主要介紹了JSON數(shù)組和JSON對象在vue中的獲取方法,需要的朋友可以參考下2022-09-09
這篇文章主要為大家詳細(xì)介紹了Vue3中useLocalStorage用法的相關(guān)知識,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價值,感興趣的小伙伴可以了解一下2023-10-10
vue嵌套路由與404重定向?qū)崿F(xiàn)方法分析
這篇文章主要介紹了vue嵌套路由與404重定向?qū)崿F(xiàn)方法,結(jié)合實例形式分析了vue.js嵌套路由與404重定向的概念、原理、實現(xiàn)步驟與相關(guān)操作技巧,需要的朋友可以參考下2018-05-05
這篇文章主要介紹了vue 引用自定義ttf、otf、在線字體的方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
Vue2.0利用vue-resource上傳文件到七牛的實例代碼
本篇文章主要介紹了Vue2.0利用vue-resource上傳文件到七牛的實例代碼，具有一定的參考價值，有興趣的可以了解一下2017-07-07
vue中使用echarts實現(xiàn)動態(tài)數(shù)據(jù)綁定以及獲取后端接口數(shù)據(jù)
總結(jié)一下自己最近項目中用echarts動態(tài)獲取接口數(shù)據(jù)并畫圖的方法,下面這篇文章主要給大家介紹了關(guān)于vue中使用echarts實現(xiàn)動態(tài)數(shù)據(jù)綁定以及獲取后端接口數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2022-07-07
Vue.js是JavaScript MVVM（Model-View-ViewModel）庫，十分簡潔，Vue核心只關(guān)注視圖層，相對AngularJS提供更加簡潔、易于理解的API。接下來通過本文給大家介紹vue的基本用法與常見指令，感興趣的朋友一起看看吧2017-08-08
這篇文章主要介紹了el-select組件綁定change事件的踩坑記錄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
vue緩存分為頁面緩存、組建緩存、接口緩存，這里我主要說到了頁面緩存和組建緩存。接下來通過本文給大家介紹vue服務(wù)端渲染緩存應(yīng)用 ,需要的朋友可以參考下2018-09-09
這篇文章主要為大家詳細(xì)介紹了vue圖片拖拉轉(zhuǎn)放大縮小組件的使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10