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>