前文叙述
很久以前做的一个 demo ,纯 HTML 、CSS、js 制作,一定时间段之后才可以重新发送验证码,如 60s
后再次发送验证码,在该时间段内发送验证码按钮为禁用状态,实战开发过程也亦是同理,因此记录一手。
一、效果图:
二、实现代码:
bash
<!DOCTYPE html>
<html>
<head>
<title>登录表单</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
border-
}
.container {
max-width: 400px;
min-width: 400px;
margin: auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
margin-bottom: 30px;
}
.form-group {
margin-bottom: 20px;
}
.form-group-inline {
display: flex;
align-items: center;
}
label {
display: block;
font-weight: bold;
margin-bottom: 5px;
flex: 0 0 100px;
}
input[type="text"],
input[type="password"] {
flex: 1;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
}
input[type="text"]:fous{
border-color: #ebecff;
}
.btn {
display: inline-block;
padding: 10px 20px;
background-color: #4caf50;
color: #fff;
text-align: center;
text-decoration: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
#code {
width: 100px;
margin-right: 30px;
}
.btn:hover {
background-color: #45a049;
}
.btn-disabled {
background-color: #ccc;
cursor: not-allowed;
}
</style>
</head>
<body>
<div class="container">
<h2>登录</h2>
<div class="form-group form-group-inline">
<label for="phone">手机号码:</label>
<input type="text" id="phone" placeholder="请输入手机号码">
</div>
<div class="form-group form-group-inline">
<label for="code">验证码:</label>
<input type="text" id="code" placeholder="请输入验证码">
<button id="sendCode" class="btn">发送验证码</button>
</div>
<button id="loginBtn" class="btn">登录</button>
</div>
<script>
// 获取DOM元素
const phoneInput = document.getElementById('phone');
const codeInput = document.getElementById('code');
const sendCodeBtn = document.getElementById('sendCode');
const loginBtn = document.getElementById('loginBtn');
let timer;
let countdown = 60;
function validatePhoneNumber(phoneNumber) {
// 使用正则表达式进行手机号码校验
let regex = /^1[0-9]{10}$/;
return regex.test(phoneNumber);
}
function validateVerificationCode(code) {
// 使用正则表达式进行六位数验证码校验
let regex = /^\d{6}$/;
return regex.test(code);
}
// 发送验证码按钮点击事件
sendCodeBtn.addEventListener('click', () => {
if (!phoneInput.value) {
alert('请输入手机号码');
return;
}
if (!this.validatePhoneNumber(phoneInput.value)) {
alert("请输入合法手机号");
return;
}
// 禁用发送验证码按钮
sendCodeBtn.disabled = true;
sendCodeBtn.classList.add('btn-disabled');
// 开始倒计时
countdown = 10;
sendCodeBtn.innerText = `${countdown}s`;
sendCodeBtn.style.display = 'block';
timer = setInterval(() => {
countdown--;
if (countdown === 0) {
// 倒计时结束,恢复发送验证码按钮状态
clearInterval(timer);
sendCodeBtn.disabled = false;
sendCodeBtn.classList.remove('btn-disabled');
sendCodeBtn.innerText = "发送验证码";
} else {
sendCodeBtn.innerText = `${countdown}s`;
}
}, 1000);
// 模拟发送验证码的逻辑,这里使用了setTimeout
setTimeout(() => {
alert('验证码已发送,请注意查收');
}, 2000);
});
// 登录按钮点击事件
loginBtn.addEventListener('click', () => {
// 检查手机号和验证码是否为空
if (!phoneInput.value || !this.validatePhoneNumber(phoneInput.value)) {
alert('请输入合法手机号');
return;
}
if (!this.validateVerificationCode(codeInput.value)) {
alert('请输入合法验证码');
return;
}
});
</script>
</body>
</html>