就是第七题
- 软件开发
- 2025-09-05 08:36:02
题七：注册表单提交加验证码功能
要求：
1.表单需包含昵称、姓名、QQ、手机号、邮箱、密码、确认密码以 发送验证码及提交和重置按钮；
2.点击表单里的输入框，隐藏提示文字；
3.点击提交和重置按钮时，都需要有相应的提示；
4.在表单提交是，需要进行验证验证填写内容是否合理：昵称不超 过10个字、姓名不超过4个字、QQ号为长度小于等于10大于5位的数字、手机号为长度11位的数字、密码由字母和数字组成且大于8位小于16位、密码和确认密码需相同。
5.发送验证码按钮点击后，会被禁用；发送验证码按钮被点击后，按钮里面的内容会变化成1分钟的倒计时；待发送验证码按钮被触发后才可以点击提交按钮，需在验证码框里填写 0505,用弹窗提示成功。
html
<body> <div class="form-container"> <h2>注册表单</h2> <form id="register-form"> <div class="form-group"> <input type="text" id="nickname" name="nickname" placeholder="昵称（不超过10个字）" required> <span class="error" id="nickname-error"></span> </div> <div class="form-group"> <input type="text" id="name" name="name" placeholder="姓名（不超过4个字）" required> <span class="error" id="name-error"></span> </div> <div class="form-group"> <input type="text" id="qq" name="qq" placeholder="QQ号（5 - 10位数字）" required> <span class="error" id="qq-error"></span> </div> <div class="form-group"> <input type="text" id="phone" name="phone" placeholder="手机号（11位数字）" required> <span class="error" id="phone-error"></span> </div> <div class="form-group"> <input type="email" id="email" name="email" placeholder="邮箱" required> <span class="error" id="email-error"></span> </div> <div class="form-group"> <input type="password" id="password" name="password" placeholder="密码（8 - 16位字母和数字）" required> <span class="error" id="password-error"></span> </div> <div class="form-group"> <input type="password" id="confirm-password" name="confirm-password" placeholder="确认密码" required> <span class="error" id="confirm-password-error"></span> </div> <div class="form-group"> <input type="text" id="verification-code" name="verification-code" placeholder="验证码" required disabled> <button type="button" id="send-code-btn">发送验证码</button> <span class="error" id="verification-code-error"></span> </div> <div class="form-group"> <button type="submit" id="submit-btn" disabled>提交</button> <button type="reset" id="reset-btn">重置</button> </div> </form> </div>css
body { margin: 0; padding: 0; background-color: #ffffff; display: flex; justify-content: center; align-items: center; height: 100vh; } /* 表单容器样式 */ .form-container { background-color: #fff; padding: 20px; border-radius: 8px; width: 300px; } h2 { text-align: center; margin-bottom: 20px; } /* 表单组样式 */ .form-group { margin-bottom: 15px; position: relative; } input { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; } input:focus +.hint { display: none; } .hint { position: absolute; top: 8px; left: 10px; color: #999; pointer-events: none; transition: all 0.3s; } button { width: 100%; padding: 10px; border: none; border-radius: 4px; cursor: pointer; margin-top: 10px; } #send-code-btn { width: auto; margin-left: 10px; background-color: #007bff; color: white; } #send-code-btn:disabled { background-color: #ccc; cursor: not-allowed; } #submit-btn { background-color: #28a745; color: white; } #submit-btn:disabled { background-color: #ccc; cursor: not-allowed; } #reset-btn { background-color: #dc3545; color: white; } .error { color: red; font-size: 12px; position: absolute; top: 30px; left: 10px; }js
function validateNickname(nickname) { return nickname.length <= 10; } function validateName(name) { return name.length <= 4; } function validateQQ(qq) { return /^\d{5,10}$/.test(qq); } function validatePhone(phone) { return /^\d{11}$/.test(phone); } function validatePassword(password) { return /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,16}$/.test(password); } function validateConfirmPassword(password, confirmPassword) { return password === confirmPassword; } function validateVerificationCode(verificationCode) { return verificationCode === '0505'; } function showError(inputId, errorMessage) { const errorElement = document.querySelector('#' + inputId + '-error'); errorElement.textContent = errorMessage; } function hideError(inputId) { const errorElement = document.querySelector('#' + inputId + '-error'); errorElement.textContent = ''; } document.addEventListener('DOMContentLoaded', function () { const form = document.querySelector('#register-form'); const sendCodeBtn = document.querySelector('#send-code-btn'); const submitBtn = document.querySelector('#submit-btn'); const verificationCodeInput = document.querySelector('#verification-code'); // 倒计时初始值 let countdown = 60; // 倒计时定时器 let countdownInterval; const inputs = document.querySelectorAll('input'); inputs.forEach(function (input) { input.addEventListener('focus', function () { const hint = this.nextElementSibling; hint.style.display = 'none'; hideError(this.id); }); // 输入框失去焦点时进行验证 input.addEventListener('blur', function () { if (this.value === '') { const hint = this.nextElementSibling; hint.style.display = 'block'; } const id = this.id; if (id === 'nickname') { if (!validateNickname(this.value)) { showError(id, '昵称不能超过10个字'); } } else if (id === 'name') { if (!validateName(this.value)) { showError(id, '姓名不能超过4个字'); } } else if (id === 'qq') { if (!validateQQ(this.value)) { showError(id, 'QQ号需为5 - 10位数字'); } } else if (id === 'phone') { if (!validatePhone(this.value)) { showError(id, '手机号需为11位数字'); } } else if (id === 'password') { if (!validatePassword(this.value)) { showError(id, '密码需由8 - 16位字母和数字组成'); } } else if (id === 'confirm-password') { const password = document.querySelector('#password').value; if (!validateConfirmPassword(password, this.value)) { showError(id, '两次输入的密码不一致'); } } else if (id === 'verification-code') { if (!validateVerificationCode(this.value)) { showError(id, '验证码错误'); } } }); }); // 发送验证码按钮点击事件 sendCodeBtn.addEventListener('click', function () { this.disabled = true; countdownInterval = setInterval(function () { if (countdown > 0) { sendCodeBtn.textContent = countdown + '秒后重发'; countdown--; } else { clearInterval(countdownInterval); sendCodeBtn.textContent = '发送验证码'; sendCodeBtn.disabled = false; countdown = 60; } }, 1000); verificationCodeInput.disabled = false; submitBtn.disabled = false; }); // 表单提交事件 form.addEventListener('submit', function (event) { event.preventDefault(); // 获取各个输入框的值 const nickname = document.querySelector('#nickname').value; const name = document.querySelector('#name').value; const qq = document.querySelector('#qq').value; const phone = document.querySelector('#phone').value; const email = document.querySelector('#email').value; const password = document.querySelector('#password').value; const confirmPassword = document.querySelector('#confirm-password').value; const verificationCode = document.querySelector('#verification-code').value; // 验证各个输入框的值 const nicknameValid = validateNickname(nickname); const nameValid = validateName(name); const qqValid = validateQQ(qq); const phoneValid = validatePhone(phone); const passwordValid = validatePassword(password); const confirmPasswordValid = validateConfirmPassword(password, confirmPassword); const verificationCodeValid = validateVerificationCode(verificationCode); // 如果所有验证都通过 if ( nicknameValid && nameValid && qqValid && phoneValid && passwordValid && confirmPasswordValid && verificationCodeValid ) { alert('注册成功！'); form.reset(); } else { alert('请检查表单填写是否正确！'); } }); // 重置按钮点击事件 document.querySelector('#reset-btn').addEventListener('click', function () { alert('表单已重置！'); }); });视频
第七题
上一篇
详解CountDownlatch
