登录/注册

1.HTML

2.CSS

3.JS

4.资源

5.运行结果

6.下载链接

7.注意事项

1.HTML

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>注册</title><link rel="stylesheet" href="../css/register.css">
</head>
<body><div class="register"><div class="cont"><ul class="list"><li><span>用户名</span><input type="text" class="userName"><img src="../image/sure.png" alt="必填"></li><li><span>Email</span><input type="email" class="email"><img src="../image/sure.png" alt="必填"></li><li><span>密码</span><input type="password" class="password"><img src="../image/sure.png" alt="必填"></li><li class="qiang"><span>密码强度</span><p><span class="weak">弱</span><span class="medium">中</span><span class="strong">强</span></p></li><li><span>确认密码</span><input type="password" class="passwordTrue"><img src="../image/sure.png" alt="必填"></li><li><span>MSN</span><input type="text" class="msn"></li><li><span>QQ</span><input type="text" class="qq"></li><li><span>办公电话</span><input type="text" class="tel"></li><li><span>家庭电话</span><input type="text" class="phone"></li><li><span>手机</span><input type="text" class="mobile"></li><li class="yan"><span>验证码</span><input type="text"><p class="yanMa">J6EP</p></li><li><span></span><input type="checkbox" class="agree"><p>我已看过并接受《<a href="##">用户协议</a>》</p></li><li><span></span><button class="btn">立即注册</button></li></ul></div></div>
</body>
</html>
<script src="../js/register.js"></script>

2.CSS

*{margin: 0;padding: 0;}
ul,li,ol{list-style-type: none;}
button{cursor: pointer;border: none;background: rgba(255, 255, 255, 1);}
.register{width: 100%;height: 100vh;display: flex;justify-content: center;align-items: center;
}
.cont{width: 320px;height: 450px;background: #fbfbfb;display: flex;flex-direction: column;justify-content: center;align-items: center;
}
.list{width: 270px;
}
.list li{width: 100%;height: 20px;display: flex;align-items: center;margin-bottom: 10px;font-size: 12px;
}
.list li span{width: 60px;height: 100%;line-height: 20px;text-align: right;margin-right: 10px;
}
.list li input{/* width: 180px; */height: 100%;border: 1px #ccc solid;
}
.list li img{width: 10px;height: 10px;margin-left: 10px;
}
.list li p{margin-left: 10px;
}
.list .qiang p{width: 120px;display: flex;align-items: center;justify-content: space-around;
}
.list .yan input{width: 80px;
}
.list .yan p{width: 80px;height: 100%;line-height: 20px;text-align: center;border: 1px #ccc solid;background: url(../image/yan.png) no-repeat 0 0/100% 100%;color: #fff;
}
.btn{width: 100px;height: 40px;background: #4da4d2;color: #fff;margin-top: 10px;border-radius: 5px;
}
.yanMa{cursor: pointer;
}

3.JS

let btn = document.querySelector('.btn');let userName = document.querySelector('.userName');let email = document.querySelector('.email');let password = document.querySelector('.password');let passwordTrue = document.querySelector('.passwordTrue');let msn = document.querySelector('.msn');let qq = document.querySelector('.qq');let tel = document.querySelector('.tel');let phone = document.querySelector('.phone');let mobile = document.querySelector('.mobile');let yan = document.querySelector('.yan input');let yanMa = document.querySelector('.yanMa');let agree = document.querySelector('.agree');let weak = document.querySelector('.weak');let medium = document.querySelector('.medium');let strong = document.querySelector('.strong');// 密码强度function checkPasswordStrength(password) {if(password.length<5){alert('最少输入6位密码');}else if(password.length>25){alert('最多输入26位密码');}else{let code=0;const hasNumber = /\d/;  // 包含数字const hasLetter = /[a-zA-Z]/;  // 包含字母const hasSymbol = /[!@#$%^&*(),.?":{}|<>]/;  // 包含特殊字符if (hasNumber.test(password)) code++;if (hasLetter.test(password)) code++;if (hasSymbol.test(password)) code++;// 检查密码强度if (code==1) {weak.style.color='#f00';medium.style.color = '#000';strong.style.color = '#000';} else if (code==2) {weak.style.color='#000';medium.style.color = '#f00';strong.style.color = '#000';} else if (code==3) {weak.style.color='#000';medium.style.color = '#000';strong.style.color = '#f00';} else {weak.style.color='#000';medium.style.color = '#000';strong.style.color = '#000';}}};// 失焦判断密码强度password.onblur=function(){checkPasswordStrength(password.value);  }// 验证码function yanZheng(){// 包含所有可能的字符const characters = '0123456789abcdefghijklmnopqrstuvwxyz';// 生成四位验证码let verificationCode = '';for (let i = 0; i < 4; i++) {const randomIndex = Math.floor(Math.random() * characters.length);verificationCode += characters.charAt(randomIndex);}yanMa.innerHTML=verificationCode.toUpperCase();};yanZheng();// 点击验证码刷新验证码yanMa.onclick=function(){yanZheng();   };// 点击注册按钮btn.onclick=function(){let yanEmail = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;let yanTel = /^1[3-9]\d{9}$/;let dataObj={userName:userName.value,email:email.value,password:password.value,msn:msn.value,qq:qq.value,tel:tel.value,phone:phone.value,mobile:mobile.value,};yan.value=yan.value.toUpperCase();if(userName.value==''){alert('请输入用户名');}else if(email.value==''){alert('请输入Email');}else if(!yanEmail.test(email.value)){alert('请输入正确的Email');}else if(password.value==''){alert('请输入密码');}else if(passwordTrue.value==''){alert('请确认密码');}else if(password.value!=passwordTrue.value){alert('两次密码输入不一致，请重新输入。')}else if(yan.value==''||yan.value!=yanMa.innerHTML){console.log(yan.value,yanMa.innerHTML);if(confirm('验证码输入不正确，请重新输入')){yanZheng();}else{yanZheng();}}else if(!agree.checked){if(confirm('请同意用户协议')){agree.checked=!agree.checked;}else{}}else{fetch('http://localhost:8080/api/register',{method: 'POST',headers: {'Content-Type': 'application/json', // 设置请求头的 Content-Type},body: JSON.stringify(dataObj)}).then(response => response.json()).then(data => {console.log(data);if(data.code==200){alert('注册成功');}}).catch(error => {console.error('Error:', error);});}};