如何仅在两个密码输入框匹配且非空时提交表单？

我正在实现密码匹配功能，但遇到问题：当密码字段为空或两个密码不匹配时，表单仍然会提交。需要修改代码，确保只有在两个密码匹配且均不为空时才允许提交表单。

我的原代码如下：

<!DOCTYPE html>
<html>
    <head>
        <script>
            
            // Function to check Whether both passwords
            // is same or not.
            function checkPassword(form) {
                password1 = form.password1.value;
                password2 = form.password2.value;

                // If password not entered
                if (password1 == '')
                    alert ("Please enter Password");
                    
                // If confirm password not entered
                else if (password2 == '')
                    alert ("Please enter confirm password");
                    
                // If Not same return False.    
                else if (password1 != password2) {
                    alert ("\nPassword did not match: Please try again...")
                    return false;
                }

                // If same return True.
                else{
                    alert("Password Match: Welcome to GeeksforGeeks!")
                    return true;
                }
            }
        </script>
    </head>
    <body>
        <form onSubmit = "return checkPassword(this)" action="success.php" method="POST">
        <table border = 1 align = "center">
            <tr>
                <!-- Enter Password. -->
                <td>Password:</td>
                <td><input type = password name = password1></td>
            </tr>
            <tr>
                <!-- To Confirm Password. -->
                <td>Confirm Password:</td>
                <td><input type = password name = password2></td>
            </tr>
            <tr>
                <td colspan = 2 align = right>
                <input type = submit value = "Submit"></td>
            </tr>
        </table>
        </form>
    </body>
</html>

success.php代码：

<?php
    echo("SUCCESS");
?>

原代码的核心问题是：当密码字段为空时，仅弹出提示但没有返回false，函数会继续执行后续逻辑，最终可能走到return true分支，导致表单提交。

在空字段的判断分支中添加return false，确保字段为空时直接阻止表单提交；同时为变量添加声明，避免全局变量污染。

修改后的完整代码：

<!DOCTYPE html>
<html>
    <head>
        <script>
            // 检查两个密码是否匹配
            function checkPassword(form) {
                // 声明变量，避免全局污染
                const password1 = form.password1.value;
                const password2 = form.password2.value;

                // 如果密码为空
                if (password1 === '') {
                    alert("请输入密码");
                    return false;
                }
                // 如果确认密码为空
                else if (password2 === '') {
                    alert("请输入确认密码");
                    return false;
                }
                // 如果密码不匹配
                else if (password1 !== password2) {
                    alert("密码不匹配，请重试");
                    return false;
                }
                // 密码匹配且非空
                else {
                    alert("密码匹配，欢迎！");
                    return true;
                }
            }
        </script>
    </head>
    <body>
        <form onSubmit="return checkPassword(this)" action="success.php" method="POST">
            <table border="1" align="center">
                <tr>
                    <td>密码:</td>
                    <td><input type="password" name="password1"></td>
                </tr>
                <tr>
                    <td>确认密码:</td>
                    <td><input type="password" name="password2"></td>
                </tr>
                <tr>
                    <td colspan="2" align="right">
                        <input type="submit" value="提交">
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

• 每个校验不通过的分支都添加了return false，确保表单不会提交
• 使用===严格相等判断，避免类型转换导致的意外问题
• 添加了变量声明const，符合现代JS规范
• 提示文本改为中文，更符合使用习惯

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