几种文本限制输入和常用的正则验证

最新推荐文章于 2022-11-04 23:38:26 发布

Iamagril

最新推荐文章于 2022-11-04 23:38:26 发布

阅读量926

点赞数

CC 4.0 BY-SA版权

文章标签：正则表达式 input 电话手机

本文链接：https://blog.youkuaiyun.com/Iamagril/article/details/7804623

本文详细介绍了文本输入限制与正则表达式的应用，包括数字、汉字、字母等不同类型输入的验证方法，以及电话号码、邮箱、邮编等特定格式数据的正则表达式验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS 验证是我们最常见的验证，以下是我自己项目中遇到的相关验证，做了总结，如下：

一、限制文本框输入

1、文本框中只能输入数字和小数点

　onkeyup="value=value.replace(/[^\d\.]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"

如：要输入一个商品的价格
<input type="text" name="price" onkeyup="value=value.replace(/[^\d\.]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))" />
　
2、文本框中只能输入数字

　　onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"　
　　　
3、文本框中只能输入汉字

onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))"

4、文本框只能输入大写字母与数字

onkeypress='return /^[0-9a-zA-Z]{0,4}$/.test(this.value)' onkeyup="value=value.replace(/[^\w\.\/]/ig,'')" style="text-transform: uppercase"

以上用法都一样，放到要约束的 input 中或 JS 中。

二、 js与正则判断

1、电话号码正则表达式（支持手机号码，3-4位区号，7-8位直播号码，1－4位分机号）

((\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)

2、邮箱验证

^[1-9][0-9]{5}$

3、邮编验证

^[1-9][0-9]{5}$

4、电子邮箱验证

^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$

5、身份证的验证

^(^\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$

//例子