Vue實(shí)現(xiàn)數(shù)值型輸入框并限制長(zhǎng)度
更新時(shí)間：2022年05月31日 14:18:14 作者：樂(lè)之終曲
這篇文章主要介紹了Vue實(shí)現(xiàn)數(shù)值型輸入框并限制長(zhǎng)度，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue數(shù)值型輸入框并限制長(zhǎng)度
描述
原有的 <el-input type="number" /> 個(gè)人覺(jué)得存在問(wèn)題，maxlength 屬性無(wú)法生效，其次 max 屬性雖然能夠限制，但是無(wú)法阻止用戶手動(dòng)輸入，因此依然存在 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ù)點(diǎn)的數(shù)字
<el-input v-model="form.userName" @input="onInput('keyName', $event)"></el-input>// 限制只能輸入數(shù)字、帶小數(shù)點(diǎn)的數(shù)字、小數(shù)點(diǎn)保留5位，想要小數(shù)點(diǎn)后保留多少位，可將{0,5}中的5改為對(duì)應(yīng)的位數(shù)，例如保留1位：{0,1}
onInput(key, event){
? ?this.form[key] = event.match(/^\d*(\.?\d{0,5})/g)[0]
}2.限制輸入的只能為11位手機(jī)號(hào)
<el-input v-model="form.phone" maxlength="11" @input="onInput('keyName', $event)"></el-input>// 首先限制它只能輸入整數(shù)，最大長(zhǎng)度為maxlength="11"，其次是當(dāng)它輸入長(zhǎng)度達(dá)到11位時(shí)進(jìn)行校驗(yà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('您輸入的手機(jī)號(hào)不正確')
?? ? ? }
? ?}
}3.電子郵箱正則
/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
4.身份證正則
// 身份證普通的校驗(yàn)
/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/// 18位身份證精準(zhǔn)校驗(yà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]$/以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue3自定義drag指令的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12
這篇文章主要介紹了Vue-cli配置打包文件本地使用的教程圖解,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-08-08
ant design vue 清空upload組件圖片緩存的問(wèn)題
這篇文章主要介紹了ant design vue 清空upload組件圖片緩存的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue?注釋template中組件的屬性說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue Element前端應(yīng)用開發(fā)之功能點(diǎn)管理及權(quán)限控制
在一個(gè)業(yè)務(wù)管理系統(tǒng)中，如果我們需要實(shí)現(xiàn)權(quán)限控制功能，我們需要定義好對(duì)應(yīng)的權(quán)限功能點(diǎn)，然后在界面中對(duì)界面元素的功能點(diǎn)進(jìn)行綁定，這樣就可以在后臺(tái)動(dòng)態(tài)分配權(quán)限進(jìn)行動(dòng)態(tài)控制了，權(quán)限功能點(diǎn)是針對(duì)角色進(jìn)行控制的，也就是簡(jiǎn)稱RBAC（Role Based Access Control）。2021-05-05
這篇文章主要介紹了nuxt引入組件和公共樣式的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
vue配置nprogress實(shí)現(xiàn)頁(yè)面頂部進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了vue配置nprogress實(shí)現(xiàn)頁(yè)面頂部進(jìn)度條，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
下面小編就為大家分享一篇axios攔截設(shè)置和錯(cuò)誤處理方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vue項(xiàng)目同時(shí)兼容pc和移動(dòng)端的解決方式
我們經(jīng)常在項(xiàng)目中會(huì)有支持pc與手機(jī)端需求,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目同時(shí)兼容pc和移動(dòng)端的解決方式,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
vue中實(shí)現(xiàn)拖拽排序功能的詳細(xì)教程
在業(yè)務(wù)中列表拖拽排序是比較常見的需求,下面這篇文章主要給大家介紹了關(guān)于vue中實(shí)現(xiàn)拖拽排序功能的詳細(xì)教程,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08