如何将input type="text"掩码为dd-mm-yyyy格式并自动添加斜杠？

嘿，我来帮你搞定这个日期输入自动加分隔符的问题！正则本身只能做格式验证，没法自动插入分隔符，我们得结合JavaScript监听输入事件来实现这个功能。下面是具体的实现步骤和代码：

核心思路 #

通过监听输入框的input事件，实时处理用户输入的内容：

1. 过滤掉所有非数字字符，确保用户只能输入数字
2. 在输入到第2位和第5位数字后，自动插入分隔符（比如/或者你需要的-）
3. 限制输入框的最大长度，避免无效内容
4. 最后用正则验证最终的日期格式是否合法

完整代码实现 #

HTML部分 #

<input type="text" id="dateInput" placeholder="dd/mm/yyyy" maxlength="10">

JavaScript部分 #

const dateInput = document.getElementById('dateInput');

dateInput.addEventListener('input', function(e) {
  // 第一步：移除所有非数字字符，只保留数字
  let inputValue = e.target.value.replace(/\D/g, '');
  
  // 第二步：根据输入长度自动插入分隔符
  if (inputValue.length > 2) {
    // 输入到第3位时，在第2位后加分隔符
    inputValue = inputValue.slice(0, 2) + '/' + inputValue.slice(2);
  }
  if (inputValue.length > 5) {
    // 输入到第6位时，在第5位后加分隔符
    inputValue = inputValue.slice(0, 5) + '/' + inputValue.slice(5);
  }
  
  // 第三步：限制输入框最大长度为10（对应dd/mm/yyyy的完整格式）
  inputValue = inputValue.slice(0, 10);
  
  // 将处理后的内容放回输入框
  e.target.value = inputValue;
  
  // 可选：验证最终格式是否符合要求（用你提供的正则修改分隔符）
  const validDatePattern = /^(0[1-9]|1[0-9]|2[0-9]|3[01])\/(0[1-9]|1[012])\/\d{4}$/;
  if (inputValue.length === 10 && !validDatePattern.test(inputValue)) {
    // 如果格式无效，可以添加样式提示，比如红色边框
    e.target.classList.add('date-invalid');
  } else {
    e.target.classList.remove('date-invalid');
  }
});

样式补充（可选） #

如果需要给无效日期添加视觉提示，可以加一点CSS：

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

调整为dd-mm-yyyy格式 #

如果你需要的是-作为分隔符而不是/，只需要修改两处：

1. JavaScript里的/替换成-
2. 验证正则里的/也替换成-，修改后的正则为：

const validDatePattern = /^(0[1-9]|1[0-9]|2[0-9]|3[01])-(0[1-9]|1[012])-\d{4}$/;

这个方案能处理用户输入、删除、粘贴等各种场景，自动维护日期格式的正确性，同时结合你的正则做最终验证。

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