CSS中::after伪元素与data属性问题：data-error1样式不生效

核心问题1：CSS伪元素内容冲突 #

你给.formData元素同时定义了两个::after伪元素（分别对应data-error和data-error-1），但一个元素只能存在一个::after伪元素，后定义的.formData[data-error]::after会覆盖前者的样式（包括content值）。这就导致即使data-error-1-visible设为true，伪元素仍会显示data-error的内容，无法正常触发第二个错误提示。

核心问题2：JavaScript日期处理逻辑错误 #

<input type="date">返回的日期格式是YYYY-MM-DD（如2000-05-15），但你用split('/')分割，会得到仅含一个元素的数组（["2000-05-15"]），不仅逻辑错误，还无法准确判断用户是否满18岁（仅按年份计算会忽略月份和日期的差异）。

修复步骤 #

1. 重构CSS样式 #

合并重复的伪元素基础样式，根据不同的visible状态切换content值：

/* 所有错误提示共用的基础伪元素样式 */
.formData::after {
  font-size: 0.4em;
  color: #e54858;
  display: block;
  margin-top: 7px;
  margin-bottom: 7px;
  text-align: right;
  line-height: 0.3;
  opacity: 0;
  transition: 0.3s;
  content: ""; /* 默认空内容 */
}

/* 触发第一个错误时显示对应内容并可见 */
.formData[data-error-visible="true"]::after {
  content: attr(data-error);
  opacity: 1;
}

/* 触发第二个错误时显示对应内容并可见 */
.formData[data-error-1-visible="true"]::after {
  content: attr(data-error-1);
  opacity: 1;
}

/* 合并错误状态下的输入框样式 */
.formData[data-error-visible="true"] .text-control,
.formData[data-error-1-visible="true"] .text-control {
  border: 2px solid #e54858;
}

2. 修复JavaScript日期计算逻辑 #

改为正确的日期分割方式，并准确计算用户年龄：

const birthdateCheck = (value) => {
    const error = document.querySelector('.birthdate');
    let valid = false;
    const today = new Date();

    if (!value) {
        error.setAttribute('data-error-visible', 'true');
        error.setAttribute('data-error-1-visible', 'false');
    } else {
        error.setAttribute('data-error-visible', 'false');
        // 分割YYYY-MM-DD格式的日期，转为数字类型
        const [birthYear, birthMonth, birthDay] = value.split('-').map(Number);
        // 注意：Date对象的月份是0基（0=1月）
        const birthDate = new Date(birthYear, birthMonth - 1, birthDay);

        // 准确计算年龄：考虑月份和日期的差异
        let age = today.getFullYear() - birthDate.getFullYear();
        const monthDiff = today.getMonth() - birthDate.getMonth();
        if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
            age--;
        }

        if (age < 18) {
            error.setAttribute('data-error-1-visible', 'true');
        } else {
            valid = true;
            error.setAttribute('data-error-1-visible', 'false');
        }
    }
    return valid;
}

验证要点 #

• 空日期输入：显示Vous devez entrer votre date de naissance.，输入框变红。
• 未满18岁的日期：显示Vous devez être majeur pour participer à cet événement，输入框变红。
• 满18岁的日期：错误提示隐藏，输入框样式恢复正常。

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