本文详解如何通过 javascript 实现用户名必填校验，并在提交时动态为输入框添加 success/Error 样式类，配合 css 控制边框颜色、图标显隐及错误提示显示。

要让表单验证逻辑真正触发并实现你期望的视觉反馈（绿色边框+对勾图标 / 红色边框+叹号图标+错误文字），最关键的前提是：注册按钮必须是 type=”submit”，而非 type=”button”。当前代码中 不会触发表单的 submit 事件，因此 form2.addEventListener(“submit”, …) 始终不会执行，整个验证流程被完全绕过。

✅ 正确做法是将按钮改为：

同时建议优化 html 结构，使用语义化 替代 ，更易维护：

register

此外，还需注意以下几点以确保功能完整可靠：

立即学习“Java免费学习笔记（深入）”；

✅ 完整可运行示例（精简整合版）

HTML（index.html）

   
     
Student Form
     
       User Name                            Please enter a user name     
     REGISTER   
 

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（如 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css”>），否则图标不显示。
• 用户体验优化：可进一步添加 input 实时监听（input 或 blur 事件）实现即时反馈，而非仅依赖提交动作。

通过以上修正，点击 REGISTER 按钮后，系统将准确识别空值状态，动态切换 .text-box 的 success/error 类，从而驱动 CSS 渲染出预期的颜色、图标与提示文案——真正实现“所见即所验”的交互体验。