一. 正则表达式
定义:
var reg = 正则表达式;
var reg = new RegExp("正则表达式");
语法:
^: 表示开始
$: 表示结束
[ ]: 代表某个范围内的单个字符
. : 代表任意单个字符, 除了换行和行结束符
\w: 代表单词字符,数字,下划线
\d: 代表数字字符
量词:
+: 至少一个
*: 零个或多个
?: 零个或一个
{x}: x个
{m, }: 至少m个
{m,n}: 至少m个,最多n个
方法
test(str): 判断指定字符串是否符合规则, 返回true或false
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>正则表达式</title>
</head>
<body>
<form action="#" method="get">
<tr>
<td>用户名:</td>
<td>
<input type="test" name="username" id="username">
<br>
<span id="username_err" style="display: none">用户名不符合规则</span>
</td>
<br>
<td>密码:</td>
<td>
<input type="test" name="password" id="password">
</td>
</tr>
</form>
<script>
var usernameInput = document.getElementById("username");
usernameInput.onblur = function() {
var flag1 = /^\w{6,12}$/;
var username = usernameInput.value.trim();
if(flag1.test(username)){
document.getElementById("username_err").style.display = "none";
}else{
document.getElementById("username_err").style.display = "";
}
}
var passwordInput = document.getElementById("password");
</script>
</body>
</html>
效果展示