JavaScript密码对比功能失效：表单提交无提示且不拦截

你的代码存在几个关键问题导致密码对比验证不生效：

1. JS语法错误：JavaScript文件第一行的strong text是无效语法，会阻断后续函数的执行，必须删除。
2. 表单提交逻辑冲突：提交按钮被嵌套在<a href="#">标签内，点击时会优先触发链接跳转，完全跳过表单的提交流程，且checkPassword验证函数从未被调用。
3. 未绑定表单提交事件：表单没有关联验证逻辑，提交时不会触发密码对比操作。

修复步骤： #

• 删除JS文件开头的错误代码strong text alert ("Welcome");
• 移除包裹提交按钮的<a href="#">标签，恢复表单正常提交逻辑
• 给表单添加onsubmit事件，调用checkPassword函数，通过返回值控制表单是否提交

修改后的代码： #

JavaScript文件：

function enableButton(){
    if (document.getElementById("checkb").checked)
    {
        document.getElementById("btn").disabled = false;
    }
    
    else {
        document.getElementById("btn").disabled = true;
    }
}

function checkPassword() {
    var pass1= document.getElementById("pw").value ;
    var pass2= document.getElementById("pw2").value ;
    
    // 用严格相等运算符替代==，避免类型转换问题
    if ( pass1 === pass2 ) 
    {
        alert ("Passwords match") ;
        return true;
    }
    
    else {
        alert ("Passwords do not match");
        return false;
    }
}

HTML文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <title> Sign up </title>
    <link rel = "stylesheet" href = "registration.css">
    <script src = "registration.js"></script>
    <noscript> Sorry, your browser does not support Javascript! </noscript>
</head>
<body>
<header style = " background-color : #f0e68c" >
    <div class = "logo">
        <a href = "#"><img src = "logo.png" style = "width : 130px ; height : 130px"> </a>
    </div>
    <ul class = "menu">
        <a href="#" ><li class = "menu1">  Home </li> </a>
        <a href="#"><li class = "menu1">  About us </li> </a>
        <a href="#"><li class = "menu1">  Blog </li> </a>
        <a href="#"><li class = "menu1">  Book an Appointment </li> </a>
        <a href="#"><li class = "menu1"> Contact us </li></a>
    </ul>
    <br>
</header>
<div class = "heading">
    <h1> Sign Up </h1>
</div>
<div class = "form" align = "center">
    <!-- 绑定表单提交事件，验证通过才允许提交 -->
    <form onsubmit="return checkPassword()">
        <fieldset>
            <div class = "left">
                <label for = "fname"> First Name </label><br>
                <input type = "text" id = "fname" name = "fname" required> 
            </div>
            <div class = "left">
                <label for = "lname"> Last Name </label><br>
                <input type = "text" id = "lname" name = "lname" required>
            </div>
            <div class = "clear"> &nbsp; </div> 
            <div class = "left">
                <label for = "email"> E-mail </label><br>
                <input type = "email" id = "email" name = "email" required>
            </div>
            <div class = "clear"> &nbsp; </div>
            <div class = "left">
                <label for = "pw"> Password </label><br>
                <input type = "password" id = "pw" min = "6" max = "25" pattern = "(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,25}" title="Password should contain Uppercase letters, lowercase letters, numbers, minimum 6 and maximum 25 characters " required>
            </div>
            <div class = "left"> 
                <label for = "confpw"> Confirm password </label><br>
                <input type = "password" id = "pw2" required>
            </div>
            <div class = "clear"> &nbsp; </div> 
            <input type = "checkbox" id = "checkb" name = "checkb" onclick = "enableButton()" required> I agree to the rules and privacy policy<br><br>
            <input type = "checkbox"> I want to recieve updates by mail <br>
            <input type = "checkbox"> Subscribe for monthly newsletter <br><br>
            <div class = "clear"> &nbsp; </div>
            <!-- 移除包裹的a标签，初始化设为禁用状态 -->
            <input type = "submit" id = "btn" value = "sign up" disabled>
        </fieldset>
    </form>
</div>
</body>
</html>

额外优化提示： #

• 使用===严格相等运算符可以避免字符串与其他类型意外匹配的问题
• 初始化提交按钮为disabled状态，确保用户未勾选协议时无法提交

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