首页 > 文章 > 前端

JavaScript 表单验证：实时校验与样式控制

时间：2026-04-04 20:18:32 463浏览收藏

✅ 核心修复：type="button" → type="submit"

你原始代码中注册按钮使用的是，这会导致 form.addEventListener("submit", ...) 事件完全不会触发——因为只有 type="submit" 的按钮（或回车提交）才会触发表单的 submit 事件。这是问题的根本原因。请立即修改 HTML 中按钮为：

⚠️ 注意：type="submit" 会默认提交表单并刷新页面，因此我们需在 JS 中调用 e.preventDefault() 阻止默认行为——你已正确写出该行，只需确保事件能被触发即可。

✅ 完整可运行代码整合

HTML（index.html）




  
  学生注册表单
  
  


  
    
      学生注册表单
      
        用户名
        
        
        
        请输入用户名

JavaScript（app.js）——增强健壮性与可读性

document.addEventListener('DOMContentLoaded', () => {
  const form = document.getElementById('form');
  const userNameInput = document.getElementById('userName');

  form.addEventListener('submit', (e) => {
    e.preventDefault(); // 阻止页面刷新
    validateInputs();
  });

  function validateInputs() {
    const value = userNameInput.value.trim();

    if (value === '') {
      setError(userNameInput, '用户名不能为空');
    } else {
      setSuccess(userNameInput);
    }
  }

  function setError(element, message) {
    const inputGroup = element.parentElement;
    const errorElement = inputGroup.querySelector('small');

    errorElement.textContent = message;
    inputGroup.classList.remove('success');
    inputGroup.classList.add('error');
  }

  function setSuccess(element) {
    const inputGroup = element.parentElement;
    const errorElement = inputGroup.querySelector('small');

    errorElement.textContent = '';
    inputGroup.classList.remove('error');
    inputGroup.classList.add('success');
  }
});

CSS（style.css）——精准控制状态视觉反馈

.formContainer {
  max-width: 600px;
  margin: 40px auto;
  padding: 0 20px;
}

.form h1 {
  text-align: center;
  color: #333;
}

.text-box {
  position: relative;
  margin-bottom: 24px;
}

.text-box label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: #444;
}

.text-box input {
  width: 100%;
  padding: 12px 16px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.text-box input:focus {
  outline: none;
  border-color: #ee56ee;
  box-shadow: 0 0 0 3px rgba(238, 86, 238, 0.2);
}

/* 成功状态 */
.text-box.success input {
  border-color: #03650a;
}
.text-box.success i.fa-circle-check {
  visibility: visible;
  color: #03650a;
}

/* 错误状态 */
.text-box.error input {
  border-color: #cd1404;
}
.text-box.error i.fa-circle-exclamation {
  visibility: visible;
  color: #cd1404;
}

.text-box i {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  visibility: hidden;
  font-size: 18px;
}

.text-box small {
  position: absolute;
  left: 0;
  bottom: -24px;
  font-size: 14px;
  color: #cd1404;
  visibility: hidden;
}

.text-box.error small {
  visibility: visible;
}

#submit {
  width: 100%;
  padding: 12px;
  background-color: #d2b48c;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
}

#submit:hover:not(:disabled) {
  background-color: #c19a6b;
}

#submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

? 关键要点总结

✅ 事件绑定前提：必须使用 type="submit" 触发 submit 事件，button 类型无此能力；
✅ DOM 就绪：JS 代码包裹在 DOMContentLoaded 中，确保元素加载完成后再执行；
✅ CSS 状态解耦：.success / .error 类统一控制输入框、图标、提示文本的显隐与样式，便于维护与复用；
✅ 用户体验优化：添加 transition 实现平滑颜色过渡；focus 样式提升可访问性；图标居中对齐更美观；
✅ 可扩展设计：后续如需增加邮箱、密码等字段，只需复用 setError/setSuccess，并扩展 validateInputs() 逻辑即可。

通过以上实现，你将获得一个符合现代 Web 标准、视觉反馈明确、逻辑清晰可靠的表单验证模块——无需框架，纯原生，即学即用。

以上就是《JavaScript 表单验证：实时校验与样式控制》的详细内容，更多关于的资料请关注golang学习网公众号！