<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
td>span{
color: red;
}
.ok{
background: url('./images/ok.png') no-repeat center;
width: 20px;
height: 30px;
display: none;
}
.err{
background: url('./images/err.png') no-repeat center left;
padding-left: 20px;
border: 1px solid red;
background-color: lightgray;
padding: 3px;
padding-left: 20px;
border-radius: 3px;
display: none;
}
</style>
</head>
<body>
<h2>增加管理员</h2>
<!-- table>(tbody>tr*2>td*3)+(tfoot>tr>td*3) -->
<table>
<tbody>
<tr>
<td>姓名:</td>
<td>
<input type="text">
</td>
<td><span>*</span></td>
<td>
<div class="ok uname"></div>
<div class="err uname">10个字符以内的字母/数字或下划线的组合</div>
</td>
</tr>
<tr>
<td>密码:</td>
<td>
<input type="password">
</td>
<td><span>*</span></td>
<td>
<div class="ok pwd"></div>
<div class="err pwd">必须为6个数字</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td colspan="2">
<button type="submit">保存</button>
<button type="reset">重填</button>
</td>
</tr>
</tfoot>
</table>
<script>
//1.为用户名输入框添加blur事件的监听:失去焦点
//属性名选择器:代表选择属性名type='text'的元素
let input_name=document.querySelector("[type='text']");
console.log(input_name);
input_name.onblur=function(){
console.log("用户名输入框失去焦点");
let reg_name=/^\w{1,10}$/;
//查找ok和err
//.ok.uname:代表class="ok uname"同时又两种样式
let div_ok=document.querySelector(".ok.uname")
let div_err=document.querySelector(".err.uname")
//2.检查用户名是否符合要求:字母数字下划线 最多十个
if(reg_name.test(this.value)){
console.log(this.value,"符合要求");
div_ok.style.display="block";//显示正确
div_err.style.display="none";//不显示错误
}else{
console.log(this.value,"不符合要求");
div_ok.style.display="none";//不显示正确
div_err.style.display="block";//显示错误
}
}
let input_pwd=document.querySelector("[type='password']");
console.log(input_pwd);
input_pwd.onblur=function(){
console.log("失去焦点");
let reg_pwd=/^\d{6}$/;
//查找ok pwd
let div_ok=document.querySelector(".ok.pwd")
let div_err=document.querySelector(".err.pwd")
if(reg_pwd.test(this.value)){
div_ok.style.display="block";
div_err.style.display="none";
}else{
div_err.style.display="block";
div_ok.style.display="none";
}
}
</script>
</body>
</html>