模板 | 匹配的字符串 | 匹配的例子 | 不匹配的例子 |
---|---|---|---|
abc | 含有 "abc" 的字符串 | "abc","abcdef","123abc456" | "abdc","1bca","adbc","ABC" |
[abc] | 含有 "a","b"或"c"的字符串 | "abc","daef","bbb","123c45" | "def","xyz","12345","BBB" |
[a-z] | 字符串包含小写字母 | "abc","12f34","_r_" | "123","ABC","_-_" |
[0-9] 或 \d | 字符串包含数字 | "123","ab4c","a45" | "abc" |
a.c | 字符串包含"a",后跟任意字符,后跟"c" | "abc","acc","12a.c34" | "ac","abbc","ABC" |
a\.c | 字符串包含"a.c" | "a.c","a.cdef","12a.c34" | "ac","abc" |
a.+c | 字符串包含"a",后跟至少一个字符,后跟"c" | "abc","abbc","12a$uc34" | "ac","bbc" |
a.*c | 字符串包含"a",后跟0个或多个字符,后跟"c" | "abc","abbc","ac" | "ABC","bbc" |
观察上面的例子可以得出以下规律:
- 方括号 [] 定义一个字符区间。在此区间中至少抱哈一个字符的字符串将匹配该模式。
- [a-z] 和[A-Z]模式用于搜索任意字母的存在,分别为小写和大写。
- [0-9]和\d 本质上是相同的,它们匹配字符串中的数字。
- . 符号替换任意一个字符。
- \ 反斜杠 表示接下来的字符应该像什么一样搜索。比如,\.用于匹配字符本身
- + 符号匹配前面表达式的一个或多个实例
- * 符号匹配前一个表达式的 0 个 、1个或多个实例。
举例子,匹配邮箱,邮箱需要满足一下要求:
- 以一个或多个字符开头(.+)
- 接下来,包含字符 @(@)
- 接下来,包含一个或多个字符(.+)
- 接下来,包含 . 符号(\.)
- 最后以一个或多个字符结尾(.+)
换句话说,即任何匹配 "xxx@yy.zzz" 格式的字符串。当然,这并不能全面的验证邮箱的格式,这只是一个开始。
代码如下:
<html>
<head>
</head>
<body>
<form>
<label for="email">Email</label>:
<input type="text" name="emailAddress" id="emailAddress" required>
<br>
<label for="emailHelp" id = "emailHelp" > </label>
</form>
</body>
</html>
JS 验证邮箱格式的代码:
// Check email validity when field loses focus
document.getElementById("emailAddress").addEventListener("blur", e => {
// Match a string of the form xxx@yyy.zzz
const emailRegex = /.+@.+\..+/;
let validityMessage = "";
if (!emailRegex.test(e.target.value)) {
validityMessage = "Invalid address";
}
document.getElementById("emailHelp").textContent = validityMessage;
});
输出结果: