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>