Vue+ElementUI实现:限制输入框只能输入正整数

这里利用正则来规避掉小数点和负数

		
			
				
					
				
			
		

在这里呢使用的就是elementUI的事件了,我们监听一下失去焦点的时候要触发事件,同样的我们要传入进去$event参数
methods中编写函数

			BlurText(e) {
				let boolean = new RegExp("^[1-9][0-9]*$").test(e.target.value);
				if (!boolean) {
					this.$message.warning("请输入正整数");
					e.target.value = "";
				};
			},

这里使用的正则的意思代表的是(会正则的大佬就可以省略啦或者帮小弟看看不足之处):
首先我们先看开头的^和结尾的$这里分别代表匹配字符串的开头以及匹配字符串的结尾,而[1-9]是代表的是匹配1-9其中的数字,所以会过滤掉负数和小数,同时要求开头必须要以1开头,后面的则是匹配以0-9结尾的数字,而*代表的是0次或多次,也就是不限制结尾的数字,合起来的意思就是:我们匹配从1-9中的某个数开头,并且以0-9中的某个数结尾的匹配。最后呢就是做的判断了,如果符合我们所定义的正则就不用提示错误了,如果不符合呢,就会提示错误,同时清空数据

参考资源:https://segmentfault.com/a/1190000016718696?utm_source=tag-newest

你可能感兴趣的:(Vue+ElementUI实现:限制输入框只能输入正整数)