使用 Luhn 算法实现表单信用卡号验证

/**
 * 校验给定的字符串是否符合 Luhn 算法规则
 * @param {string} value 待校验的数字字符串
 * @returns {boolean} 如果符合 Luhn 算法则返回 true，否则返回 false
 */
function checkLuhn(value) {
  // 接受只包含数字、破折号或空格的字符串
  if (/[^0-9-\s]+/.test(value)) return false;

  let nCheck = 0,
    nDigit = 0,
    bEven = false;
  // 移除所有非数字字符
  value = value.replace(/\D/g, "");

  // 从右向左遍历数字
  for (let n = value.length - 1; n >= 0; n--) {
    const cDigit = value.charAt(n);
    nDigit = parseInt(cDigit, 10);

    if (bEven) {
      // 偶数位（从右边开始数的第二位、第四位...）数字乘以2
      if ((nDigit *= 2) > 9) nDigit -= 9; // 如果结果大于9，则减去9
    }

    nCheck += nDigit; // 累加所有数字
    bEven = !bEven; // 切换奇偶标志
  }

  // 如果总和能被10整除，则校验通过
  return (nCheck % 10) === 0;
}

// 当信用卡号输入框内容变化时触发验证
$('#cc').on('input', function(){
  // 获取信用卡号输入框的 DOM 元素
  // 注意：这里需要确保 field 变量正确引用到输入框，
  // 否则 setCustomValidity 将无法调用
  const field = document.querySelector('#cardContainer input'); // 假设输入框在一个 id 为 'cardContainer' 的父元素内

  if (checkLuhn($('#cc').val())) {
    field.setCustomValidity(""); // 验证通过，清除自定义错误消息
  } else {
    field.setCustomValidity("Invalid field."); // 验证失败，设置自定义错误消息
  }
});

(function () {
  "use strict";

  const forms = document.querySelectorAll(".needs-validation");
  const result = document.getElementById("result");

  Array.prototype.slice.call(forms).forEach(function (form) {
    form.addEventListener(
      "submit",
      function (event) {
        // 在提交前，先执行所有验证（包括原生HTML5验证和通过setCustomValidity设置的自定义验证）
        if (!form.checkValidity()) {
          event.preventDefault(); // 阻止默认提交行为
          event.stopPropagation(); // 阻止事件冒泡

          // 聚焦到第一个无效字段
          form.querySelectorAll(":invalid")[0].focus();
        } else {
          // 如果所有字段都有效，则处理表单提交（例如通过 Fetch API 发送到后端）
          const formData = new FormData(form);
          event.preventDefault();
          event.stopPropagation();

          const object = {};
          formData.forEach((value, key) => {
            object[key] = value;
          });
          const json = JSON.stringify(object);
          result.innerHTML = "Please wait...";

          fetch("https://api.web3forms.com/submit", {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
              Accept: "application/json"
            },
            body: json
          })
            .then(async (response) => {
              let json = await response.json();
              if (response.status === 200) {
                result.innerHTML = json.message;
                result.classList.remove("text-gray-500");
                result.classList.add("text-green-500");
              } else {
                console.log(response);
                result.innerHTML = json.message;
                result.classList.remove("text-gray-500");
                result.classList.add("text-red-500");
              }
            })
            .catch((error) => {
              console.log(error);
              result.innerHTML = "Something went wrong!";
            })
            .then(function () {
              form.reset(); // 重置表单
              form.classList.remove("was-validated"); // 移除验证样式
              setTimeout(() => {
                result.style.display = "none";
              }, 5000);
            });
        }
        form.classList.add("was-validated"); // 添加验证样式，触发CSS显示错误信息
      },
      false
    );
  });
})();

<div class="flex mb-6 space-x-4">
  <div id="cardContainer" class="w-full md:w-1/2">
    <label for="cc" class="block mb-2 text-sm text-gray-600 dark:text-gray-400">Credit Card Number</label>
    <input type="text" id="cc" placeholder="XXXX XXXX XXXX XXXX" required
           class="w-full px-3 py-2 placeholder-gray-300 border-2 border-gray-200 rounded-md focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-300" />

    <!-- 提示用户输入为空的反馈信息 -->
    <div class="empty-feedback text-red-400 text-sm mt-1">
      Please provide your credit card number.
    </div>
    <!-- 提示用户输入无效的反馈信息 -->
    <div class="invalid-feedback text-red-400 text-sm mt-1">
      Please provide a valid credit card number.
    </div>
  </div>
</div>

.invalid-feedback,
.empty-feedback {
  display: none; /* 默认隐藏错误反馈 */
}

/* 当表单被标记为 'was-validated' 且输入框为空且无效时，显示 'empty-feedback' */
.was-validated :placeholder-shown:invalid ~ .empty-feedback {
  display: block;
}

/* 当表单被标记为 'was-validated' 且输入框非空但无效时，显示 'invalid-feedback' */
.was-validated :not(:placeholder-shown):invalid ~ .invalid-feedback {
  display: block;
}

/* 当输入框无效时，设置边框颜色 */
.is-invalid,
.was-validated :invalid {
  border-color: #dc3545; /* 红色边框 */
}