如何解决JavaScript中注册表单持续弹出提示框的问题？

DevOps 小满

2026-5-29

搞定注册表单持续弹邮箱提示的问题啦！

嘿，我帮你排查了这个输入正确手机号后，一直弹“邮箱无效”提示框的问题，主要是几个小bug在搞鬼，咱们一步步来修复：

问题到底出在哪？

HTML标签写混了导致DOM混乱
你注册表单里的标题写成了<h2>Register</h1>，h2开标签配h1闭标签，浏览器解析DOM时会乱套，可能引发焦点莫名其妙地来回跳，反复触发邮箱输入框的onBlur事件，自然就一直弹提示了。
表单提交没做整体验证，还没阻止默认行为
点击注册按钮时，表单直接就提交了，要是邮箱还空着，onBlur事件就会触发，而且因为没阻止默认提交，页面可能在提交-刷新的循环里，提示框就停不下来。
邮箱验证没判断空值
现在只要邮箱输入框失去焦点，不管有没有输入内容，都会跑验证逻辑，空字符串肯定过不了正则，直接弹提示，太霸道啦。
重复ID埋隐患
登录和注册表单里都有id="text2"的元素，getElementById只会找第一个，后续逻辑很容易出错，虽然不是这次问题的直接原因，但也得改。

修复后的完整代码

我把所有问题都修正了，还加了一些优化，代码里标了关键修改点：

<!DOCTYPE html>
<html>
<head>
    <title>Login-Form</title>
    <style>
        h3{
            padding: 10px;
            background-color: Cyan;
            color: Red;
            font-size: 20px; /* 把非标准的size改成font-size */
        }
        .log-in{
            padding: 50px;
            background-image: url("login.png");
            float: left; /* 替换align为标准的float属性 */
            color: Cyan;
            background-repeat: no-repeat;
            background-color:black;
        }
        .Register{
            padding: 50px;
            background-image: url("reg.png");
            float: right; /* 替换align为float */
            color: Yellow;
            background-repeat: no-repeat;
            background-color:black;
        }
        /* 加个清除浮动的类，避免页面布局乱掉 */
        .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }
    </style>
