校验错误信息应紧贴输入框显示，通过包裹容器实现结构清晰、语义明确；默认隐藏错误提示，出错时添加.error类触发显示，并配合aria-live提升可访问性。
在输入框下方显示校验错误信息，关键在于结构清晰、样式可控、语义明确。不依赖 JS 框架也能轻松实现，核心是用 <div> 或 <span> 作为错误容器，配合 CSS 定位和状态控制。
HTML 结构：让错误提示紧贴输入框
把输入框和错误提示包裹在同一父容器中（如 <div class="form-field">），确保 DOM 顺序自然、语义连贯：
<div class="form-field"> <label for="email">邮箱</label> <input type="email" id="email" name="email" required> <span class="error-message" aria-live="polite"></span> </div>
注意：aria-live="polite" 让屏幕阅读器能及时读出错误，提升可访问性。
CSS 样式：错误信息默认隐藏，出错时显示在下方
利用父容器的相对定位 + 错误提示的绝对或块级定位，避免影响其他元素布局：
立即学习“前端免费学习笔记（深入）”；
.form-field {
position: relative;
margin-bottom: 1rem;
}
.error-message {
display: none; /* 默认不显示 */
color: #d32f2f;
font-size: 0.875rem;
margin-top: 0.25rem;
line-height: 1.4;
}
.form-field.error .error-message {
display: block;
}JS 校验失败时，只需给 .form-field 添加 error 类即可触发显示。
JS 校验逻辑：实时反馈 + 精准提示
监听 input 和 blur 事件，避免过度干扰用户输入：
-
input用于实时模糊校验（如邮箱格式） -
blur用于必填、唯一性等需失焦后验证的场景 - 每次校验后，清空旧错误、写入新消息，并切换
error类
示例片段：
const input = document.getElementById('email');
const errorMsg = input.parentElement.querySelector('.error-message');
<p>input.addEventListener('blur', () => {
if (!input.checkValidity()) {
errorMsg.textContent = input.validationMessage || '请输入有效的邮箱';
input.parentElement.classList.add('error');
} else {
errorMsg.textContent = '';
input.parentElement.classList.remove('error');
}
});进阶建议：提升体验的小细节
- 错误文字尽量具体，比如“手机号格式不正确”比“格式错误”更友好
- 输入框获得焦点时，自动清除当前错误（可选，适合非必填字段）
- 用
transition给opacity或max-height加淡入效果，避免突兀闪现 - 表单提交时统一触发所有字段校验，并聚焦第一个出错项
不复杂但容易忽略。结构对了，样式和交互就顺了。
