表单验证

表单验证是确保用户输入合法性的重要步骤，借助 jQuery 可以方便地实现实时校验和提示反馈。

验证目标

• 检查必填项是否为空
• 校验邮箱、手机号等格式
• 实时提示输入错误
• 阻止非法数据提交

示例表单结构

<form id="myForm">
  <label>
    用户名：
    <input type="text" name="username" />
  </label>
  <label>
    邮箱：
    <input type="email" name="email" />
  </label>
  <label>
    手机号：
    <input type="text" name="phone" />
  </label>
  <button type="submit">提交</button>
  <p id="msg" style="color: red; margin-top: 10px;"></p>
</form>

jQuery 验证逻辑

$(function () {
  $("#myForm").submit(function (e) {
    e.preventDefault();

    const username = $("input[name='username']").val().trim();
    const email = $("input[name='email']").val().trim();
    const phone = $("input[name='phone']").val().trim();
    const $msg = $("#msg");

    if (!username) {
      $msg.text("用户名不能为空");
      return;
    }

    if (!/^\w+@\w+\.\w+$/.test(email)) {
      $msg.text("邮箱格式不正确");
      return;
    }

    if (!/^1\d{10}$/.test(phone)) {
      $msg.text("手机号格式错误，应为11位数字");
      return;
    }

    $msg.css("color", "green").text("验证通过，正在提交...");
    // 模拟提交
    setTimeout(() => {
      $msg.text("提交成功！");
    }, 1000);
  });
});

提示样式建议

• 利用颜色提示错误或成功
• 鼠标聚焦时清空提示
• 错误信息放在表单下方或输入框旁边

完整示例代码

loading