实现keyup事件监听：输入数字长度不符时触发错误提示

完整实现代码 #

下面是直接可用的代码，包含HTML结构、样式和交互逻辑：

HTML

<form>
  <label for="number-input">请输入数字：</label>
  <input type="text" id="number-input" placeholder="输入5/8/10位数字">
  <div id="error-message" class="error">数字长度错误</div>
</form>

CSS

.error {
  color: red;
  margin-top: 8px;
  display: none; /* 默认隐藏错误提示 */
}

JavaScript

// 获取DOM元素
const input = document.getElementById('number-input');
const errorMsg = document.getElementById('error-message');
// 允许的长度数组
const allowedLengths = [5, 8, 10];

// 监听keyup事件
input.addEventListener('keyup', function() {
  // 过滤非数字字符，确保输入仅为数字
  const cleanValue = this.value.replace(/\D/g, '');
  this.value = cleanValue;
  
  // 检查长度是否在允许列表中
  const isValid = allowedLengths.includes(cleanValue.length);
  
  // 控制错误提示的显示/隐藏
  errorMsg.style.display = isValid ? 'none' : 'block';
});

关键说明 #

• 输入框会自动过滤非数字字符，避免用户输入无效内容；
• keyup事件在用户每次按键抬起时触发，实现实时校验；
• 用includes()方法快速判断输入长度是否符合要求；
• 错误提示默认隐藏，仅当长度不符合规则时显示红色文本。

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