密码校验通过且确认密码一致时启用表单提交按钮的问题求助

存在的问题 #

• 事件绑定对象错误：当前代码将keyup事件绑定在了form下的button元素上，用户输入密码的操作在input输入框中触发，该事件永远不会执行。
• 输入框选择器错误：使用form > input选择form的直接子元素input，但你的所有input都嵌套在多层div中，该选择器无法匹配到任何密码输入框，导致判空逻辑永远认为输入框为空，按钮保持禁用。
• 缺少密码一致性校验逻辑：原有逻辑仅判断输入框是否为空，未校验两个密码输入框的值是否匹配，不符合需求要求。
• 未定义声明的函数：input的onkeyup属性声明了调用checkPasswords()，但实际没有定义该函数，触发事件时会抛出JS错误。

修正后的代码 #

<form enctype="multipart/form-data" method="post" onsubmit="submit.disabled = true;">
    <div class="row">
        <div>
            <input type="password" id="pass1" name="new_password" placeholder="Password" required="" style="border-radius: 0px;border-style: solid;border-color: #b2b2b2;" >
        </div>
    </div>
    <div class="row">
        <div>
            <input class="form-control" type="password" id="pass2" name="confirm_new_password" placeholder="Confirm Password" required="" style="border-radius: 0px;border-style: solid;border-color: #b2b2b2;" >
        </div>
    </div>
    <div class="row">
        <div class="col">
            <button id="random" type="button" value="Generate Random Password" name="random" onclick="generate_password()" >Generate Random Password</button>
        </div>
    </div>
    <div class="row">
        <div>
            <button id="reset" type="reset" value="Reset Form" name="reset">Reset</button>
        </div>
        <div>
            <button id="submit" type="submit" value="Set Password" disabled="disabled" name="submit">Set Password</button>
        </div>
    </div>
</form>
<script>
$(function() {
    // 给两个密码输入框绑定输入事件
    $('#pass1, #pass2').on('keyup input', function() {
        const pass1 = $('#pass1').val().trim();
        const pass2 = $('#pass2').val().trim();
        let enableSubmit = true;

        // 判空校验
        if (pass1 === '' || pass2 === '') {
            enableSubmit = false;
        }

        // 密码一致性校验
        if (pass1 !== pass2) {
            enableSubmit = false;
        }

        // 此处可补充你省略的密码语法校验逻辑，不满足要求时将enableSubmit设为false即可

        // 切换提交按钮状态
        $('#submit').prop('disabled', !enableSubmit);
    });

    // 重置表单后自动禁用提交按钮
    $('#reset').on('click', function() {
        $('#submit').prop('disabled', true);
    });
})
</script>

修正说明 #

• 删除了input上冗余的onkeyup声明，统一使用jQuery绑定事件到密码输入框，同时绑定input事件兼容输入法输入、粘贴等非键盘输入场景
• 直接通过id选择两个密码框获取值，避免层级选择器匹配错误
• 增加了密码一致性校验逻辑，预留了密码语法校验的扩展位置
• 使用prop方法操作disabled属性，比attr/removeAttr兼容性更好，更符合DOM属性操作规范
• 补充了重置按钮的事件处理，重置表单后自动恢复提交按钮的禁用状态

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