# 表单验证

URL: https://caijiao.org/jquery/08-projects/02-validation
Source: docs/jquery/08-projects/02-validation.md
Description: 本文介绍如何使用 jQuery 实现表单验证功能，包括必填校验、格式校验、错误提示等，帮助开发者构建更友好和安全的用户输入体验。

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

## 验证目标

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

## 示例表单结构

```html
<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 验证逻辑

```js
$(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);
  });
});
```

## 提示样式建议

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

## 完整示例代码

[在线代码演示](/jquery/demos/27.html)