如何实现Text输入框自动按/格式化为日期，适配新闻通讯订阅表单需求

实现逻辑说明 #

• 该功能必须使用JavaScript实现，核心是监听输入框的输入事件，对用户输入的内容做实时处理：
  1. 自动过滤非数字输入
  2. 按日期格式自动补全/分隔符
  3. 限制输入最长为10位（对应DD/MM/YYYY格式长度）
  4. 可额外增加日期合法性校验，避免输入不存在的日期
• 你当前使用type="date"的输入框会触发浏览器自带日期控件，和参考站的纯文本输入体验不一致，需要先修改为type="text"

修改后的完整代码 #

HTML部分 #

<div class="newsletter" style="background:transparent; color:white;">
      <label class="email"> E-MAIL
          <input  class="caixa" type="email" name="EMAIL" placeholder="E-MAIL" style="border:0;" required />
      </label >
      <label class="aniversario"> DATA DE ANIVERSÁRIO
          <input class="caixa" id="birthday" type="text" placeholder="DD/MM/AAAA" style="border:0;" maxlength="10" required />
      </label>
      <input class="cadastrar caixa" type="submit" value="CADASTRAR" style="border:0;"/>
</div>

注：这里把占位符改成了更符合用户输入预期的DD/MM/AAAA，同时给输入框添加了idbirthday方便JS绑定事件

JavaScript部分 #

const birthdayInput = document.getElementById('birthday');

birthdayInput.addEventListener('input', function(e) {
    // 先过滤所有非数字内容
    let value = e.target.value.replace(/\D/g, '');
    // 按长度补充分隔符/
    if (value.length >= 2) {
        value = value.slice(0, 2) + '/' + value.slice(2);
    }
    if (value.length >= 5) {
        value = value.slice(0, 5) + '/' + value.slice(5, 9);
    }
    // 把处理后的值赋值回输入框
    e.target.value = value;
});

// 可选：提交前校验日期合法性
birthdayInput.addEventListener('blur', function(e) {
    const value = e.target.value;
    const dateRegex = /^(0[1-9]|[12][0-9]|3[01])\/(0[1-9]|1[012])\/\d{4}$/;
    if (!dateRegex.test(value)) {
        alert('请输入正确的日期格式，例如：25/10/1990');
        e.target.focus();
    }
});

功能说明 #

• 用户输入数字时会自动补全分隔符，比如输入25101990会自动变成25/10/1990
• 自动屏蔽所有非数字输入，不需要用户手动输入/
• 可选的失焦校验可以避免用户输入不存在的日期，比如32/13/2024这类非法内容会触发提示

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