需求
前端開發(fā)過程中，經(jīng)常遇到表單校驗(yàn)的需求，比如校驗(yàn)用戶輸入框的內(nèi)容，限制用戶只能輸入數(shù)字。
本文內(nèi)容基于 element-ui，el-form 組件可以綁定 model、rule 用于表單內(nèi)容校驗(yàn)，但如果有多個(gè)表單多個(gè)輸入框那就得寫很多個(gè) rule，雖然方法可以通用可是使用起來也是比較繁瑣的，可通過自定義執(zhí)行實(shí)現(xiàn)一次注冊(cè)，多次使用。
Vue 自定義指令
我們使用 el-input 作為表單的輸入框
1. 先注冊(cè)一個(gè)自定義指令
|
1
2
3
4
5
6
7
|
import Vue from 'vue';Vue.directive('LimitInputNumber', { bind(el) { # do something },}); |
2.使用自定義指令
直接在組件內(nèi)綁定 v-limit-input-number 指令
|
1
|
<el-input v-limit-input-number /> |
3.指令內(nèi)部校驗(yàn)
onkeypress 事件
onkeypress 事件會(huì)在鍵盤按鍵被按下并釋放一個(gè)鍵時(shí)發(fā)生
可在事件觸發(fā)時(shí)檢測(cè)若輸入的值不為數(shù)字，直接返回 fales
|
1
2
3
4
5
6
7
|
Vue.directive('LimitInputNumber', { bind(el) { el.onkeypress = (event) => { return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8; }; },}); |
但該事件存在一個(gè)問題，就是在中文輸入法的時(shí)候無法觸發(fā)事件，導(dǎo)致用戶可以輸入中文
oninput 事件
oninput 事件在用戶輸入時(shí)觸發(fā)
可在事件觸發(fā)時(shí)進(jìn)行過濾，過濾掉那些不為數(shù)字的值，并重新綁定到輸入框上，解決了中文輸入法下的問題
|
1
2
3
4
5
6
7
|
Vue.directive('LimitInputNumber', { bind(el) { el.oninput = () => { el.children[0].value = el.children[0].value.replace(/\D/ig, ''); }; },}); |
完整代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
|
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)搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://segmentfault.com/a/1190000023816599
