验证时钟时间（一刻钟间隔）的输入合法性

核心规则回顾 #

允许的输入格式：

• 纯小数后缀：.00、.25、.50、.75
• 整数+后缀：0-23范围内的整数搭配上述后缀（如1.25、12.75、23.00）
  禁止的输入：
• 纯整数（如0、7）
• 非指定后缀的小数（如12.18）
• 整数部分超出0-23范围（如24.00）

解决方案：正则表达式+输入事件监听 #

通过正则精准匹配合法格式，结合输入事件实时校验，同时在提交环节做最终验证。

1. 核心正则表达式

const validPattern = /^(([0-9]|1[0-9]|2[0-3])\.)?(00|25|50|75)$/;

• ([0-9]|1[0-9]|2[0-3])：匹配0-23的整数部分（可选）
• \.：匹配小数点
• (00|25|50|75)：强制匹配指定的四个小数后缀，避免纯整数输入

2. 实时输入限制代码

给文本框添加input事件监听，实时过滤非法字符并校验格式：

<input type="text" id="timeInput" placeholder="例如：.25、12.50">

const input = document.getElementById('timeInput');

input.addEventListener('input', function(e) {
  let value = e.target.value.trim();
  // 过滤非数字和小数点的字符
  value = value.replace(/[^0-9.]/g, '');
  // 限制最多一个小数点
  if (value.split('.').length > 2) {
    value = value.slice(0, value.lastIndexOf('.'));
  }
  // 标记格式错误状态
  if (!validPattern.test(value)) {
    input.classList.add('invalid');
  } else {
    input.classList.remove('invalid');
  }
  e.target.value = value;
});

// 提交时的最终校验
function validateInput() {
  const value = input.value.trim();
  if (!validPattern.test(value)) {
    alert('输入格式错误，请输入如.25、12.50这类符合要求的值');
    return false;
  }
  return true;
}

3. 错误状态样式（可选）

添加CSS直观标记错误输入：

.invalid {
  border: 2px solid #ff4444;
  background-color: #ffebee;
}

代码说明 #

• 先过滤非法字符，避免用户输入数字和小数点以外的内容
• 实时校验完整格式，通过样式提示用户输入是否合规
• 提交环节再次验证，防止绕过实时校验的异常情况

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