vue自定義指令限制輸入框輸入值的步驟與完整代碼
需求
前端開(kāi)發(fā)過(guò)程中，經(jīng)常遇到表單校驗(yàn)的需求，比如校驗(yàn)用戶(hù)輸入框的內(nèi)容，限制用戶(hù)只能輸入數(shù)字。
本文內(nèi)容基于 element-ui，el-form 組件可以綁定 model、rule 用于表單內(nèi)容校驗(yàn)，但如果有多個(gè)表單多個(gè)輸入框那就得寫(xiě)很多個(gè) rule，雖然方法可以通用可是使用起來(lái)也是比較繁瑣的，可通過(guò)自定義執(zhí)行實(shí)現(xiàn)一次注冊(cè)，多次使用。
Vue 自定義指令
我們使用 el-input 作為表單的輸入框
1. 先注冊(cè)一個(gè)自定義指令
import Vue from 'vue';
Vue.directive('LimitInputNumber', {
bind(el) {
# do something
},
});
2.使用自定義指令
直接在組件內(nèi)綁定 v-limit-input-number 指令
<el-input v-limit-input-number />
3.指令內(nèi)部校驗(yàn)
onkeypress 事件
onkeypress 事件會(huì)在鍵盤(pán)按鍵被按下并釋放一個(gè)鍵時(shí)發(fā)生
可在事件觸發(fā)時(shí)檢測(cè)若輸入的值不為數(shù)字，直接返回 fales
Vue.directive('LimitInputNumber', {
bind(el) {
el.onkeypress = (event) => {
return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8;
};
},
});
但該事件存在一個(gè)問(wèn)題，就是在中文輸入法的時(shí)候無(wú)法觸發(fā)事件，導(dǎo)致用戶(hù)可以輸入中文
oninput 事件
oninput 事件在用戶(hù)輸入時(shí)觸發(fā)
可在事件觸發(fā)時(shí)進(jìn)行過(guò)濾，過(guò)濾掉那些不為數(shù)字的值，并重新綁定到輸入框上，解決了中文輸入法下的問(wèn)題
Vue.directive('LimitInputNumber', {
bind(el) {
el.oninput = () => {
el.children[0].value = el.children[0].value.replace(/\D/ig, '');
};
},
});
完整代碼
import Vue from 'vue';
Vue.directive('LimitInputNumber', {
bind(el) {
el.onkeypress = (event) => {
return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8;
};
el.oninput = () => {
el.children[0].value = el.children[0].value.replace(/\D/ig, '');
};
},
});
總結(jié)
到此這篇關(guān)于vue自定義指令限制輸入框輸入值的文章就介紹到這了,更多相關(guān)vue自定義指令限制輸入框輸入值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue項(xiàng)目如何部署到Tomcat服務(wù)器上
這篇文章主要介紹了Vue項(xiàng)目如何部署到Tomcat服務(wù)器上,Vue中自帶webpack,可以通過(guò)一行命令將項(xiàng)目打包,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03
Vue中瀑布流布局與圖片加載優(yōu)化的實(shí)現(xiàn)
本文主要介紹了Vue中瀑布流布局與圖片加載優(yōu)化的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
這篇文章主要介紹了詳解Vite的新體驗(yàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
vue Treeselect下拉樹(shù)只能選擇第N級(jí)元素實(shí)現(xiàn)代碼
這篇文章主要介紹了vue Treeselect下拉樹(shù)只能選擇第N級(jí)元素實(shí)現(xiàn)代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
Vue3進(jìn)行樣式Scoped和Global的設(shè)置方法
在 Vue 3 中,組件化開(kāi)發(fā)成為了我們提升前端開(kāi)發(fā)效率的利器,其中,樣式的管理也是一個(gè)至關(guān)重要的部分,在 Vue 中,我們會(huì)經(jīng)常使用兩種樣式作用域：Scoped 樣式和 Global 樣式,本文將通過(guò)示例代碼來(lái)介紹Vue3如何進(jìn)行樣式Scoped和Global的設(shè)置,需要的朋友可以參考下2025-01-01
這篇文章主要介紹了vue3中的ref和reactive定義數(shù)組方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
使用Vue.js創(chuàng)建一個(gè)時(shí)間跟蹤的單頁(yè)應(yīng)用
這篇文章主要介紹了使用Vue.js創(chuàng)建一個(gè)時(shí)間跟蹤的單頁(yè)應(yīng)用的相關(guān)資料,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2016-11-11
我們?cè)陂_(kāi)發(fā) Vue 項(xiàng)目的時(shí)候會(huì)使用一些前端組件庫(kù),例如 Element、Ant Design 等,這些組件庫(kù)雖然方便,但是也有一些缺點(diǎn),比如內(nèi)置的圖標(biāo)太少,例如我們開(kāi)發(fā)醫(yī)療、財(cái)務(wù)、工程等一些前端項(xiàng)目,內(nèi)置的圖標(biāo)不能滿(mǎn)足我們的需求,所以我們常常在Vue項(xiàng)目中引入SVG圖標(biāo)2024-09-09
這篇文章主要為大家詳細(xì)介紹了vue.js中v-for使用及索引獲取,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
vue2.0 與 bootstrap datetimepicker的結(jié)合使用實(shí)例
本篇文章主要介紹了vue2.0 與 bootstrap datetimepicker的結(jié)合使用實(shí)例，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-05-05