如何让输入框接受合法信用卡号并正确切换背景颜色

• 核心问题：onBlurEvent 函数中无论Luhn校验结果是否通过，都执行了mythis.setCustomValidity("Invalid field")。只要setCustomValidity传入非空值，浏览器就会判定输入框为无效状态，这是输入框始终变红、表单无法提交的直接原因。
• 次要问题1：提交事件绑定错误，button标签上的onsubmit属性书写错误且事件绑定对象错误，submit事件需要绑定在form元素上。
• 次要问题2：信用卡输入框的oninput正则允许输入小数点，不符合卡号规则，可能导致校验异常。

1. JavaScript部分修改 #

function checkLuhn(input)
{
  // 先加长度校验，符合常见信用卡号13~19位的规则，避免短字符串误判
  if(input.length <13 || input.length>19) return false;
  var sum = 0;
  var numdigits = input.length;
  var parity = numdigits % 2;
  for(var i=0; i < numdigits; i++) {
    var digit = parseInt(input.charAt(i))
    if(i % 2 == parity) digit *= 2;
    if(digit > 9) digit -= 9;
    sum += digit;
  }
  return (sum % 10) == 0;
}
let cc_number_saved = "";
function onBlurEvent(mythis) {
  cc_number_saved = mythis.value;
  mythis.value = mythis.value.replace(/[^\d]/g, '');
  if(!checkLuhn(mythis.value)) { 
    alert('Sorry, that is not a valid number - please try again!');
    // 只有校验失败时才设置自定义无效状态
    mythis.setCustomValidity("Invalid field");
  } else {
    // 校验通过时清空自定义无效状态，让浏览器判定为有效
    mythis.setCustomValidity("");
  }
}
function onFocusEvent(mythis) {
  if(mythis.value != cc_number_saved) mythis.value = cc_number_saved;
}
function onSubmitEvent(event) {
  if (!event.target.checkValidity()) {
    event.preventDefault();
  }
}

2. HTML部分修改 #

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>Technical Challenge</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script src="script.js"></script>
      </head>
      <body>
        <div class = form>
          <!-- 把submit事件绑定到form标签上 -->
          <form id = "form" action="mailto:test@test.com" method="POST" enctype="text/plain" onsubmit="onSubmitEvent(event)">
            <div class="form-group">
              <label id="name-label" for="name">Name:</label>
              <input
                type="text"
                name="name"
                id="name"
                pattern="[A-Za-z!#$%&'*+-/=?^_`{|}~]+"
                title="Please enter a valid name."
                class="form-control"
                placeholder="Enter Your Name"
                required
              />
            
            <br>
            <div class="form-group">
              <label id="email-label" for="email">Email:</label>
              <input
                type="email"
                name="email"
                id="email"
                class="form-control"
                placeholder="Enter Your Email"
                required
            />

              <br>
            <div class="form-group">
              <label id="card-label" for="card">Card:</label>
              <input
                id="cardInput" 
                type="text" 
                size="24" 
                maxlength="20" 
                <!-- 修正正则，禁止输入小数点 -->
                oninput="this.value = this.value.replace(/[^0-9]/g, '');"
                name="cc_number" 
                onblur="onBlurEvent(this)"
                onfocus="onFocusEvent(this)"
                placeholder="Enter a Proxy Credit Card Number."
                required
              />

                <br>
            <div class="form-group">
              <button type="submit" id="submit" class="submit-button">
                Submit
              </button>
          </form>
         </div> 
      </body>
    </html>

修改后输入4111111111111111或者带分隔符的4111-1111-1111-1111，失焦后都会判定为有效，输入框变为绿色，表单可正常提交。

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