<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function checkName(usernameObj){
//等价于 document.getElementById("username");
var username = usernameObj.value;
//alert(username);
//编写一个正则表达式
//var reg = new RegExp();
var reg = /^\w{6，18}$/;
//var reg =/^\w+@\w{2,}.com$/;
var msg = document.getElementById("username_msg");
if(reg.test(username)){
msg.innerHTML = "✅";
}else{
msg.innerHTML = "❌";
}
}
function checkPwd(){
//等价于 document.getElementById("username");
var password = document.getElementById("password").value;
//编写一个正则表达式
//var reg = new RegExp();
var msg = document.getElementById("password_msg");
if(reg.test(password)){
msg.innerHTML = "✅";
}else{
msg.innerHTML = "❌";
}
}
</script>
</head>
<body>
<div align="center">
<form action="" method="post" >
<table border="1">
<tr>
<td>用户名</td>
<!-- this 代表当前输入框-->
<td><input type="text" id="username" name="username" onblur="checkName(this)" />
<span id="username_msg">请输入6-18位的字符串</span>
</td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" id="password" name="password" onblur="checkPwd()" />
<span id="password_msg">请输入6-18位的字符串</span>
</td>
</tr>
<tr>
<td><input type="submit" value="登录" /> </td>
<td><input type="reset" value="重置" /> </td>
</tr>
</table>
</form>
</div>
</body>
</html>
二、正则表达式
提供一个写正则表达式的工具：链接：https://pan.baidu.com/s/1H-pBKaPBCtelHZwixSwXhA 密码：kwt6