jQuery单个提交按钮绑定多事件处理程序 不修改事件实现全校验通过才启用

核心逻辑是新增两个独立的校验状态标识，分别记录电影名称、电影类型的校验结果，每次任意一项校验触发后，先更新对应状态，再统一判断两项是否全部通过，再决定是否启用提交按钮，完全保留原有的事件触发逻辑（名称用keyup、类型用表单change），不需要修改原有事件绑定方式，符合仅使用jQuery、不调整现有事件处理触发规则的要求。

完整修改后的JS代码 #

$(function() { // DOM加载完成后执行
  $("input[type=submit]").prop('disabled', true) // 初始禁用提交按钮
  // 新增两个校验状态标记，初始为未通过
  let nameValid = false
  let typeValid = false

  // 名称校验
  $("input#movName").keyup(function(event) { // 监听名称输入框的keyup事件
    var name = $("input#movName").val().trim(); // 获取去除首尾空格的电影名称
    $("div#divMessage").html("*表示必填项" + "<br><br>"); // 重置提示区域内容
    $("div#divMessage").prepend("已输入字符数: " + name.length + "/10" + "<br><br>") 

    if (name.length < 5 || name.length > 10) { // 名称长度不符合5-10位要求
      $("div#divMessage").append("<ul><li>请输入长度为5-10位的电影名称</li></ul>");
      $("input#movName").css("background-color", "yellow"); // 输入框标黄提示
      nameValid = false // 更新名称校验状态为未通过
    } else { // 名称长度符合要求
      $("input#movName").css("background-color", "white");
      nameValid = true // 更新名称校验状态为通过
    }
    // 统一判断两项校验是否全部通过，设置提交按钮状态
    $("input[type=submit]").prop('disabled', !(nameValid && typeValid))
  })

  // 类型校验
  $("form").change(function() { // 监听表单的change事件
    var type = $("select#movType").val(); // 获取选中的电影类型
    $("div#divMessage").html("*表示必填项" + "<br><br>"); // 重置提示区域内容

    movList = ["horror", "comedy", "action", "sci-fi"]; // 合法电影类型列表
    if (!movList.includes(type)) { // 选中的类型不在合法列表中
      $("div#divMessage").append("<ul><li>请选择有效的电影类型</li></ul>");
      $("select#movType").css("background-color", "yellow"); // 下拉框标黄提示
      typeValid = false // 更新类型校验状态为未通过
    } else { // 类型选择合法
      $("select#movType").css("background-color", "white");
      typeValid = true // 更新类型校验状态为通过
    }
    // 统一判断两项校验是否全部通过，设置提交按钮状态
    $("input[type=submit]").prop('disabled', !(nameValid && typeValid))
  })
})

修改说明 #

• 新增了nameValid和typeValid两个布尔变量，分别存储两个校验项的通过状态，初始值均为false
• 原有校验逻辑中不再直接修改提交按钮的禁用状态，改为先更新对应校验项的状态变量
• 每个校验逻辑末尾新增统一判断：只有两个校验状态均为true时，才将提交按钮的disabled属性设为false，否则保持禁用
• 完全保留了原有的事件绑定规则，没有修改keyup、change的触发方式，符合需求要求

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