注册系统日期选择框初始边框变红问题排查

• 校验逻辑触发时机不对
  检查你的校验函数是不是在页面刚加载完成就自动跑了，比如绑定在了DOMContentLoaded这类页面初始化事件上，而不是只在表单提交时触发。举个例子，如果代码里写了这样的逻辑：

  document.addEventListener('DOMContentLoaded', function() {
    validateBirthdate(); // 页面一加载就执行校验，此时用户还没选日期，直接触发错误样式
  });
  

  那肯定会刚打开页面就看到红边框。解决办法是把校验逻辑只绑定到表单的submit事件上：

  document.querySelector('form').addEventListener('submit', function(e) {
    e.preventDefault();
    validateBirthdate();
    // 后续提交相关逻辑
  });
  

• CSS默认样式设置错误
  看看你的CSS是不是直接给day和year这两个select元素默认加了红色边框，比如：

  #day, #year {
    border: 1px solid red; /* 默认就是红色，跟校验无关 */
  }
  

  正确的做法是单独定义一个错误状态类，比如.error，只有校验不通过时才给对应元素加上这个类：

  .error {
    border: 1px solid red;
  }
  

  页面初始状态下，所有select都不带这个类，只有提交校验失败时才动态添加。

• 默认值未通过校验且初始应用了错误样式
  检查三个select的默认选项值，比如day默认是0、空字符串，year默认也是无效值，同时你的代码在页面加载时就对这些默认值做了校验，直接给元素加了错误样式。解决思路是：只有表单提交时才执行校验并添加错误类，初始状态下所有select都保持正常样式。

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