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

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方法，加入正则校验的逻辑keyup = function(e) {if (input.value.length === 1) {input.value = place(/[^0-9]/g, '');} else {input.value = place(/[^d]/g, '');}// 调用自定义事件trigger(input, 'input');};blur = function(e) {if (input.value.length === 1) {input.value = place(/[^0-9]/g, '');} else {input.value = place(/[^d]/g, '');}trigger(input, 'input');};}}
});
// 创建自定义事件
const trigger = (el, type) => {const e = ateEvent('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位小数的正实数：'^[0-9]+(.[0-9]{1,3})?$
11 '非零的正整数：'^[1-9]d*$ 或 ^([1-9][0-9]*){1,3}$ 或 ^+?[1-9][0-9]*$
12 '非零的负整数：'^-[1-9][]0-9"*$ 或 ^-[1-9]d*$
13 '非负整数：'^d+$ 或 ^[1-9]d*|0$
14 '非正整数：'^-[1-9]d*|0$ 或 ^((-d+)|(0+))$
15 '非负浮点数：'^d+(.d+)?$ 或 ^[1-9]d*.d*|0.d*[1-9]d*|0?.0+|0$
16 '非正浮点数：'^((-d+(.d+)?)|(0+(.0+)?))$'或： '^(-([1-9]d*.d*|0.d*[1-9]d*))|0?.0+|0$
17 '正浮点数：'^[1-9]d*.d*|0.d*[1-9]d*$'或： '^(([0-9]+.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*.[0-9]+)|([0-9]*[1-9][0-9]*))$
18 '负浮点数：'^-([1-9]d*.d*|0.d*[1-9]d*)$'或：'^(-(([0-9]+.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*.[0-9]+)|([0-9]*[1-9][0-9]*)))$
19 '浮点数：'^(-?d+)(.d+)?$'或：' ^-?([1-9]d*.d*|0.d*[1-9]d*|0?.0+|0)$

2.校验字符的正则表达式

1 '汉字：'^[u4e00-u9fa5]{0,}$2 '英文和数字：'^[A-Za-z0-9]+$'或：'^[A-Za-z0-9]{4,40}$3 '长度为3-20的所有字符：'^.{3,20}$4 '由26个英文字母组成的字符串：'^[A-Za-z]+$5 '由26个大写英文字母组成的字符串：'^[A-Z]+$6 '由26个小写英文字母组成的字符串：'^[a-z]+$7 '由数字和26个英文字母组成的字符串：'^[A-Za-z0-9]+$8 '由数字、26个英文字母或者下划线组成的字符串：'^w+$'或：'^w{3,20}$9 '中文、英文、数字包括下划线：'^[u4E00-u9FA5A-Za-z0-9_]+$
10 '中文、英文、数字但不包括下划线等符号：'^[u4E00-u9FA5A-Za-z0-9]+$'或： '^[u4E00-u9FA5A-Za-z0-9]{2,20}$
11 '可以输入含有^%&',;=?$"等字符：'[^%&',;=?$x22]+
12 '禁止输入含有~的字符：'[^~x22]+

3.特殊需求正则表达

 1 'Email邮箱地址：'^w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$'或：'  /^[A-Za-z0-9._%-]+@([A-Za-z0-9-]+.)+[A-Za-z]{2,4}$/2 'url域名：'[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?3 'InternetURL：'[a-zA-z]+://[^s]* 或 ^([w-]+.)+[w-]+(/[w-./?%&=]*)?$4 '手机号码：'^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])d{8}$'或：'/^1[3|4|5|7|8]d{9}$/5 '电话号码("XXX-XXXXXXX"、"XXXX-XXXXXXXX"、"XXX-XXXXXXX"、"XXX-XXXXXXXX"、"XXXXXXX"和"XXXXXXXX)：'^((d{3,4}-)|d{3.4}-)?d{7,8}$ 6 '国内电话号码(0511-4405222、021-87888822)：'d{3}-d{8}|d{4}-d{7}7 '身份证号：''15或18位身份证：'^d{15}|d{18}$'15位身份证：'^[1-9]d{7}((0d)|(1[0-2]))(([0|1|2]d)|3[0-1])d{3}$'18位身份证：'^[1-9]d{5}[1-9]d{3}((0d)|(1[0-2]))(([0|1|2]d)|3[0-1])d{4}$8 '短身份证号码(数字、字母x结尾)：'^([0-9]){7,18}(x|X)?$'或： '^d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$9 '帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：'^[a-zA-Z][a-zA-Z0-9_]{4,15}$
10 '密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)：'^[a-zA-Z]w{5,17}$
11 '强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间)：'^(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$  
12 '日期格式：'^d{4}-d{1,2}-d{1,2}
13 '一年的12个月(01～09和1～12)：'^(0?[1-9]|1[0-2])$
14 '一个月的31天(01～09和1～31)：'^((0?[1-9])|((1|2)[0-9])|30|31)$ 
15 '钱的输入格式：''1.有四种钱的表示形式我们可以接受:"10000.00" 和 "10,000.00", 和没有 "分" 的 "10000" 和 "10,000"：'^[1-9][0-9]*$ '2.这表示任意一个不以0开头的数字,但是,这也意味着一个字符"0"不通过,所以我们采用下面的形式：'^(0|[1-9][0-9]*)$ '3.一个0或者一个不以0开头的数字.我们还可以允许开头有一个负号：'^(0|-?[1-9][0-9]*)$ '4.这表示一个0或者一个可能为负的开头不为0的数字.让用户以0开头好了.把负号的也去掉：'^[0-9]+(.[0-9]+)?$ '5.必须说明的是,小数点后面至少应该有1位数,所以"10."是不通过的,但是 "10" 和 "10.2" 是通过的：'^[0-9]+(.[0-9]{2})?$ '6.这样我们规定小数点后面必须有两位,如果你认为太苛刻了,可以这样：'^[0-9]+(.[0-9]{1,2})?$ '7.这样就允许用户只写一位小数.下面我们该考虑数字中的逗号了,我们可以这样：'^[0-9]{1,3}(,[0-9]{3})*(.[0-9]{1,2})?$ '8.1到3个数字,后面跟着任意个 逗号+3个数字,逗号成为可选,而不是必须：'^([0-9]+|[0-9]{1,3}(,[0-9]{3})*)(.[0-9]{1,2})?$ 
16 'xml文件：'^([a-zA-Z]+-?)+[a-zA-Z0-9]+\.[x|X][m|M][l|L]$
17 '中文字符的正则表达式：'[u4e00-u9fa5]
18 '双字节字符：'[^x00-xff]    (包括汉字在内，可以用来计算字符串的长度(一个双字节字符长度计2，ASCII字符计1))
19 '空白行的正则表达式：'ns*r    (可以用来删除空白行)
20 'HTML标记的正则表达式：'<(S*?)[^>]*>.*?</1>|<.*? />
22 '首尾空白字符的正则表达式：'^s*|s*$或(^s*)|(s*$)
23 '腾讯QQ号：'[1-9][0-9]{4,}    (腾讯QQ号从10000开始)
24 '中国邮政编码：'[1-9]d{5}(?!d)    (中国邮政编码为6位数字)
25 'IP地址：'d+.d+.d+.d+    (提取IP地址时有用)
26 '不能为空：'/S/
27 '匹配空行：'^(s*)n

3. 这个是判断是否为金额的指令，可以控制是否为整数或者小数点

在HTML中使用

<el-input type="text"  v-model="xx" v-input-limit='0'></el-input>//整数
<el-input type="text"  v-model="xx" v-input-limit='1'></el-input>//一位小数
<el-input type="text"  v-model="xx" v-input-limit='2'></el-input>//两位小数

在JS里定义

Vue.directive("input-limit", {bind(el, binding) {var wins_0 = /[^d]/g //整数判断var wins_1 = /[^d^.]/g //小数判断var flag = true;var points = 0;var lengths = 0var remainder = 0var no_int = 0const target = el instanceof HTMLInputElement ? el : el.querySelector("input");target.addEventListener("compositionstart", e => {flag = false;});target.addEventListener("compositionend", e => {flag = true;});target.addEventListener("input", e => {setTimeout(function() {if (flag) {if (binding.value == 0) {if (st(e.target.value)) {e.target.value = e.place(wins_0, "");e.target.dispatchEvent(new Event("input")) //手动更新v-model值}}if (binding.value == 1) {if (st(e.String().replace(/d+.(d*)/, '$1'))) {remainder = true}if ((e.target.value.split('.')).length - 1 > 1) {points = true}if (e.String().split(".")[1] != undefined) {if (e.String().split(".")[1].length > 1) {lengths = true}}if (e.String().indexOf(".") != -1) {no_int = false} else {no_int = true}if (st(e.target.value) || lengths || points || remainder) {if (!no_int) {e.target.value = e.place(wins_1, "").replace('.', '$#$').replace(/./g, '').replace('$#$', '.').replace(/^(-)*(d+).(dd).*$/, '$1$2.$3').substring(0, e.target.value.indexOf(".") + 2)} else {e.target.value = e.place(wins_0, "")}e.target.dispatchEvent(new Event("input"))}}if (binding.value == 2) {if (st(e.String().replace(/d+.(d*)/, '$1'))) {remainder = true}if ((e.target.value.split('.')).length - 1 > 1) {points = true}if (e.String().split(".")[1] != undefined) {if (e.String().split(".")[1].length > 2) {lengths = true}}if (e.String().indexOf(".") != -1) {no_int = false} else {no_int = true}if (st(e.target.value) || lengths || points || remainder) {if (!no_int) {e.target.value = e.place(wins_1, "").replace('.', '$#$').replace(/./g, '').replace('$#$', '.').replace(/^(-)*(d+).(dd).*$/, '$1$2.$3').substring(0, e.target.value.indexOf(".") + 3)} else {e.target.value = e.place(wins_0, "")}e.target.dispatchEvent(new Event("input"))}}}}, 0)})}
})