- 基本字符匹配
- 匹配单个字符:
- 正则表达式中的普通字符(如字母、数字、符号)本身就用于匹配输入框中相同的字符。例如,
a
会匹配输入框中的字符a
。
- 如果要匹配一个数字,比如
3
,那么输入框中出现3
时就会匹配成功。
- 匹配字符集合:
- 使用方括号
[]
可以定义一个字符集合,输入框中的内容只要是这个集合中的任意一个字符就能匹配。例如,[abc]
可以匹配输入框中的a
、b
或者c
。
- 如果要匹配数字集合,如
[0 - 9]
,则输入框中出现 0 到 9 之间的任何一个数字都会匹配成功,这在限制输入框只能输入数字时很有用。
- 匹配范围:
- 除了单个列举字符,还可以使用连字符
-
在方括号内表示范围。例如,[a - z]
匹配所有小写字母,[A - Z]
匹配所有大写字母。
- 对于数字和字母的组合范围,如
[a - zA - Z0 - 9]
可以匹配输入框中的任何字母(大小写)和数字。
- 数量限定符
- 匹配零个或一个字符:
- 使用
?
符号来表示前面的字符(或字符组)可以出现零次或一次。例如,colou?r
可以匹配color
和colour
。在输入框内容规范中,如果一个单词的某种拼写可有可无某个字母,就可以用这种方式。
- 匹配零个或多个字符:
*
符号表示前面的字符(或字符组)可以出现零次或多次。例如,ab*c
可以匹配ac
(b
出现零次)、abc
(b
出现一次)、abbc
(b
出现两次)等。在输入框中,如果某个部分是可选的且可以重复出现,就可以使用*
。
- 匹配一个或多个字符:
+
符号表示前面的字符(或字符组)必须出现一次或多次。例如,a + b
可以匹配ab
、aab
、aaab
等,但不能匹配b
(因为a
必须至少出现一次)。在输入框规范中,当某个部分是必填且可以重复时,+
很有用。
- 位置限定符
- 行首匹配:
^
符号用于匹配行首。如果在输入框内容规范中要求输入内容必须以某个字符或字符组开头,就可以使用^
。例如,^abc
表示输入框中的内容必须以abc
开头才能匹配。
- 行尾匹配:
$
符号用于匹配行尾。例如,xyz$
表示输入框中的内容必须以xyz
结尾才能匹配。这在限制输入框内容的结尾部分时很有用,比如要求输入的文件名必须以特定扩展名结尾。
- 复杂模式匹配
- 分组匹配:
- 使用括号
()
可以对字符进行分组,方便对一组字符应用数量限定符等操作。例如,(abc)+
表示abc
这个字符组必须出现一次或多次。在输入框中,如果有一个固定的字符序列需要重复出现,就可以使用分组。
- 或匹配:
- 使用
|
符号可以实现 “或” 的匹配。例如,abc|def
可以匹配输入框中的abc
或者def
。这在允许输入框输入多种格式内容时很有用,比如可以输入电话号码格式xxx - xxx - xxxx
或者xxx.xxx.xxxx
。
- 特殊字符匹配
- 匹配空白字符:
\s
用于匹配空白字符,包括空格、制表符、换行符等。如果要限制输入框中不能有连续的空白字符,可以使用\s\s
来匹配两个连续的空白字符,然后进行相应的禁止操作。
- 匹配非空白字符:
\S
用于匹配非空白字符,与\s
相反。例如,\S+
可以匹配一个或多个非空白字符,这在要求输入框不能输入空内容(除了空白字符)时很有用。
- 匹配数字字符:
\d
用于匹配数字字符,等价于[0 - 9]
。例如,\d{3}
可以匹配三个数字,这在限制输入框输入邮编、验证码等内容时很有用。
\D
用于匹配非数字字符,是\d
的反义。
- 电子邮件地址匹配(示例)
- 一个简单的电子邮件地址匹配正则表达式可以是
^[a - zA - Z0 - 9_.+-]+@[a - zA - Z0 - 9 -]+\.[a - zA - Z0 - 9-.]+$
。
- 解释:
^
表示匹配邮件地址的开头。
[a - zA - Z0 - 9_.+-]+
匹配用户名部分,允许字母、数字、点、下划线、加号和减号出现一次或多次。
@
匹配 “@” 符号。
[a - zA - Z0 - 9 -]+
匹配域名部分,允许字母、数字和减号出现一次或多次。
\.[a - zA - Z0 - 9-.]+
匹配域名后缀部分,点号需要转义(用\
),允许字母、数字、点和减号出现一次或多次。
$
表示匹配邮件地址的结尾。
- 手机号码匹配(示例)
- 在中国,手机号码一般是 11 位数字,并且以 1 开头。一个简单的正则表达式可以是
^1[3 - 9]\d{9}$
。
- 解释:
^
表示开头,要求号码以 1 开头。
[3 - 9]
表示第二位数字是 3 到 9 之间的一个数字。
\d{9}
表示后面跟着 9 个数字。
$
表示结尾,确保整个号码是 11 位。
以下列举几个示例
只允许输入正整数
min和max属性分别设置最小值、最大值,输入的值必须为:>=1 && <=100
<input type="number" min="1" max="100"/>
允许输入小数(两位小数)、正数
<input type="text" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" >
允许输入小数(一位小数)、正数
<input type="text" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,1})?).*$/g, '$1')" >
开头不能为0,且不能输入小数
<input type="text" onkeyup="value=value.replace(/[^\d]/g,'').replace(/^0{1,}/g,'')" >
输入大小写字母、数字、下划线:
<input type="text" οnkeyup="this.value=this.value.replace(/[^\w_]/g,'');">
输入小写字母、数字、下划线:
<input type="text" οnkeyup="this.value=this.value.replace(/[^a-z0-9_]/g,'');">
输入数字和点
<input type="text" οnkeyup="value=value.replace(/[^\d.]/g,'')">
输入中文:
<input type="text" οnkeyup="this.value=this.value.replace(/[^\u4e00-\u9fa5]/g,'')">
只能输入数字
<input type="text" maxlength="16" οnkeyup="value=value.replace(/\D/g,'')">
或者
<input type="number" >
只能输入数字,允许输入小数点,且只能输入两位小数(正数、0)
<input oninput="value=value.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1')" >
能输入数字,允许输入小数点和负号,且只能输入两位小数(正数、负数、0)
<input oninput="value=value.replace(/^([0-9-]\d*\.?\d{0,2})?.*$/,'$1')">
输入英文:
<input type="text" οnkeyup="this.value=this.value.replace(/[^a-zA-Z]/g,'')">
输入中文、数字、英文:
<input οnkeyup="value=value.replace(/[^\w\u4E00-\u9FA5]/g, '')">
输入数字和字母:
<input onKeyUp="value=value.replace(/[\W]/g,'')">
除了英文的标点符号以外,其他的都可以中文,英文字母,数字,中文标点
<input type="text" οnkeyup="this.value=this.value.replace(/^[^!@#$%^&*()-=+]/g,'')">