表单验证 用户信息登记 JQuery实现用户提交登记信息的验证代码片段

📝 表单验证 | 用户信息登记 JQuery实现用户提交登记信息的验证代码片段

2025年8月最新消息：随着Web开发技术的不断演进，表单验证仍然是提升用户体验的关键环节，据统计，2025年仍有超过30%的用户因表单填写错误而放弃提交，因此高效的前端验证机制比以往更加重要！🔥

本文将使用 JQuery 实现一个用户信息登记表单的验证功能，确保用户提交的数据合法有效，同时提供友好的错误提示。

🎯 功能需求

我们需要验证以下字段：
✅ 姓名（必填，仅允许中文或英文）
✅ 邮箱（必填，符合标准邮箱格式）
✅ 手机号（必填，11位数字）
✅ 密码（必填，6-16位，包含字母和数字）
✅ 确认密码（与密码一致）

🛠️ HTML 表单结构

<form id="userForm">
  <div class="form-group">
    <label for="name">姓名</label>
    <input type="text" id="name" name="name" placeholder="请输入姓名">
    <span class="error-msg"></span>
  </div>
  <div class="form-group">
    <label for="email">邮箱</label>
    <input type="text" id="email" name="email" placeholder="example@domain.com">
    <span class="error-msg"></span>
  </div>
  <div class="form-group">
    <label for="phone">手机号</label>
    <input type="text" id="phone" name="phone" placeholder="11位手机号">
    <span class="error-msg"></span>
  </div>
  <div class="form-group">
    <label for="password">密码</label>
    <input type="password" id="password" name="password" placeholder="6-16位字母+数字">
    <span class="error-msg"></span>
  </div>
  <div class="form-group">
    <label for="confirmPwd">确认密码</label>
    <input type="password" id="confirmPwd" name="confirmPwd" placeholder="再次输入密码">
    <span class="error-msg"></span>
  </div>
  <button type="submit" id="submitBtn">提交登记</button>
</form>

🔍 JQuery 验证逻辑

$(document).ready(function() {
  // 提交表单时验证
  $("#userForm").submit(function(e) {
    e.preventDefault(); // 阻止默认提交
    let isValid = true;
    // 验证姓名（仅中文或英文）
    const name = $("#name").val().trim();
    if (!name) {
      showError("#name", "姓名不能为空！");
      isValid = false;
    } else if (!/^[\u4e00-\u9fa5a-zA-Z]+$/.test(name)) {
      showError("#name", "仅允许中文或英文！");
      isValid = false;
    } else {
      clearError("#name");
    }
    // 验证邮箱
    const email = $("#email").val().trim();
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!email) {
      showError("#email", "邮箱不能为空！");
      isValid = false;
    } else if (!emailRegex.test(email)) {
      showError("#email", "请输入有效的邮箱！");
      isValid = false;
    } else {
      clearError("#email");
    }
    // 验证手机号（11位数字）
    const phone = $("#phone").val().trim();
    if (!phone) {
      showError("#phone", "手机号不能为空！");
      isValid = false;
    } else if (!/^\d{11}$/.test(phone)) {
      showError("#phone", "请输入11位手机号！");
      isValid = false;
    } else {
      clearError("#phone");
    }
    // 验证密码（6-16位，字母+数字）
    const password = $("#password").val().trim();
    if (!password) {
      showError("#password", "密码不能为空！");
      isValid = false;
    } else if (!/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,16}$/.test(password)) {
      showError("#password", "6-16位，需包含字母和数字！");
      isValid = false;
    } else {
      clearError("#password");
    }
    // 验证确认密码
    const confirmPwd = $("#confirmPwd").val().trim();
    if (confirmPwd !== password) {
      showError("#confirmPwd", "两次密码不一致！");
      isValid = false;
    } else {
      clearError("#confirmPwd");
    }
    // 全部验证通过，提交表单
    if (isValid) {
      alert("✅ 表单验证通过，即将提交！");
      // 这里可以发送Ajax请求或直接提交
      // this.submit();
    }
  });
  // 显示错误信息
  function showError(selector, msg) {
    $(selector).next(".error-msg").text(msg).css("color", "red");
  }
  // 清除错误信息
  function clearError(selector) {
    $(selector).next(".error-msg").text("");
  }
});

🎨 优化体验（可选）

1. 实时验证：可以在输入时即时校验，而非提交时才提示。

   $("#name").on("input", function() {
     const name = $(this).val().trim();
     if (!/^[\u4e00-\u9fa5a-zA-Z]+$/.test(name)) {
       showError("#name", "仅允许中文或英文！");
     } else {
       clearError("#name");
     }
   });

2. 样式优化：错误时高亮输入框边框。

   input.error {
     border: 1px solid red;
   }

   function showError(selector, msg) {
     $(selector).addClass("error");
     $(selector).next(".error-msg").text(msg).css("color", "red");
   }

通过 JQuery 实现表单验证，可以有效减少无效提交，提升用户体验，本文提供的代码可直接集成到项目中，也可根据需求扩展更多验证规则（如身份证、地址等）。

💡 小贴士：2025年的前端趋势显示，越来越多的开发者转向 Vue/React 进行表单管理，但 JQuery 仍在小项目和旧系统中广泛使用，掌握它依然很有价值！

试试这段代码,让你的表单更智能吧！🚀