JavaScript中使用正则表达式验证input文本框只能输大于0的整数(代码详解)

HTML代码:

JavaScript代码:

function onlyNumber(o){
			
	if(o.value.length==1){
				
		o.value=o.value.replace(/[^1-9]/g,'')
				
	} else {
				
		o.value=o.value.replace(/\D/g,'')
			
	}
}

1.监听事件:

onkeyup:当监听到按键抬起时执行的方法。

onafterpaste:当监听到粘贴行为执行的方法。

(注意这里指的粘贴行为不是 Ctrl+v,而是鼠标右键点击粘贴,如果不写onafterpaste,只监听键盘行为,Ctrl+v的粘贴行为onkeyup依旧可以起效执行方法,但是鼠标右键粘贴行为依旧能把非数字输入进文本框,因为鼠标行为未触发键盘事件)

2.监听后执行的方法

onlyNumber(o)方法:

if(o.value.length==1):主要是判断用户第一个不能输0,比如001,键盘一个一个输不行,但是ctrl+v依旧可以输进去。鼠标右键粘贴也可以。不过这个bug不影响JavaScript计算,意思是 即使  001 * 5(也)= 5。

replace主要是替换掉正则表达式匹配成功的字符 为 “”空串,也就是把字符串中非数字的字符剔除

正则表达式解释:[^1-9] :表示非1到9的数字,没有从0开始就是为了拒绝用户第一个输0。

                             \D :表示非数字的字符。

                              g  :全局模式,也就是当正则表达式匹配到 匹配的字符后  继续往后匹配。(global)

ps:淘宝和京东也有这个bug

 

 不过他001也能计算,还提交成功

JavaScript中使用正则表达式验证input文本框只能输大于0的整数(代码详解)_第1张图片

JavaScript中使用正则表达式验证input文本框只能输大于0的整数(代码详解)_第2张图片

 对比京东 京东可以一个一个输 0 0 1  输的慢会检测到然后置1,输快了就能输入进001,结果当然是失败,显示数量0

但是京东 输入开头只有一个0的 比如011 也可以添加进11件商品(淘宝也可以)

JavaScript中使用正则表达式验证input文本框只能输大于0的整数(代码详解)_第3张图片

JavaScript中使用正则表达式验证input文本框只能输大于0的整数(代码详解)_第4张图片

 不比了,以后万一还要去狗东面试就尴尬了。想不到平时购物的过程饱含了程序员们如此多的心血。算是无微不至了。

 

你可能感兴趣的:(JavaScript)