效果图:
给老子抄!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册</title>
<style>
body {
background-color: #f0f2f5;
font-family: Arial, sans-serif;
}
form {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin: 50px auto;
max-width: 500px;
padding: 30px;
}
h1 {
color: #1877f2;
font-size: 28px;
font-weight: 600;
margin-bottom: 20px;
text-align: center;
}
input[type="text"], input[type="email"], input[type="password"] {
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
font-size: 16px;
margin-bottom: 20px;
padding: 10px;
width: 100%;
}
input[type="submit"] {
background-color: #1877f2;
border: none;
border-radius: 4px;
color: #fff;
cursor: pointer;
font-size: 16px;
font-weight: 600;
margin-top: 20px;
padding: 10px;
width: 100%;
}
input[type="submit"]:hover {
background-color: #166fe5;
}
p {
color: #999;
font-size: 14px;
margin-top: 20px;
text-align: center;
}
</style>
</head>
<body>
<h2>注册页面</h2>
<form role="form" action="/login" method="post">
请输入用户名:<input type="text" name="name" id="name"><br>
仅限qq邮箱:<input type="text" placeholder="请输入你的邮箱地址" size="17" id="email" onblur="judgeemail()"><br>
验证码:<input type="text" id="verify" onblur="judgeverify" ><button id="myButton" onclick="disableButton(this)">发验证码</button>
<span id="countdown"></span><br>
请输入密码:<input type="password" name="password" id="password"><br>
确认密码:<input type="password" title="确认密码" size="12" id="againpass" onblur="judgeagain()"><br>
<input type="submit" name="sign" value="提交">
</form>
<script languuage="Javascript">
<!--判断用户名-->
function judgename(){
var name=document.getElementById("name");
var nameerror=document.getElementById("nameerror");
var pattern=/^[A-Za-z0-9]{6,10}$/;
if(!pattern.test(name.value)){
nameerror.innerHTML="用户格式不正确!";
}else{
nameerror.innerHTML="";
usernameok=true;
}
}
<!--判断密码-->
function judgeagain(){
var againpass=document.getElementById("againpass");
var againerror=document.getElementById("againerror");
var psd=document.getElementById("psd");
//var pattern=/^(?=.*[A-Za-z])(?=.*\d)(?=.*[!@#$%^&]).{6,10}$/;
if(psd.value!=againpass.value){
againerror.innerHTML="两次密码不一致!";
}else{
againerror.innerHTML="";
againok=true;
}
}
<!-- 判断邮箱-->
function judgeemail(){
var email=document.getElementById("email");
var emailerror=document.getElementById("emailerror");
var pattern=/^(?=.*[@]).+$/;
if(!pattern.test(email.value)){
emailerror.innerHTML="邮箱格式不正确!";
}else{
emailerror.innerHTML="";
emailok=true;
}
}
<!--判断验证码-->
function judgeverify(){
}
<!--1分钟后关闭按钮-->
function disableButton(button) {
button.disabled = true; // 禁用按钮
var countdownElement = document.getElementById("countdown");
var countdown = 60; // 设置倒计时时间为60秒
// 更新倒计时显示,并每秒更新一次
countdownElement.innerText = countdown;
var countdownInterval = setInterval(function() {
countdown--;
countdownElement.innerText = countdown;
// 当倒计时结束时,启用按钮并清除倒计时定时器
if (countdown <= 0) {
button.disabled = false;
clearInterval(countdownInterval);
countdownElement.innerText = "";
}
}, 1000);
}
</script>
</body>
</html>