HTML input标签输入内容正则表达式控制要点

正则表达式的应用介绍

关于什么是正则表达式，可以参考（https://www.runoob.com/js/js-regexp.html）了解，关于正则表达式更具体的方法介绍，可以参考（https://www.cnblogs.com/mmzuo-798/p/7264093.html）了解。

正则表达式，最常用的方式，是和replace()方式配合，用于对HTML input标签，也即输入标签，做输入内容的限制，设定用户只能输入特定内容的信息（如只有字符，只有数字，只有整数，只有浮点，只有特定的组合等等）。

正则表达式范例

如下是我列写的只能输入正整数的范例（小数点不能输入）：

 <input type="text" oninput="this.value=this.value.replace(/\D|^[0]/g,'')" onafterpaste = "this.value=this.value.replace(/\D|^[0]/g,'')" >

如下是是我列写的只能输入0和正整数的范例（小数点不能输入）：

<input type="text" oninput="this.value=this.value.replace(/\D|^[0][^\b]/g,'')" onafterpaste = "this.value=this.value.replace(/\D|^[0][^\b]/g,'')">

正则表达式应用注意事项

基于实际经验，有如下注意事项应在开发中留意：

input标签可以设置type = “text”, 也可以设置为type = “number”，但需要了解，number方式只是控制只能从键盘通过负号，小数点和数字按键输入，但本质还是输入的字符，js程序做处理时，仍然要做从字符到数字的转换，而text方式输入更广泛的字符。实际应用中发现，如果采用number方式，那么输入的第一个小数点，正则表达式无法识别正确处理，而采用text方式，可以识别和处理。如采用以下代码，则可以输入 “1.”

 <input type="number" oninput="this.value=this.value.replace(/\D|^[0]/g,'')" onafterpaste = "this.value=this.value.replace(/\D|^[0]/g,'')" >

将"number"改为"text"，则".“被正则表达式显示，是无法输入的，有效实现了只有整数数字输入（0~9）的限制，不用在js处理时还要单独识别和去掉”."的存在。

一些介绍正则表达式的触发采用 onchange，实际上，onchange 在input标签失去焦点时触发，也即所有输入完毕后检查，不能实时的限制输入内容，应采用oninput或onkeyup方式，在每个字符输入时，都进行基于正则表达式的识别处理。oninput和onkeyup的区别是，采用oninput方式，键盘按键按下就进行触发，看不到输入的被限制字符，处理比较快，采用onkeyup方式，键盘按键按下松开后才触发，可以看到输入的被限制字符以及被设定的删除规则处理掉的过程。onkeyup有一个隐藏的缺点，也就是用户可以按下一个按键后长时间不释放，等到释放时，则是有效输入了一长串相同字符，如果正则表达式没有针对这种情况做应对，则产生没有限制到的输入出现。而oninput则可以有效预防这种情况，长按一个按键，产生第一个输入字符就会触发检查。因此oninput是最适合和正则表达式配合做输入限制的方式。譬如，对只能输入0和正整数的范例，再增加只能输入4个数字的限制，则代码为：

<input type="text" oninput="this.value=this.value.replace(/\D|^[0][^\b]|^\d\d\d\d\d/g,'')" onafterpaste = "this.value=this.value.replace(/\D|^[0][^\b]/g,'')">

上述代码，输入进第5个数字就会被清除，实现只能输入4个数字的限制。如果采用onkeyup方式，并长按一个数字键后释放，则之后最后5个字符被清除，仍然留下了一段输入数字。

经过正确的设计正则表达式，可以在input标签及其它各种输入类处理时，对输入内容进行指定/限制，给用户更加直观地输入正确性引导，减少js处理程序的代码量。

-End-