如何将重复的jQuery keypress校验代码重构为单个代码块

你可以通过以下方式消除冗余代码，同时修复原有代码的逻辑缺陷：原代码触发非英文输入提示时没有返回false，会导致非法字符依然能正常输入到输入框内。

方案1：多选择器批量绑定 #

jQuery原生支持用逗号分隔多个选择器，一次性选中多个目标元素绑定相同事件，是最简洁的实现方式：

// 同时选中手机号、邮箱两个输入框，统一绑定keypress事件
$("#inputMobile, #inputEmail").keypress(function(event) {
    const keyCode = event.which;
    // 允许输入数字、大小写英文字母
    if (
        (keyCode >= 48 && keyCode <= 57) ||
        (keyCode >= 65 && keyCode <= 90) ||
        (keyCode >= 97 && keyCode <= 122)
    ) {
        return true;
    }
    alert("Change your keyboard language to English");
    // 阻止非法字符输入
    return false;
});

方案2：提取公共处理函数复用 #

如果后续需要给更多输入框加这套校验，或者需要在其他业务逻辑里调用相同校验规则，可以把校验逻辑抽成独立函数，按需绑定即可：

// 独立封装的英文+数字输入校验函数
function validateEnglishInput(event) {
    const keyCode = event.which;
    if (
        (keyCode >= 48 && keyCode <= 57) ||
        (keyCode >= 65 && keyCode <= 90) ||
        (keyCode >= 97 && keyCode <= 122)
    ) {
        return true;
    }
    alert("Change your keyboard language to English");
    return false;
}

// 给不同输入框绑定同一个校验函数，无重复逻辑
$("#inputMobile").keypress(validateEnglishInput);
$("#inputEmail").keypress(validateEnglishInput);

可扩展优化建议 #

• 可以给所有需要做英文输入校验的输入框统一添加相同类名，比如class="input-english-only"，后续绑定事件时直接用类选择器$(".input-english-only")即可，新增同规则输入框时不需要修改JS绑定代码。
• 字符判断逻辑可以用正则简化，可读性更高：

  function validateEnglishInput(event) {
      const inputChar = String.fromCharCode(event.which);
      // 正则匹配大小写英文字母、数字
      if (/^[a-zA-Z0-9]$/.test(inputChar)) {
          return true;
      }
      alert("Change your keyboard language to English");
      return false;
  }
  

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