手机号验证码重新发送

前文叙述

很久以前做的一个 demo ，纯 HTML 、CSS、js 制作，一定时间段之后才可以重新发送验证码，如 60s
后再次发送验证码，在该时间段内发送验证码按钮为禁用状态，实战开发过程也亦是同理，因此记录一手。

一、效果图：

请添加图片描述

二、实现代码：

<!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);// 模拟发送验证码的逻辑，这里使用了setTimeoutsetTimeout(() => {alert('验证码已发送，请注意查收');}, 2000);});// 登录按钮点击事件loginBtn.addEventListener('click', () => {// 检查手机号和验证码是否为空if (!phoneInput.value || !this.validatePhoneNumber(phoneInput.value)) {alert('请输入合法手机号');return;}if (!this.validateVerificationCode(codeInput.value)) {alert('请输入合法验证码');return;}});</script>
</body>
</html>