如何使用 JavaScript 实现表单输入验证并动态显示 CSS 样式反馈-html教程-PHP中文网

本文详解如何通过原生 JavaScript 实现用户名必填校验，并在提交时实时切换输入框的边框颜色、图标状态及错误提示，关键在于将按钮类型由 button 改为 submit 以触发表单事件。

本文详解如何通过原生 javascript 实现用户名必填校验，并在提交时实时切换输入框的边框颜色、图标状态及错误提示，关键在于将按钮类型由 `button` 改为 `submit` 以触发表单事件。

在前端表单交互中，良好的实时验证体验不仅能提升用户友好度，还能有效降低后端无效请求压力。本文以一个精简但完整的“用户名必填”验证场景为例，演示如何结合 HTML 结构、CSS 样式控制与 JavaScript 逻辑，实现输入校验 → 状态反馈 → 视觉响应的一体化流程。

✅ 核心要点：type="submit" 是触发验证的前提

原代码中注册按钮使用了，该类型不会触发表单的 submit 事件，因此 form2.addEventListener("submit", ...) 始终无法执行。必须将其改为 type="submit"，才能让 e.preventDefault() 和后续的 validateInputs() 正常运行。

✅ 正确写法（修改 index.html）：

<input type="submit" id="submit" value="REGISTER">

⚠️ 注意：仅是普通按钮，无表单语义；而 type="submit" 属于表单控件，点击时会默认触发

的 submit 事件——这是整个验证流程的起点。

? 完整可运行示例

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>
    <input type="submit" id="submit" value="REGISTER">
</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 ease;
}
.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: 13px;
  margin-top: 4px;
  visibility: hidden;
}
.text-box.error small {
  visibility: visible;
}
#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");
}

? 补充说明与最佳实践

语义化优先：使用不仅修复功能，也符合 HTML 表单规范，利于可访问性（如屏幕阅读器识别）和 SEO。
样式解耦建议：.text-box.success 和 .text-box.error 类名清晰表达了状态，便于后期扩展其他字段（如邮箱、密码），只需复用相同逻辑结构。
增强健壮性（进阶）：可增加 blur 事件监听，实现「失焦即时校验」；也可引入正则表达式对用户名格式（如长度、字符限制）做进一步约束。

图标依赖 Font Awesome：确保已在 HTML 中引入：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

通过以上调整，用户点击 REGISTER 按钮后，系统将立即判断输入是否为空，并精准切换绿色成功态（带对勾图标 + 无错误文本）或红色错误态（带感叹号 + 提示文字），真正实现「所见即所得」的验证反馈体验。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南