</head>
<body>
    <div>
        <marquee><center><h3>Welcome To LIFOA Mobile-APP</h3></center></marquee>
        <form class="log-in" method="post">
            <table>
                <b>
                    <tr>
                        <td><h1>LOGIN PAGE</h1><br><br><br></td>
                        <td>USER NAME</td>
                        <td>:</td>
                        <!-- 把重复的ID改成唯一的login_username -->
                        <td><input type="text" placeholder="Username" id="login_username" name="un" onBlur="checkuser()"/></td><br /><br><br>
                        <td><span id="user_status" style="color:Red ;font-weight:400"></span></td>
                    </tr>
                    <tr>
                        <td>PASSWORD</td>
                        <td>:</td>
                        <!-- 改成唯一的login_password -->
                        <td><input type="password" name="pw" placeholder="Password" id="login_password"/></td><br /><br><br>
                        <!-- 修复之前span标签嵌套错误的问题 -->
                        <td><span id="passw_status" style="color:Red ;font-weight:400"></span></td>
                    </tr>
                </b>
            </table>
            <!-- 加return阻止默认提交行为 -->
            <input type="submit" value="Login" onclick="return validate()" />
        </form>
    </div>
    <!-- 加clearfix清除浮动，避免布局重叠 -->
    <div class="clearfix">
        <!-- 绑定表单提交验证函数，只有验证通过才允许提交 -->
        <form action="..." class="Register" method="get" onsubmit="return validateRegister()">
            <b>
                <!-- 修复h2标签闭合错误 -->
                <center><h2>Register</h2><br><br><br>
                    NAME: <input type="text" placeholder="Enter Name" id="reg_name" />
                    <br /><br><br>
                    <label>Enter phone number (e.g. 1234567890):
                        <!-- 改成唯一的reg_mobile -->
                        <input type="text" placeholder="Mob Number" id="reg_mobile" name="Mobile" onBlur="checkPhoneNo(this.value);" />
                    </label>
                    <br /><br><br>
                    <label>Enter mail ID:
                        <!-- 改成唯一的reg_email -->
                        <input type="text" placeholder="Enter Email" id="reg_email" name="mail" onBlur="ValidateEmail(this.value);" />
                    </label><br /><br><br>
                    Gender : <br>
                    <!-- 给单选按钮加name属性，确保只能选一个 -->
                    <input type="radio" value="male" name="gender">Male
                    <br>
                    <input type="radio" value="female" name="gender">FeMale
                    <br>
                    <input type="radio" value="other" name="gender">Other
                    <br><br>
                    Password: <input type="password" placeholder="Enter Password" id="reg_password" /><br /><BR><BR>
                    Confirm Password: <input type="password" placeholder="Confirm the password" id="reg_confirm_password" /><br /><br><br>
                    <input type="submit" value="Register" />
                </center>
            </b>
        </form>
    </div>

    <script type="text/javascript">
        // 手机号验证函数，加了空值判断
        function checkPhoneNo(phoneNo) {
            // 简化正则写法，效果一样
            var phoneRE = /^\d{10}$/;
            if (phoneNo.trim() === "") {
                alert("请先输入手机号哦");
                return false;
            }
            if (phoneRE.test(phoneNo)) {
                alert("号码有效👍");
                return true;
            } else {
                alert("手机号格式不对，请输入10位纯数字");
                return false;
            }
        }

        // 邮箱验证函数，空值时不弹提示
        function ValidateEmail(mail) {
            var mailRE = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
            // 空值时暂时不验证，用户还没输入呢
            if (mail.trim() === "") {
                return true;
            }
            if (mailRE.test(mail)) {
                return true;
            } else {
                alert("你输入的邮箱地址无效哦，请检查格式");
                return false;
            }
        }

        // 登录用户名验证，输入后恢复正常样式
        function checkuser() {
            var usernameInput = document.getElementById("login_username");
            if (usernameInput.value.trim() === "") {
                usernameInput.style.border = "1px solid #ff0000";
                document.getElementById('user_status').innerHTML = "请输入用户名";
            } else {
                usernameInput.style.border = "";
                document.getElementById('user_status').innerHTML = "";
            }
        }

        // 修复原登录密码验证的逻辑错误
        function checkpass() {
            var passwordInput = document.getElementById("login_password");
            if (passwordInput.value.trim() === "") {
                passwordInput.style.border = "1px solid #ff0000";
                document.getElementById('passw_status').innerHTML = "请输入密码";
                alert("请输入密码");
            } else {
                passwordInput.style.border = "";
                document.getElementById('passw_status').innerHTML = "";
            }
        }

        // 登录表单验证，加return false阻止默认提交
        function validate() {
            var username = document.getElementById("login_username").value;
            var password = document.getElementById("login_password").value;
            if (username === "Suganth" && password === "6213") {
                alert("验证成功！马上跳转");
                location.href = "second.html";
                return false;
            } else {
                alert("用户名或密码不对哦");
                location.href = "first.html";
                return false;
            }
        }

        // 新增注册表单整体验证，所有条件满足才允许提交
        function validateRegister() {
            var name = document.getElementById("reg_name").value;
            var mobile = document.getElementById("reg_mobile").value;
            var email = document.getElementById("reg_email").value;
            var password = document.getElementById("reg_password").value;
            var confirmPwd = document.getElementById("reg_confirm_password").value;

            // 逐个检查必填项
            if (name.trim() === "") {
                alert("请输入你的姓名");
                return false;
            }
            if (!checkPhoneNo(mobile)) {
                return false;
            }
            if (!ValidateEmail(email)) {
                return false;
            }
            if (password.trim() === "") {
                alert("请设置密码");
                return false;
            }
            if (password !== confirmPwd) {
                alert("两次输入的密码不一样哦");
                return false;
            }

            // 所有验证通过，提交表单
            alert("注册信息没问题啦，马上提交！");
            return true;
        }
    </script>
</body>
</html>

改了啥重点？

修好了DOM结构问题：把写错的标签、嵌套错误都改了，页面解析正常了，焦点就不会乱跳了。
加了表单整体验证：注册时要先过一遍所有必填项的验证，过了才允许提交，还阻止了默认提交行为，不会随便刷新页面。
优化了验证逻辑：空输入时不再弹提示，用户体验更好；错误提示也更明确。
修复了重复ID：每个元素的ID都唯一，不会出现选DOM元素出错的情况。
优化了布局：用标准的float替换了非标准的align，加了清除浮动，页面布局不会乱。

内容的提问来源于stack exchange，提问作者Suganth S

如何解决JavaScript中注册表单持续弹出提示框的问题？

问题到底出在哪？ #

修复后的完整代码 #

改了啥重点？ #

问题到底出在哪？

修复后的完整代码

改了啥重点？