使用 jQuery 进行表单验证
阅读：42
点赞：0
在现代网页开发中，表单验证是确保用户输入有效性的重要步骤。jQuery 是一个流行的 JavaScript 库，它提供了一种简单而强大的方式来实现表单验证。在这篇文章中，我们将探讨如何使用 jQuery 来验证一个简单的表单。
一. 介绍
jQuery 简化了 JavaScript 编程，使得文档导航、DOM 元素选择、动画创建和事件处理变得更加容易。对于表单验证，jQuery 提供了一个名为 jQuery Validation 的插件，该插件提供了强大而灵活的验证机制。
二. 环境准备
在开始之前，请确保在项目中包含了 jQuery 和 jQuery Validation 插件。您可以通过 CDN 引入这些库，如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用 jQuery 进行表单验证</title>
<!-- 引入 Bootstrap 样式 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- 引入 jQuery 库 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 引入 jQuery Validation 插件 -->
<script src="https://cdn.jsdelivr.net/jquery.validation/1.19.3/jquery.validate.min.js"></script>
</head>
<body>
<div class="container">
<!-- 表单代码将在这里 -->
</div>
</body>
</html>
1. 引入 Bootstrap 样式
-
通过 CDN 引入 Bootstrap 的 CSS 文件，以便为表单提供样式支持。
2. 引入 jQuery 库
-
通过 CDN 引入 jQuery 库，这样我们就可以使用 jQuery 的功能了。
3. 引入 jQuery Validation 插件
-
通过 CDN 引入 jQuery Validation 插件，它提供了表单验证的功能。
三. HTML 表单
接下来，我们创建一个简单的 HTML 表单。我们将使用 Bootstrap 进行样式设置。
<div class="card-body">
<form id="myForm">
<!-- 邮箱输入框 -->
<div class="form-group">
<label for="exampleInputEmail1">电子邮件地址</label>
<input type="email" name="email" class="form-control" id="exampleInputEmail1" placeholder="输入邮箱" required>
</div>
<!-- 密码输入框 -->
<div class="form-group">
<label for="exampleInputPassword1">密码</label>
<input type="password" name="password" class="form-control" id="exampleInputPassword1" placeholder="密码" required>
</div>
<!-- 复选框 -->
<div class="form-group mb-0">
<div class="custom-control custom-checkbox">
<input type="checkbox" name="terms" class="custom-control-input" id="exampleCheck1" required>
<label class="custom-control-label" for="exampleCheck1">我同意 <a href="#">服务条款</a></label>
</div>
</div>
<!-- 提交按钮 -->
<button type="submit" class="btn btn-primary mt-3">提交</button>
</form>
</div>
1. 邮箱输入框
-
type="email": 指定输入框的类型为邮箱，浏览器会自动验证输入的格式。 -
required: 表示这个字段是必填的。
2. 密码输入框
-
type="password": 指定输入框的类型为密码，输入的内容会被隐藏。 -
required: 表示这个字段是必填的。
3. 复选框
-
type="checkbox": 复选框输入类型。 -
required: 表示用户必须勾选复选框。
4. 提交按钮
-
type="submit": 提交表单的按钮。
四. jQuery 验证
现在，我们将添加 jQuery 代码来验证这个表单。jQuery Validation 插件使得设置验证规则和消息变得非常简单。
<script>
$(document).ready(function () {
$("#myForm").validate({
rules: {
email: {
required: true, // 电子邮件地址是必填的
email: true // 必须是有效的电子邮件地址
},
password: {
required: true, // 密码是必填的
minlength: 5 // 密码长度至少为 5 个字符
},
terms: {
required: true // 复选框是必填的
}
},
messages: {
email: {
required: "请输入您的电子邮件地址", // 当邮箱字段为空时显示的错误消息
email: "请输入有效的电子邮件地址" // 当邮箱格式不正确时显示的错误消息
},
password: {
required: "请提供一个密码", // 当密码字段为空时显示的错误消息
minlength: "您的密码必须至少包含 5 个字符" // 当密码长度不足时显示的错误消息
},
terms: {
required: "请接受我们的服务条款" // 当复选框未勾选时显示的错误消息
}
},
errorElement: "div", // 错误信息的 HTML 元素
errorPlacement: function (error, element) {
error.addClass("invalid-feedback");
if (element.prop("type") === "checkbox") {
error.insertAfter(element.next("label")); // 将错误信息插入到复选框后面
} else {
error.insertAfter(element); // 将错误信息插入到输入框后面
}
},
highlight: function (element) {
$(element).addClass("is-invalid").removeClass("is-valid"); // 高亮显示无效字段
},
unhighlight: function (element) {
$(element).addClass("is-valid").removeClass("is-invalid"); // 高亮显示有效字段
}
});
});
</script>
1. 验证规则
-
rules: 定义每个表单字段的验证规则，例如电子邮件字段必须是有效的电子邮件地址，密码字段必须至少包含 5 个字符，复选框字段是必填的。
2. 错误消息
-
messages: 自定义显示的错误消息，例如，当电子邮件字段为空时显示的提示信息。
3. 错误元素
-
errorElement: 指定用于显示错误信息的 HTML 元素，这里我们使用div元素。
4. 错误放置
-
errorPlacement: 定义错误消息放置的位置，对于复选框，将错误信息插入到复选框的标签后面，对于其他输入框，则插入到输入框后面。
5. 高亮显示
-
highlight: 当字段无效时，添加is-invalid类并移除is-valid类。
6. 去除高亮
-
unhighlight: 当字段有效时，添加is-valid类并移除is-invalid类。
五. 结论
使用 jQuery 进行表单验证可以增强用户体验，通过提供即时的输入错误反馈，确保用户输入的数据在提交前经过验证。jQuery Validation 插件提供了一种简单而强大的方式来添加验证规则和自定义错误消息，使其成为任何网页开发人员的重要工具。
通过本文所述的步骤，您可以在 Web 应用程序中实现强大的表单验证功能，从而提高数据完整性并提供更友好的用户体验。