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

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

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

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

REGISTER

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

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

燕雀Logo

为用户提供LOGO免费设计在线生成服务

下载

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

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

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