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表单

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！