jQuery表单验证教程：使用jQuery验证插件的简单示例

本教程演示如何使用注册表单设置简单的表单验证示例。

我们将使用jQuery验证插件验证HTML表单。该插件的基本功能是通过JavaScript代码为HTML元素指定验证逻辑和错误消息。

以下是即将构建的jQuery表单验证实时演示：

参见CodePen上的jQuery表单验证 by SitePoint (@SitePoint)。

关键要点

首先在HTML代码中包含jQuery库以设置基础表单验证。可通过官网下载、使用Bower/npm包管理器或CDN引入
引入jQuery后添加验证插件，该插件允许通过JavaScript指定验证逻辑和错误消息
创建CSS文件美化表单，在JS文件中初始化验证逻辑，定义各字段的验证规则和消息
注意：客户端验证不能替代服务器端验证，恶意用户仍可能绕过验证规则
探索自定义验证方法、实时验证和远程验证等进阶技术
遵循安全最佳实践，结合客户端和服务器端验证防护恶意输入

理解表单验证方法

在深入实现前，先比较手动验证和jQuery验证插件方法的优势：

jQuery插件方法提供以下优势：

内置验证方法
自动错误处理
跨表单一致性行为
易于定制
更好的代码组织
内置可访问性功能

实现步骤

步骤1：引入jQuery

首先引入jQuery库（当前最新版本3.7.1），可通过以下方式获取：

从jquery.com下载
使用Bower：bower install jquery
使用npm/yarn：npm install jquery 或 yarn add jquery
使用CDN版本

在HTML文件底部</body>前添加：

1

<script src="vendor/jquery/dist/jquery.min.js"></script>

步骤2：引入jQuery验证插件

扩展jQuery功能的内置验证方法，获取方式：

GitHub仓库下载
Bower：bower install jquery-validation
npm：npm i jquery-validation
NuGet：Install-Package jQuery.Validation
CDN版本

在jQuery后引入插件：

1

<script src="vendor/jquery-validation/dist/jquery.validate.min.js"></script>

步骤3：创建HTML文件

创建包含以下字段的注册表单：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


<div class="container">
  <h2>Registration</h2>
  <form action="" name="registration">
    <label for="firstname">First Name</label>
    <input type="text" name="firstname" id="firstname" placeholder="John"/>

    <label for="lastname">Last Name</label>
    <input type="text" name="lastname" id="lastname" placeholder="Doe"/>

    <label for="email">Email</label>
    <input type="email" name="email" id="email" placeholder="john@doe.com"/>

    <label for="password">Password</label>
    <input type="password" name="password" id="password" placeholder="•••••"/>

    <button type="submit">Register</button>
  </form>
</div>

步骤4：创建表单样式

创建css/style.css并在HTML头部引入：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52


@import url("https://fonts.googleapis.com/css?family=Open+Sans");

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Open Sans";
  font-size: 14px;
}

.container {
  width: 500px;
  margin: 25px auto;
}

form {
  padding: 20px;
  background: #2c3e50;
  color: #fff;
  border-radius: 4px;
}

form label,
form input,
form button {
  border: 0;
  margin-bottom: 3px;
  display: block;
  width: 100%;
}

form input {
  height: 25px;
  line-height: 25px;
  padding: 0 6px;
  box-sizing: border-box;
}

form button {
  height: 30px;
  line-height: 30px;
  background: #e67e22;
  color: #fff;
  margin-top: 10px;
  cursor: pointer;
}

form .error {
  color: #ff0000;
}

步骤5：创建验证逻辑

创建js/form-validation.js并在验证插件后引用：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


$(function() {
  $("form[name='registration']").validate({
    rules: {
      firstname: "required",
      lastname: "required",
      email: {
        required: true,
        email: true
      },
      password: {
        required: true,
        minlength: 5
      }
    },
    messages: {
      firstname: "Please enter your firstname",
      lastname: "Please enter your lastname",
      password: {
        required: "Please provide a password",
        minlength: "Your password must be at least 5 characters long"
      },
      email: "Please enter a valid email address"
    },
    submitHandler: function(form) {
      form.submit();
    }
  });
});

高级验证技术

1. 自定义验证方法

使用$.validator.addMethod创建内置验证未覆盖的规则：

1
2
3


$.validator.addMethod("username", function(value, element) {
  return this.optional(element) || /^[a-zA-Z0-9]{3,20}$/.test(value);
}, "Username must be 3-20 alphanumeric characters.");

