JavaScript表单输入验证简单代码示例

在网页开发中，表单输入验证的核心任务是确保用户提交的数据符合既定格式，并在发现格式不符时及时在页面上给出清晰提示，避免无效数据发往服务器。本文通过一套开箱即用的原生 JavaScript 简单代码示例，讲解如何拦截表单提交、检查输入内容、展示错误提示以及在输入合格后放行提交。

一、表单验证的基本原理与执行时序

浏览器在用户点击提交按钮时，默认会尝试把表单打包发送给指定地址并刷新页面。前端验证的第一步，就是通过 event.preventDefault() 拦截这个默认行为，使页面停留在当前状态，留出检查输入内容的时间窗口。随后，代码逐项读取表单元素的值并判断规则：如果所有规则均通过，则执行后续提交逻辑；若有任何一项不合规，则将对应的错误提示呈现给用户，并将光标引导至首个出错的输入框中。

二、最简基础示例：单输入框非空验证

初学者可以先从一个最简单的“用户名非空验证”开始理解代码构成。该示例包含一个表单、一个输入框、一段用于展示错误文案的标签以及提交按钮。

1. 完整代码（HTML + CSS + JS）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>简单表单验证示例</title>
  <style>
    .form-group {
      margin-bottom: 15px;
    }
    .form-group label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
    }
    .form-group input {
      width: 260px;
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
    .form-group input.error-border {
      border-color: #d9534f;
    }
    .error-msg {
      color: #d9534f;
      font-size: 13px;
      margin-top: 4px;
      display: none;
    }
    .error-msg.show {
      display: block;
    }
    button {
      padding: 8px 16px;
      background-color: #456581;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
  </style>
</head>
<body>

  <form id="userForm" novalidate>
    <div class="form-group">
      <label for="username">用户名：</label>
      <input type="text" id="username" placeholder="请输入用户名">
      <div id="usernameError" class="error-msg">用户名不能为空</div>
    </div>
    <button type="submit">提交</button>
  </form>

  <script>
    const form = document.getElementById('userForm');
    const usernameInput = document.getElementById('username');
    const usernameError = document.getElementById('usernameError');

    form.addEventListener('submit', function(event) {
      // 1. 阻止表单默认提交行为
      event.preventDefault();

      // 2. 获取输入值并去除首尾空白字符
      const value = usernameInput.value.trim();

      // 3. 校验规则判定
      if (value === '') {
        // 显示错误信息与红色边框
        usernameError.classList.add('show');
        usernameInput.classList.add('error-border');
        usernameInput.focus();
      } else {
        // 清除错误信息与红色边框
        usernameError.classList.remove('show');
        usernameInput.classList.remove('error-border');
        alert('验证通过，正在提交数据：' + value);
        // 此处可调用 form.submit() 或 fetch() 发送请求
      }
    });
  </script>
</body>
</html>

2. 代码关键点解析

• novalidate 属性：在 <form> 标签上添加该属性，可以关闭浏览器原生的简陋气泡提示，完全交由我们自定义的 JavaScript 逻辑控制。
• value.trim()：单纯判断 value === '' 会让连续敲击空格的用户绕过检查，因此必须先调用 trim() 过滤前后空白。
• focus()：在验证失败时立即调用该方法，将用户的光标和屏幕焦点引导至出错位置，显著提高交互体验。

三、DOM 结构与验证控制器的组织关系

在表单规模扩展时，把每个输入框、对应的错误显示容器和验证规则清晰地对应起来，是保持代码结构稳定的关键。下图展示了页面结构层与脚本逻辑控制层的对应架构：

四、多字段综合实战：邮箱格式与密码长度验证

实际场景中，表单通常包含多个字段，不同字段对应着不同的检验规则，例如：

• 用户名：非空且字符数在 3 到 16 之间。
• 电子邮箱：使用正则表达式检查是否包含合法的“@”与域名后缀。
• 密码：长度至少 6 位。

下面是一个封装了通用校验逻辑的模块化多字段示例：

<form id="signupForm" novalidate>
  <div class="form-item">
    <label>用户名</label>
    <input type="text" id="regUser">
    <span class="msg" id="regUserMsg"></span>
  </div>

  <div class="form-item">
    <label>邮箱</label>
    <input type="email" id="regEmail">
    <span class="msg" id="regEmailMsg"></span>
  </div>

  <div class="form-item">
    <label>密码</label>
    <input type="password" id="regPass">
    <span class="msg" id="regPassMsg"></span>
  </div>

  <button type="submit">注册</button>
</form>

<script>
  const signupForm = document.getElementById('signupForm');

  // 工具函数：设置错误状态
  function setError(inputElem, msgElem, message) {
    msgElem.textContent = message;
    msgElem.style.color = '#d9534f';
    inputElem.style.borderColor = '#d9534f';
  }

  // 工具函数：清除错误状态
  function clearError(inputElem, msgElem) {
    msgElem.textContent = '';
    inputElem.style.borderColor = '#ccc';
  }

  // 验证邮箱格式的正则表达式
  function isValidEmail(email) {
    const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return pattern.test(email);
  }

  signupForm.addEventListener('submit', function(e) {
    e.preventDefault();
    let hasError = false;

    // 1. 用户名校验
    const user = document.getElementById('regUser');
    const userMsg = document.getElementById('regUserMsg');
    const userVal = user.value.trim();
    if (userVal === '') {
      setError(user, userMsg, '用户名不能为空');
      hasError = true;
    } else if (userVal.length < 3 || userVal.length > 16) {
      setError(user, userMsg, '用户名长度须在3至16位之间');
      hasError = true;
    } else {
      clearError(user, userMsg);
    }

    // 2. 邮箱校验
    const email = document.getElementById('regEmail');
    const emailMsg = document.getElementById('regEmailMsg');
    const emailVal = email.value.trim();
    if (emailVal === '') {
      setError(email, emailMsg, '请输入邮箱地址');
      hasError = true;
    } else if (!isValidEmail(emailVal)) {
      setError(email, emailMsg, '请输入正确的邮箱格式');
      hasError = true;
    } else {
      clearError(email, emailMsg);
    }

    // 3. 密码校验
    const pass = document.getElementById('regPass');
    const passMsg = document.getElementById('regPassMsg');
    const passVal = pass.value;
    if (passVal.length < 6) {
      setError(pass, passMsg, '密码长度不能少于6位');
      hasError = true;
    } else {
      clearError(pass, passMsg);
    }

    // 4. 汇总判定
    if (!hasError) {
      alert('所有字段验证成功，准备提交！');
    }
  });
</script>

五、验证触发时机的选择：提交时验证 vs 即时失焦验证

在不同产品体验要求下，验证的时机通常分为两种：

• 提交时验证 (onsubmit)：用户填写完所有内容并点击提交时统一校验。优点是代码逻辑集中、开发量小；缺点是如果表单较长，用户点提交时可能面对成排的红色提示，打断填写节奏。
• 失焦验证 (onblur) / 输入即时验证 (oninput)：用户输入完毕切出输入框（blur）或者每次击键时（input）就进行局部校验。优点是反馈及时、纠错体验平滑；缺点是需要绑定更多事件并处理“过早报错引发用户烦躁”的问题。

在实际项目中，最推荐的做法是将两者结合：平时由 blur 事件在用户切出输入框后核对当前项，而在最终点击 submit 时再次做一次全局通检，以防用户跳过某些控件直接提交。

六、生产环境注意事项与关键原则

除了安全防线之外，日常编码还需要注意以下细节：

1. 及时清除错误状态：当用户重新聚焦或开始输入修改时，应当通过监听 input 事件即时消除红框和错误文案，避免已经改正后依然显示警告的不良感受。
2. 移动端软键盘适配：合理使用 type="email"、type="tel"、type="number" 等 HTML5 类型，虽然我们自定义验证规则，但这些属性能够提示移动端唤起数字键盘或带 @ 符号的键盘。
3. 密码不要用 trim()：用户名和邮箱应去除首尾空格，但密码一般允许用户包含特殊空格字符，对密码调用 trim() 可能会篡改用户的预期密码。