当前位置：首页 > news >正文

就是第七题

news 来源：原创 2025/5/26 9:05:25

题七：注册表单提交加验证码功能

要求：

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;
        }

  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('表单已重置！');
            });
        });

视频

第七题