2. 实时验证

使用事件监听器触发验证：

1
2
3
4
5
6
7


$("form[name='registration']").validate({
  onkeyup: function(element) {
    setTimeout(() => {
      this.element(element);
    }, 300); // 防抖优化
  }
});

3. 异步（远程）验证

使用remote方法验证服务器端数据：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


rules: {
  username: {
    required: true,
    remote: {
      url: "/check-username",
      type: "post",
      data: {
        username: function() {
          return $("#username").val();
        }
      }
    }
  }
}

4. 条件验证

根据表单状态动态设置规则：

1
2
3
4
5
6
7


rules: {
  address: {
    required: function(element) {
      return $("#shipping").is(":checked");
    }
  }
}

5. 增强用户体验

自定义错误消息位置：

1
2
3


errorPlacement: function(error, element) {
  error.appendTo(element.parent().find(".error-container"));
}

国际化支持：

1
2
3


function loadLanguage(lang) {
  $.getScript("js/localization/messages_" + lang + ".js");
}

6. 安全最佳实践

验证前清理危险字符
结合客户端和服务器端验证

7. 常见问题解决方案

动态添加字段验证：

1
2
3
4
5
6


$("#add-field").click(function() {
  $("#new-field").rules("add", {
    required: true,
    email: true
  });
});

防止重复提交：

1
2
3
4


submitHandler: function(form) {
  $("#submit-button").prop("disabled", true);
  form.submit();
}

8. 可访问性增强

使用ARIA属性（aria-invalid、aria-describedby）
确保错误信息可被屏幕阅读器正确播报

结论

完成！现在您已了解如何使用jQuery设置表单验证。请记住这不能替代服务器端验证，恶意用户仍可能绕过验证约束（例如使用浏览器开发者工具）。

常见问题解答

什么是jQuery表单验证？
确保用户输入在提交到服务器前符合特定标准，防止处理不正确或不完整的数据。

为什么表单验证重要？
确保数据准确性，防止错误，改善用户体验。验证有助于维护数据完整性，减少错误或恶意数据导致的问题。

如何使用jQuery执行表单验证？
使用插件验证数据或编写自定义jQuery代码。插件通过提供预构建验证逻辑和错误消息简化过程。

有哪些标准验证约束？
包括必填字段检查、有效邮箱验证、数值验证和密码复杂度检查。jQuery验证插件提供内置规则。

可以创建自定义验证约束吗？
可以，使用jQuery验证插件定义新的验证方法，指定检查特定模式或值的行为。

如何初始化验证？
通常在表单元素上调用.validate()方法初始化，插件提供此方法并设置验证规则和行为。

验证失败会发生什么？
插件将阻止表单提交并在对应输入字段旁显示错误消息，为用户提供需要修正的反馈。

如何自定义错误消息？
插件允许为特定验证规则自定义错误消息，可以在每个输入字段的验证设置中定义。

可以不使用验证插件吗？
可以，使用自定义jQuery代码手动检查表单输入并显示错误消息。

有其他替代插件吗？
有其他验证库如Parsley.js和Formik（React应用）。HTML5也引入了内置表单验证属性和约束。

可以使用AJAX验证吗？
可以，使用AJAX进行实时验证或异步提交表单数据，通过减少页面重载增强用户体验。

验证仅限于客户端吗？
验证可在客户端和服务器端执行。客户端验证改善用户体验，服务器端验证防止恶意或不正确数据到达服务器。

验证通过后如何处理提交？
使用插件时，验证通过会自动处理提交。使用自定义验证时，可手动提交表单。

可以与其他JS框架一起使用吗？
可以，但需注意潜在冲突或兼容性问题，确保适当集成验证逻辑。

如何高效实现实时验证？
使用防抖技术增强性能，“onkeyup"方法用于防抖输入验证。

可以异步验证数据吗？
可以，jQuery验证支持异步验证，如检查用户名是否已被使用，通过后台API调用并根据服务器响应显示反馈。

作者：Maria Antonietta Perna
发布于JavaScript·jQuery·2025年1月6日

jQuery表单验证实战：快速上手验证插件与进阶技巧

本文详细讲解如何使用jQuery Validation插件实现表单验证，包含基础配置、自定义验证规则、实时验证等进阶技术，并强调客户端与服务器端验证结合的安全实践。