<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
font-family: "Microsoft YaHei", serif;
}
body, dl, dd, p, h1, h2, h3, h4, h5, h6 {
margin: 0;
}
ol, ul, li {
margin: 0;
padding: 0;
list-style: none;
}
img {
border: none
}
#wrap{
position: relative;
width: 420px;
height: 540px;
background-color: rgb(0,204,255);
margin: 50px auto;
}
#wrap h1{
width: 100%;
height: 40px;
background-color: rgb(0,153,204);
font-size: 20px;
line-height: 40px;
text-align: center;
color: #fff;
}
#wrap ul li{
overflow: hidden;
position: relative;
width: 300px;
height: 42px;
margin: 25px auto;
transform: translateX(14px);
transition: height .2s;
z-index: 111;
}
#wrap ul li input{
width: 270px;
height: 40px;
border: 1px solid #999;
text-indent: 1em;
outline: none;
}
#wrap ul li p{
font-size: 12px;
color: red;
}
#wrap ul li i{
display: none;
position: absolute;
right: 3px;
top: 12px;
width: 22px;
height: 22px;
border-radius: 50%;
background-color: rgb(75,186,104);
line-height: 22px;
text-align: center;
color: #fff;
font-size: 12px;
font-weight: bolder;
box-shadow: 1px 1px 3px #000;
}
#wrap ul li.wrong input{
border-color: red;
}
#wrap ul li.wrong{
height: 60px;
}
#wrap ul li.right input{
border-color: green;
}
#wrap ul li.right i{
display: block;
}
#wrap ul li.right{
height: 42px;
}
#submit{
display: block;
width: 270px;
height: 40px;
margin: 0 auto;
border: none;
outline: none;
background-color: rgb(0,153,204);
color: #fff;
}
#tip{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 130px;
height: 35px;
line-height: 35px;
text-align: center;
color: #fff;
background-color: #000;
font-size: 12px;
font-weight: bolder;
transform: translateY(-100px);
opacity: 0;
}
#tip.show{
z-index: 2222;
transform: translateY(-30px);
opacity: 1;
transition: transform .2s,opacity .2s;
}
</style>
</head>
<body>
<div id="wrap">
<h1>注册</h1>
<form action="">
<ul>
<li>
<input type="text" name="user" placeholder="用户名">
<p>错误:用户名格式不正确</p>
<i>√</i>
</li>
<li>
<input type="password" name="pwd" placeholder="密码">
<p>错误:密码输入格式不正确</p>
<i>√</i>
</li>
<li>
<input type="password" name="pwd2" placeholder="2次密码">
<p>错误:两次密码输入不一致</p>
<i>√</i>
</li>
<li>
<input type="text" name="tel" placeholder="电话号码">
<p>错误:电话号码输入不正确</p>
<i>√</i>
</li>
<li>
<input type="text" name="qq" placeholder="QQ号">
<p>错误:qq号码输入不正确</p>
<i>√</i>
</li>
<li>
<input type="text" name="email" placeholder="email">
<p>错误:邮箱输入不正确</p>
<i>√</i>
</li>
</ul>
<input type="submit" id="submit">
</form>
<p id="tip">请先输入密码</p>
</div>
<script>
(function () {
let Reg = {
qq : /^[1-9]\d{4,6}$/,
tel : /^1[3-9]\d{9}$/,
user : /^[a-z_]\w{5,11}$/, //6-12位 不是数字开头
//常用密码正则,最少6位,包括至少1个小写字母,1个数字
pwd : /^.*(?=.{6,})(?=.*\d)(?=.*[a-z])|(?=.*[A-Z]).*$/,
email : /^\w+@[\da-z]{2,}(\.[a-z]{2,}){1,2}$/
// 最后那可能有.com.cn 也有可能.com所以写了个重复
};
let aInput = document.querySelectorAll("#wrap ul li input");
let aLi = document.querySelectorAll("#wrap ul li");
let oTip = document.getElementById("tip");
aInput.forEach((ele,i)=> {
// 重复密码不需要正则验证
if (i===2)return;
ele.addEventListener("blur", f);
function f() {
let val = this.value;
let r = Reg[this.name];
if (!val){
aLi[i].className = "";
return;
}
if (r.test(val)){
// 检测通过
aLi[i].className = "right";
}else{
// 检测不通过
aLi[i].className = "wrong";
this.focus()
}
}
});
aInput[2].addEventListener("focus",fn);
function fn() {
let pwdVal = aInput[1].value;
if (!pwdVal){
oTip.className = "show";
setTimeout(function () {
oTip.className = "";
},1000);
aInput[1].focus()
}
}
aInput[2].addEventListener("blur",fn1);
function fn1() {
let pwdVal = aInput[1].value;
let pwd2Val = aInput[2].value;
if (pwdVal==="")return;
if (pwdVal===pwd2Val){
aLi[2].className = "right";
}else {
aLi[2].className = "wrong";
aInput[1].focus();
}
}
})();
</script>
</body>
</html>
Python3Turtle