进一步加强区门户网站建设管理电商网站公司
题七：注册表单提交加验证码功能
要求：
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('表单已重置！');});});视频
第七题