修复信用卡类型识别功能并实现品牌图片动态切换

问题根源 #

原cardType函数的核心错误是错误获取DOM元素而非实际卡号值：它把<ul id="snum">元素转成字符串，得到的是[object HTMLUListElement]，完全无法匹配卡号正则，所以始终返回default。

修复步骤 #

1. 调整HTML结构

解除mastercard图片的注释，并给两个品牌图片默认隐藏（仅保留芯片图显示）：

<div class="imgs" id="card-brand">
  <img src="./images/chip.png" width="50px" />
  <img src="./images/visa.png" width="70px" id="visa" style="display:none;"/>
  <img src="./images/mastercard.png" width="70px" id="mastercard" style="display:none;"/>
</div>
<!-- 下方卡号显示的<ul id="snum">结构保持不变 -->

2. 修复cardType识别函数

直接使用输入框的卡号值（去除可能的空格干扰），用正则匹配卡品牌规则：

function cardType(c) {
  // 去除卡号中的空格，避免输入空格影响识别
  const cardNumber = c.value.replace(/\s/g, '');
  
  // Visa：以4开头
  const visaRegex = /^4/;
  // Mastercard：以51-55开头
  const mastercardRegex = /^5[1-5]/;

  if (visaRegex.test(cardNumber)) {
    return "visa";
  } else if (mastercardRegex.test(cardNumber)) {
    return "mastercard";
  }
  
  return "default";
}

3. 添加品牌图片切换函数

根据识别出的卡类型，显示对应品牌图片、隐藏其他：

function updateCardBrand(cardType) {
  const visaImg = document.getElementById('visa');
  const mastercardImg = document.getElementById('mastercard');

  // 默认隐藏所有品牌图
  visaImg.style.display = 'none';
  mastercardImg.style.display = 'none';

  // 根据识别结果显示对应图片
  switch(cardType) {
    case 'visa':
      visaImg.style.display = 'inline-block';
      break;
    case 'mastercard':
      mastercardImg.style.display = 'inline-block';
      break;
    // default状态下只显示芯片图，无需额外操作
  }
}

4. 整合调用逻辑

修改cardNumber函数，在更新卡号显示后自动触发类型识别和图片切换：

function cardNumber(c){
  const numberLabel = document.querySelectorAll(".label"); 
  const cross = document.querySelectorAll(".cross");
  // 去除输入中的空格，统一处理
  const num = c.value.replace(/\s/g, ''); 
  
  if (num.length <= 16){
    // 重置所有标签为#并移除active类
    for(let j = 0;j<numberLabel.length;j++){
      numberLabel[j].innerHTML = "#";
      cross[j].classList.remove("active"); 
    } 
    // 填充输入的卡号数字并添加active类
    for(let i = 0;i<num.length;i++){
      numberLabel[i].innerHTML = num[i];
      cross[i].classList.add("active"); 
    }
  }else{
    // 限制卡号长度为16位
    c.value = num.substring(0,16);
  }
  
  // 自动识别卡类型并更新品牌图片
  const detectedType = cardType(c);
  updateCardBrand(detectedType);
}

使用说明 #

确保你的卡号输入框绑定了cardNumber函数（比如oninput="cardNumber(this)"），当用户输入卡号时：

• 卡号会同步显示到页面的#snum列表中
• 系统自动识别卡类型，实时切换显示Visa/Mastercard品牌图片
• 超过16位的输入会被自动截断

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