Vue 正则校验文本框为正整数

封装一个指令，简单粗暴，不需要在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位小数的