失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > h5 input标签使用正则表达式限制输入

h5 input标签使用正则表达式限制输入

时间:2019-12-06 16:31:34

相关推荐

h5 input标签使用正则表达式限制输入

本人小白,目前正在做一个web系统,今天遇到一个需求是患者姓名录入的时候只能是字母和汉字。本人分析了一下,首先,这个不能在js里写,不能等到客户填写完毕之后再提醒,因为除了患者姓名之外,还需要限制患者民族,职业等等,所以只能在input标签里限制输入,此时正则表达式比较好用。

由于本人之前没有使用过正则表达式,所以到网上找实例,但是却误入陷坑,折腾了一个多小时,终于搞定,在此为码友写一下正确的写法。

首先,汉字的正则表达式为:[\u4e00-u9fa5],小写字母的正则表达式为:[a-z] ,大写字母的正则表达式为:[A-Z] ,于是,要限制input标签只能输入字母和数字,正确的写法应该为:

<input type="text" οnkeyup="this.value=this.value.replace(/[^a-zA-Z\u4e00-\u9fa5]/g,'')" maxlength="20"onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^a-zA-Z\u4e00-\u9fa5]/g,''))" >

但是,我查到网上几乎所有的写法全都为:

<input type="text" οnkeyup="this.value=this.value.replace(/[a-zA-Z\u4e00-\u9fa5]/g,'')"

maxlength="20"

onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[a-zA-Z\u4e00-\u9fa5]/g,''))">

不知道大家有没有看出区别,下面的代码比上面的代码在正则表达式上少了一个“^”,本人特别奇怪,为什么网上所有的教程都是这样的错误,如果是按照下面的写法,当用户每次输入字母或者汉字都会被replace成空,这个与需求恰恰相反。

“^”在“[]”里面写就是“非”,写在“[]”外面就是开始。

onkeyup事件会在键盘按键被松开时发生,因此上面那句话就会实现每当输入字母或者汉字就会保存下来,当输入别的字符就会被删除(被替换成空字符)。

ps:如果是需要校验身份证,那么就不能用onkeyup事件了,我比较习惯用onblur事件,当失去焦点的时候使用正则表达式判断一下身份证号是否符合规则。

本人小白,如果有问题欢迎大家在下方评论,并且欢迎大家为我提出意见,不胜感激。

如果觉得《h5 input标签使用正则表达式限制输入》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。