如何使用 JavaScript 实现表单验证并动态切换输入框的 CSS 状态_技术教程

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

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

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

同时建议优化 HTML 结构，使用语义化

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

靠：

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

HTML（index.html）


  
    Student Form
    
      User Name
      
      
      
      Please enter a user name

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");
}