需求

前端開發過程中，經常遇到表單校驗的需求，比如校驗使用者輸入框的內容，限制使用者只能輸入數字。

本文內容基於 element-ui，el-form 元件可以繫結 model、rule 用於表單內容校驗，但如果有多個表單多個輸入框那就得寫很多個 rule，雖然方法可以通用可是使用起來也是比較繁瑣的，可通過自定義執行實現一次註冊，多次使用。

Vue 自定義指令

我們使用 el-input 作為表單的輸入框

1. 先註冊一個自定義指令

import Vue from 'vue';

Vue.directive('LimitInputNumber',{
 bind(el) {
 # do something
 },});

2.使用自定義指令

直接在元件內繫結 v-limit-input-number 指令

<el-input v-limit-input-number />

3.指令內部校驗

onkeypress 事件

onkeypress 事件會在鍵盤按鍵被按下並釋放一個鍵時發生

可在事件觸發時檢測若輸入的值不為數字，直接返回 fales

Vue.directive('LimitInputNumber',{
 bind(el) {
 el.onkeypress = (event) => {
  return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8;
 };
 },});

但該事件存在一個問題，就是在中文輸入法的時候無法觸發事件，導致使用者可以輸入中文

oninput 事件

oninput 事件在使用者輸入時觸發

可在事件觸發時進行過濾，過濾掉那些不為數字的值，並重新繫結到輸入框上，解決了中文輸入法下的問題

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,});

總結

到此這篇關於vue自定義指令限制輸入框輸入值的文章就介紹到這了,更多相關vue自定義指令限制輸入框輸入值內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！