JavaScript中输入框正则校验失效问题排查

你遇到的问题核心是正则字面量中的斜杠未转义，导致JavaScript无法正确解析你的正则表达式。

问题根源 #

在JavaScript中，正则字面量是用/作为起始和结束标记的，而你正则里用来分隔月份和年份的/没有转义，这会让解析器错误地截断你的正则。比如你写的/(0[1-9]|10|11|12)/(18|19|20|21|22|23|24|25|26)/，实际上会被解析成两个部分：第一个正则/(0[1-9]|10|11|12)/，后面的(18|19|20|21|22|23|24|25|26)/会被当成无效语法（或被忽略），自然无法正确校验完整的日期格式。

而在HTML的pattern属性中，正则是以字符串形式传入的，不需要转义/，所以浏览器能正确处理。

修正后的代码 #

首先需要把正则里的/转义为\/，同时建议加上^和$锚点，确保整个输入字符串完全匹配（避免出现类似01/18abc这种不符合要求的内容被误判为有效）：

function expiry_check(){
  var y = document.getElementById("expiry_date").value;
  // 修正后的正则：转义分隔符，添加首尾锚点
  var x = /^(0[1-9]|10|11|12)\/(18|19|20|21|22|23|24|25|26)$/;
  if (y !== "") {
    if (x.test(y)) {
      // 输入正确时重置边框样式
      document.getElementById('expiry_date').style.borderColor = '';
    } else {
      document.getElementById('expiry_date').value = '';
      document.getElementById('expiry_date').style.borderColor = 'red';
    }
  } else {
    // 空输入时也重置样式
    document.getElementById('expiry_date').style.borderColor = '';
  }
}

对应的HTML部分可以保持不变：

<input type="text" name="expiry_date" id="expiry_date" value="" onkeypress='return event.charCode >= 48 && event.charCode <= 57' onblur="expiry_check()">

额外优化建议 #

• 可以考虑在输入时自动补充分隔符/，提升用户体验（比如输入两位数字后自动添加/）。
• 年份部分如果需要支持更多年份，可以把(18|19|20|21|22|23|24|25|26)改成(1[89]|2[0-6])，写法更简洁。

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