通过CSS自定义.error-tip类设置圆角边框、浅红背景、深红文字，并添加过渡动画；结合JavaScript监听blur或submit事件，动态控制提示显示隐藏；在提示中加入警告图标提升可读性，实现美观友好的表单校验提示。
HTML表单数据校验提示默认样式通常比较生硬，浏览器自带的弹窗提示（如required字段未填）往往影响用户体验。通过合理的样式设计和JavaScript控制，可以让提示信息更美观、更友好。
使用CSS自定义提示框样式
可以隐藏浏览器默认提示，用自定义的提示元素代替。例如创建一个.error-tip类来展示错误信息：
- 设置提示框圆角边框、浅红背景、文字颜色为深红
- 添加过渡动画让提示出现更自然
- 使用绝对定位将提示靠近输入框下方
示例CSS代码：
.error-tip {
display: none;
background: #fee;
color: #c30;
padding: 6px 10px;
border: 1px solid #ebb;
border-radius: 4px;
font-size: 14px;
margin-top: 4px;
animation: fadeIn 0.3s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
结合JavaScript动态控制提示显示
通过监听输入框的blur或submit事件，判断输入合法性，并动态显示或隐藏提示信息。
立即学习“前端免费学习笔记（深入）”；
示例JS逻辑：
const emailInput = document.getElementById('email');
const emailTip = document.getElementById('email-error');
emailInput.addEventListener('blur', () => {
if (!emailInput.value.includes('@')) {
emailTip.style.display = 'block';
} else {
emailTip.style.display = 'none';
}
});
图标与文字结合提升可读性
在提示信息前加入小图标（如警告符号⚠️），能更快引起用户注意。
- 使用Font Awesome或系统emoji作为图标
- 图标与文字之间留出适当间距
- 移动端注意字体大小适配屏幕
例如：
<span class="error-tip"> ⚠️ 邮箱格式不正确 </span>
基本上就这些。关键在于用CSS打造柔和、清晰的视觉样式，再配合JavaScript实现精准控制，就能让原本机械的校验提示变得贴心又专业。不复杂但容易忽略细节。
