封装一个指令,简单粗暴,不需要在input上加上一大堆的方法或正则那么麻烦。
1.创建一个js文件,用来注入Vue全局指令
// 移入Vue
import Vue from 'vue';
// 通过Vue的指令方法,定义指令名称
Vue.directive('Int', {
// bind绑定 获取当前目标的input(就是在哪个文本框上使用指令)
bind: function(el) {
const input = el.getElementsByTagName('input')[0];
if (input) {
// 调用input方法,加入正则校验的逻辑
input.onkeyup = function(e) {
if (input.value.length === 1) {
input.value = input.value.replace(/[^0-9]/g, '');
} else {
input.value = input.value.replace(/[^\d]/g, '');
}
// 调用自定义事件
trigger(input, 'input');
};
input.onblur = function(e) {
if (input.value.length === 1) {
input.value = input.value.replace(/[^0-9]/g, '');
} else {
input.value = input.value.replace(/[^\d]/g, '');
}
trigger(input, 'input');
};
}
}
});
// 创建自定义事件
const trigger = (el, type) => {
const e = document.createEvent('HTMLEvents');
// 初始化默认值
e.initEvent(type, true, true);
// 触发自定义事件
el.dispatchEvent(e);
};
2. 在需要正则校验正整数的文本框中使用指令 v-int
<el-input v-model="test" placeholder="请输入" v-int></el-input>
这样就可以实现文本框校验了,终于不需要网上各种杂七杂八的在input上加代码 这样既简单可读性又高。
下面是本喵网上搜索到的正则校验大全拿去不谢,需要用到哪些正则校验的文本框,可以创建多个自定义指令,然后在指定的input上加上指令就可以实现组合式正则校验,有一个简单粗暴的方法你学废了吗?
1.校验数字的正则表达式
1 '数字:'
^[0-9]*$
2 'n位的数字:'
^\d{n}$
3 '至少n位的数字:'
^\d{n,}$
4 'm-n位的数字:'
^\d{m,n}$
5 '零和非零开头的数字:'
^(0|[1-9][0-9]*)$
6 '非零开头的最多带两位小数的数字:'
^([1-9][0-9]*)+(.[0-9]{1,2})?$
7 '带1-2位小数的正数或负数:'
^(\-)?\d+(\.\d{1,2})?$
8 '正数、负数、和小数:'
^(\-|\+)?\d+(\.\d+)?$
9 '有两位小数的正实数:'
^[0-9]+(.[0-9]{2})?$
10 '有1~3位小数的