如何使用JS的.val()获取信用卡号开头的两位数？当前仅能读取首位

嘿，我明白你的困扰啦——现在的代码只能读取第一位数字，没法处理像运通（Amex）这种需要前两位（34/37）才能识别的卡组织，对吧？咱们来一步步修正这个问题：

核心问题分析 #

你当前用$('#ccnr').val()[0]只能拿到输入值的第一位字符，对于需要前两位甚至更多位判断的卡组织（比如万事达Mastercard的51-55、2221-2299范围），这个逻辑就不够用了。

修正后的代码实现 #

我们需要先获取完整的输入值，然后截取前两位（甚至更多位）来做判断，同时还要处理输入长度不足的情况：

$( "#ccnr" ).change(function() {
  const ccInput = $(this).val().trim(); // 获取输入值并去除首尾空格
  
  // 如果输入为空或长度不足，重置背景到初始状态
  if (ccInput.length === 0) {
    $("#ccnr").css("background-position", "你的初始背景位置值");
    return;
  }

  // 获取第一位和前两位数字
  const firstDigit = ccInput[0];
  const firstTwoDigits = ccInput.substring(0, 2); // 不管输入长度，最多取前两位

  // 卡组织判断逻辑
  if (firstTwoDigits === "34" || firstTwoDigits === "37") {
    // 匹配运通（Amex）
    $("#ccnr").css("background-position", "对应Amex的背景位置");
  } else if (firstDigit === "4") {
    // 匹配Visa（4开头）
    $("#ccnr").css("background-position", "225px 12%");
  } else if (
    // 匹配万事达（Mastercard）：51-55 或 2221-2299（支持前四位判断）
    (parseInt(firstTwoDigits) >= 51 && parseInt(firstTwoDigits) <= 55) ||
    (ccInput.length >=4 && parseInt(ccInput.substring(0,4)) >=2221 && parseInt(ccInput.substring(0,4)) <=2299)
  ) {
    $("#ccnr").css("background-position", "对应Mastercard的背景位置");
  } else {
    // 未知卡组织，重置背景
    $("#ccnr").css("background-position", "你的初始背景位置值");
  }
});

优化建议 #

1. 改用input事件提升体验：把change换成input，这样用户每输入一个字符就会实时更新卡组织图标，不用等到输入框失去焦点才触发。
2. 用正则表达式简化判断：可以把卡组织的规则写成正则，代码更简洁易维护，比如：

const cardPatterns = [
  { regex: /^3[47]/, position: "Amex的背景位置" },
  { regex: /^4/, position: "225px 12%" },
  { regex: /^(5[1-5]|222[1-9]|22[3-9]\d|2[3-6]\d{2}|27[01]\d|2720)/, position: "Mastercard的背景位置" }
];

$( "#ccnr" ).on("input", function() {
  const ccInput = $(this).val().trim();
  let targetPosition = "你的初始背景位置值";
  
  // 遍历匹配卡组织
  for (const pattern of cardPatterns) {
    if (pattern.regex.test(ccInput)) {
      targetPosition = pattern.position;
      break;
    }
  }

  $("#ccnr").css("background-position", targetPosition);
});

这样后续要添加其他卡组织（比如Discover、银联），直接在数组里加规则就行，非常方便。

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