vue驗證input(自然數，正整數，小數)自定義全局指令

 

我的項目是基於Vue和Element-ui的，如果朋友們沒有用element-ui,請把代碼中的el.children[0].value替換為el.value即可

用了這個指令，驗證一些常規的數字更加方便，可以直接組織不符合的數字輸入進去

主要就是注冊全局的自定義指令，監聽鍵盤抬起事件通過條件判斷是否讓其輸入成功

/**
 * @desc 驗證整數類型數字方法
 * @param {Object} e
 * @param {regular} reg 正則
 * @param {Number} charcode 鍵盤code
 * */
let checkNumber = (e, reg, charcode) => {
  if (!reg.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey) {
    if (e.preventDefault) {
      e.preventDefault();
    } else {
      e.returnValue = false;
    }
  }
};

/**
 * @desc 驗證浮點類型小數方法(建議用text類型的表單)
 * @param {Object} e
 * @param {regular} reg 正則
 * @param {Number} charcode 鍵盤code
 * @param {Object} el dom對象
 * */
let checkFloat = (e, reg, charcode, el) => {
  if (charcode == 46) {
    if (el.children[0].value.includes(".")) {
      e.preventDefault();
    }
    return;
  } else if (
    !reg.test(String.fromCharCode(charcode)) &&
    charcode > 9 &&
    !e.ctrlKey
  ) {
    if (e.preventDefault) {
      e.preventDefault();
    } else {
      e.returnValue = false;
    }
  }
};

/**
 * @author LeeYunxiang
 * @description 限制數字輸入格式 int => 正整數 , num => 自然數(正整數包括0) , float => 正數包括小數(建議用text類型的input表單)
 *  */
export default {
  key: "positive",
  func: {
    inserted(el, bind) {
      el.addEventListener("keypress", e => {
        e = e || window.event;
        let charcode = typeof e.charCode == "number" ? e.charCode : e.keyCode;
        let reg = null;
        switch (bind.value) {
          case "num":
            reg = /\d/;
            checkNumber(e, reg, charcode);
            break;
          case "int":
            if (el.children[0].value.length === 0) {
              reg = /^[1-9]$/;
            } else {
              reg = /\d/;
            }
            checkNumber(e, reg, charcode);
            break;
          case "float":
            reg = /\d/;
            checkFloat(e, reg, charcode, el);
            break;
        }
      });
    }
  }
};

然后在同目錄下創建名為index.js的javascript文件

導出install方法用來全局注冊

import Positive from "./Positive.js";
const directives = [Positive];
export default {
  install: Vue => {
    if (directives.length && directives.length > 0) {
      directives.map(item => {
        Vue.directive(item.key, item.func);
      });
    }
  }
};

創建完畢后在main.js中引入index.js文件並注冊

import Directives from "@/directives/index";
Vue.use(Directives);
Vue.config.productionTip = false;

new Vue({
  router: Router,
  store: Store,
  render: h => h(App)
}).$mount("#app");

全局注冊成功后就可以在項目中的每個組件里面應用了

ps. 驗證float類型的數字時建議用text類型的input表單

<el-input v-model="number_one" v-positive="'num'" placeholder="我是自然數" type="number"></el-input>
<el-input v-model="number_two" v-positive="'int'" placeholder="我是正整數" type="number"></el-input>
<el-input v-model="number_three" v-positive="'float'"  placeholder="我是小數" type="text"></el-input>