jQuery插件动态校验变量为false时如何阻止表单submit提交

你的提交拦截不生效是4个明确的代码问题导致的：

• 提交按钮#submitBtn写的是type="button"，这类按钮点击不会触发原生表单的submit事件，你绑定在#profile-form上的submit监听函数根本不会被触发。当前按钮是靠data-request="ajax-submit"属性走公共JS封装的Ajax提交逻辑，和你写的submit监听完全脱节。
• 拦截条件逻辑写反：原判断if (passwordRequirement_passed && passwordRequirement_passed !== true)只有当变量是真值且不等于true的时候才会阻止提交，正常校验失败时变量是undefined/false，完全进不了拦截分支。
• 校验状态更新逻辑有漏洞：原密码强度回调只在校验通过时给passwordRequirement_passed赋值true，校验失败时不会把状态重置为false，会出现用户先输入符合规则的密码、又改成弱密码后，状态还停留在通过的bug。
• 缺失必要校验项：没有做新密码和确认密码一致性校验、旧密码非空校验。

把原script块替换成下面的内容即可：

$(document).ready(function () {
    // 初始化校验状态为未通过
    let passwordRequirement_passed = false;

    // 密码强度规则校验回调
    $('.pr-password').passwordRequirements({
        // 可按业务需求自定义规则，比如最小长度、必须包含大小写/数字/特殊字符
        minLength: 8
    }, function (action) {
        // 无论通过或失败都实时更新状态
        passwordRequirement_passed = action.is_passed;
    });

    // 按钮为button类型，直接监听按钮点击做拦截（如果项目公共组件支持submit前置钩子，也可以把校验逻辑放钩子里）
    $('#submitBtn').on('click', function (e) {
        // 读取所有输入框值
        const oldPwd = $('#password').val().trim();
        const newPwd = $('#new_password').val().trim();
        const confirmPwd = $('#confirm_password').val().trim();
        let errMsg = '';

        // 逐项校验
        if (!oldPwd) errMsg = '请输入旧密码';
        else if (!passwordRequirement_passed) errMsg = '新密码不符合强度要求';
        else if (newPwd !== confirmPwd) errMsg = '两次输入的新密码不一致';

        // 校验不通过则拦截提交，弹出提示
        if (errMsg) {
            e.preventDefault();
            alert(errMsg); // 可替换为项目使用的统一toast/弹窗提示组件
            return false;
        }
    });
});

• 可以在用户输入密码时实时展示规则校验进度，不用等点击提交才提示错误，交互体验更好
• 旧密码、新密码输入框可以加失焦校验，提前提示问题
• 如果项目公共的ajax-submit逻辑有提交前的回调钩子，优先把校验逻辑放到钩子里，和公共逻辑解耦

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