本文详解如何通过 javascript 实现用户名必填校验，并在提交时动态为输入框添加 success/error 样式类，配合 css 控制边框颜色、图标显隐及错误提示显示。
要让表单验证逻辑真正触发并实现你期望的视觉反馈（绿色边框+对勾图标 / 红色边框+叹号图标+错误文字），最关键的前提是：注册按钮必须是 type="submit"，而非 type="button"。当前代码中 不会触发表单的 submit 事件，因此 form2.addEventListener("submit", ...) 始终不会执行，整个验证流程被完全绕过。
✅ 正确做法是将按钮改为：
<input type="submit" id="submit" value="REGISTER">
同时建议优化 HTML 结构，使用语义化
<button type="submit" id="submit">REGISTER</button>
此外，还需注意以下几点以确保功能完整可靠：
立即学习“Java免费学习笔记（深入）”；
✅ 完整可运行示例（精简整合版）
HTML（index.html）
<section class="formContainer">
<form class="form" id="form">
<h1>Student Form</h1>
<div class="text-box">
<label for="userName">User Name</label>
<input type="text" id="userName" name="userName" required>
<i class="fas fa-circle-check"></i>
<i class="fas fa-circle-exclamation"></i>
<small>Please enter a user name</small>
</div>
<button type="submit" id="submit">REGISTER</button>
</form>
</section>CSS（style.css）
.text-box {
padding-bottom: 10px;
position: relative;
}
.text-box input {
width: 70%;
display: block;
margin-left: 60px;
font-size: 16px;
margin-top: 5px;
padding: 10px;
border-radius: 6px;
border: 1px solid #ccc;
transition: border-color 0.2s;
}
.text-box input:focus {
outline: none;
border-color: #ee56ee;
}
.text-box.success input {
border-color: #03650a;
}
.text-box.error input {
border-color: #cd1404;
}
.text-box i {
visibility: hidden;
position: absolute;
top: 40px;
right: 90px;
font-size: 14px;
}
.text-box.success i.fa-circle-check {
visibility: visible;
color: #03650a;
}
.text-box.error i.fa-circle-exclamation {
visibility: visible;
color: #cd1404;
}
.text-box small {
color: #cd1404;
position: absolute;
left: 0;
bottom: 0;
font-size: 12px;
margin-top: 4px;
}
.text-box.error small {
visibility: visible;
}
.text-box.success small {
visibility: hidden;
}
#submit {
background-color: burlywood;
color: white;
border: 1px solid black;
border-radius: 5px;
padding: 10px 20px;
cursor: pointer;
font-size: 18px;
margin-left: 320px;
margin-top: 10px;
}JavaScript（app.js）
const form = document.getElementById("form");
const userNameInput = document.getElementById("userName");
form.addEventListener("submit", (e) => {
e.preventDefault(); // 阻止默认提交行为
validateInputs();
});
function validateInputs() {
const userNameVal = userNameInput.value.trim();
if (userNameVal === "") {
setError(userNameInput, "User name is required");
} else {
setSuccess(userNameInput);
}
}
function setError(element, message) {
const inputGroup = element.parentElement;
const errorElement = inputGroup.querySelector("small");
errorElement.textContent = message;
inputGroup.classList.add("error");
inputGroup.classList.remove("success");
}
function setSuccess(element) {
const inputGroup = element.parentElement;
const errorElement = inputGroup.querySelector("small");
errorElement.textContent = "";
inputGroup.classList.add("success");
inputGroup.classList.remove("error");
}⚠️ 注意事项与最佳实践
- required 属性增强健壮性：为 添加 required 属性，可启用浏览器原生校验（作为兜底），但自定义样式仍需 JS 控制。
- 避免重复 class 切换：classList.add() 和 classList.remove() 已足够，无需手动判断是否存在再操作。
- 图标库依赖：确保已引入 Font Awesome（如 cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">），否则图标不显示。
- 用户体验优化：可进一步添加 input 实时监听（input 或 blur 事件）实现即时反馈，而非仅依赖提交动作。
通过以上修正，点击 REGISTER 按钮后，系统将准确识别空值状态，动态切换 .text-box 的 success/error 类，从而驱动 CSS 渲染出预期的颜色、图标与提示文案——真正实现“所见即所验”的交互体验。
