本教程展示如何使用注册表单设置简单的表单验证示例。
我们将使用 jQuery 验证插件 来验证 HTML 表单。此插件的基本功能是在 JavaScript 代码中指定 HTML 元素的验证逻辑和错误消息。
以下是我们将要构建的使用 jQuery 的 HTML 表单验证的现场演示：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>价格转换表</title>
<style>
@import url("https://fonts.googleapis.com/css?family=Open+Sans");
/* Styles */
* {
margin: 0;
padding: 0;
}
body {
font-family: "Open Sans";
font-size: 14px;
}
.container {
width: 500px;
margin: 25px auto;
}
.title {
margin-bottom: 1rem;
}
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;
background: #fff;
color: #000;
padding: 0 6px;
box-sizing: border-box;
}
form button {
height: 30px;
line-height: 30px;
background: #e67e22;
color: #fff;
text-transform: uppercase;
font-weight: bold;
margin-top: 1.5rem;
cursor: pointer;
}
form .error {
color: #ff0000;
}
.article-reference {
margin-top: 15px;
}
.article-reference a {
color: #e67e22;
}
</style>
</head>
<body>
<div class="container">
<h2 class="title">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>
<script>
// Wait for the DOM to be ready
$(function() {
// Initialize form validation on the registration form.
// It has the name attribute "registration"
$("form[name='registration']").validate({
// Specify validation rules
rules: {
// The key name on the left side is the name attribute
// of an input field. Validation rules are defined
// on the right side
firstname: "required",
lastname: "required",
email: {
required: true,
// Specify that email should be validated
// by the built-in "email" rule
email: true
},
password: {
required: true,
minlength: 5
}
},
// Specify validation error messages
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"
},
// Make sure the form is submitted to the destination defined
// in the "action" attribute of the form when valid
submitHandler: function(form) {
form.submit();
}
});
});
</script>
</body>
</html>关键要点：
首先，将 jQuery 库包含在 HTML 代码片段中，以便使用 jQuery 插件设置基本表单输入验证。您可以从官方网站下载它，使用 Bower 或 npm 等包管理器，或使用 CDN。
包含 jQuery 后，请包含 jQuery 数据验证插件。此插件允许您在 JavaScript 代码中指定 HTML 元素的验证逻辑和错误消息。例如，您可以创建一个带有用户信息输入字段的基本表单，并使用该插件来验证此信息。
要设置表单样式，请创建一个新的 CSS 文件并将其包含在 HTML 代码的 head 部分中。然后，在新的 JavaScript(JS) 文件中初始化表单提交时的 jQuery 验证，指定每个输入字段的验证规则和错误消息。
请记住，客户端验证不能取代服务器端验证，因为恶意用户仍然可以操纵或绕过验证规则。
探索先进的技术，例如自定义验证方法、实时验证和服务器端检查的远程验证。
遵循安全最佳实践，结合客户端和服务器端验证来防止恶意输入。
理解表单验证方法
在深入实现之前，让我们比较一下手动和 jQuery 数据验证插件的方法，以了解为什么验证插件脱颖而出：
总的来说，jQuery 插件方法有几个优点：
内置验证方法。
自动错误处理。
跨形式的一致行为。
轻松定制。
更好的代码组织。
内置辅助功能。
既然您现在已经对 JQuery 有了基本的了解，让我们开始构建一个简单的 jQuery 表单验证示例的步骤。以下步骤将让您清楚地了解如何在提交之前验证表单。
步骤 1：包含 jQuery
首先，我们需要包含 jQuery 库。在撰写本文时，我们使用最新版本 jQuery 3.7.1。
您可以使用以下任一下载选项：
从jquery.com下载它。
使用Bower下载它：$ bower install jquery。
使用最新兼容的CDN版本。
创建一个名为 index.html 的新 HTML 文件，并在结束 </body> 标签之前包含 jQuery：
<!-- Change the "src" attribute according to your installation path --> <script src="vendor/jquery/dist/jquery.min.js"></script>
第 2 步：添加 jQuery 验证插件
验证插件通过内置的验证方法扩展了 jQuery 的功能。
选择以下之一：
从插件的 GitHub repo下载它。
使用 Bower 下载：$ bower install jquery-validation。
使用 npm 下载它：npm i jquery-validation。
NuGet：安装包 jQuery.Validation。
使用最新兼容的CDN版本。
在 jQuery 之后包含插件：
<!-- Change the "src" attribute according to your installation path --> <script src="vendor/jquery-validation/dist/jquery.validate.min.js"></script>
步骤 3：创建 HTML 文件
在注册表中，我们将使用以下用户信息：
名
姓
电子邮件
密码
因此，让我们创建包含以下输入字段的基本表单：
<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>
当将其集成到实际应用程序中时，不要忘记填写上述代码中的action属性，以确保表单提交到正确的目的地。
步骤 4：创建表单样式
创建一个新文件 css/styles.css，并将其包含在 HTML 代码片段的 <head> 部分中：
<link rel="stylesheet" href="css/style.css"/>
将以下样式复制到新创建的文件中：
@import url("https://fonts.googleapis.com/css?family=Open+Sans");
/* Styles */
* {
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;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
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;
background: #fff;
color: #000;
padding: 0 6px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
form button {
height: 30px;
line-height: 30px;
background: #e67e22;
color: #fff;
margin-top: 10px;
cursor: pointer;
}
/* Error element handler */
form .error {
color: #ff0000;
}完成此步骤后，表单将如下所示：
步骤 5：创建验证逻辑
最后，我们需要初始化验证插件。创建一个新文件 js/form-validation.js，并在 jQuery 数据验证插件的 <script> 标记后引用它（请注意，错误消息（例如，如果用户未输入有效的电子邮件地址，应告诉用户什么）在 messages:: 中定义）：
<script src="js/form-validation.js"></script>
将以下代码复制到新创建的文件中：
// Wait for the DOM to be ready
$(function() {
// Initialize data validation on the registration form.
// It has the name attribute "registration"
$("form[name='registration']").validate({
// Specify validation logic
rules: {
// The key name on the left side is the name attribute
// of an input field. Validation logic are defined
// on the right side
firstname: "required",
lastname: "required",
email: {
required: true,
// Specify that email should be validated
// by the built-in "email" rule
email: true
},
password: {
required: true,
minlength: 5
}
},
// Specify validation error messages
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"
},
// Make sure the form is submitted to the destination defined
// in the "action" attribute of the form when valid
submitHandler: function (form) {
form.submit();
});
});上述代码将在表单提交时执行 jQuery 验证。
高级验证技术
1.自定义验证方法
自定义验证方法允许为内置验证选项未涵盖的场景创建规则。
该插件提供了$.validator.addMethod函数来创建这样的规则。
以下代码显示了针对字母数字字符（3-20 个字符）的 jQuery 验证示例
$.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.");
$("form[name='registration']").validate({
rules: {
username: {
required: true,
username: true
}
}
});2.实时验证
使用事件监听器（例如 onkeyup、onfocusout 和 onclick）来触发验证。
仅验证可见字段以提高响应能力。
使用去抖动验证进行性能优化。
$("form[name='registration']").validate({
onkeyup: function(element) {
var validator = this;
setTimeout(function() {
validator.element(element);
}, 300); // Debounce input validation
}
});3. 异步（远程）验证
使用远程方法验证服务器端端点的输入，例如检查用户名或电子邮件可用性。
在验证期间显示加载指示器。
示例：用户名可用性检查
rules: {
username: {
required: true,
remote: {
url: "/check-username",
type: "post",
data: {
username: function() {
return $("#username").val();
}
}
}
}
},
messages: {
username: {
remote: "Username is already taken."
}
}4.条件验证
根据表单状态动态设置规则，例如仅当选中复选框时才需要提供送货地址。
示例：仅当选中运输复选框时才验证地址字段。
rules: {
address: {
required: function(element) {
return $("#shipping").is(":checked");
}
}
}5.增强用户体验
错误消息：自定义错误消息和位置以获得更好的用户界面。
errorPlacement: function(error, element) {
error.appendTo(element.parent().find(".error-container"));
}国际化：使用本地化错误消息支持多种语言。您可以从验证插件集成预定义的语言文件，或创建自定义本地化文件。
function loadLanguage(lang) {
$.getScript("js/localization/messages_" + lang + ".js", function() {
$("form[name='registration']").validate();
});
}
// Example usage
loadLanguage('fr');6.安全最佳实践
验证之前清理输入以删除危险字符。
结合客户端和服务器端验证以确保强大的安全性。
7.常见陷阱及解决方案
通过使用 jQuery 选择器动态附加验证规则来处理动态添加的字段。
$("#add-field").click(function() {
$("#new-field").rules("add", {
required: true,
email: true
});
});使用提交锁机制防止多次提交。
submitHandler: function(form) {
$("#submit-button").prop("disabled", true);
form.submit();
}8.辅助功能增强
对屏幕阅读器使用 ARIA 属性 ( aria-invalid , aria-scribeby )。
确保所有错误均得到正确公布且可导航。
结论
就这样，您就大功告成了！现在您知道如何使用 jQuery 设置表单数据验证，并完成自定义验证消息。请记住，这并不能取代服务器端验证。恶意用户仍然有可能操纵或绕过验证约束（例如，通过使用浏览器的开发人员工具）。
常见问题 (FAQ)
什么是 jQuery 表单数据验证？
它确保 HTML 表单中的用户输入在提交到服务器之前符合特定标准，有助于防止处理不正确或不完整的数据。
表单数据验证为何重要？
验证可确保数据准确性、防止错误并改善用户体验。验证用户输入有助于维护数据完整性并降低因不正确或恶意数据而出现问题的可能性。
如何使用 jQuery 执行表单数据验证？
该插件可用于验证数据或编写自定义 jQuery 代码。它通过提供预构建的验证逻辑和错误消息简化了流程。
一些标准表单数据验证约束有哪些？
验证标准包括检查必填字段、有效的电子邮件地址（电子邮件验证）、数值和密码复杂性。jQuery 数据验证插件为这些场景提供了内置规则。
我可以创建自定义验证约束吗？
是的，您可以使用 jQuery 数据验证插件创建自定义验证约束。定义新的验证方法并指定其行为，例如检查特定模式或值。
如何使用 jQuery 数据验证插件启动表单数据验证？
您通常会在表单元素上调用 .validate() 方法来启动验证。jQuery 数据验证插件提供了此方法并设置了验证的规则和行为。
如果表单未通过验证会发生什么情况？
如果表单未通过验证，jQuery 数据验证插件将阻止其提交，并在相应的输入字段旁边显示错误消息。这将向用户反馈需要更正的内容。
如何自定义 jQuery 表单数据验证中的错误消息？
该插件允许您针对特定验证规则自定义错误消息。您可以在每个输入字段的验证设置中定义自定义错误消息。
我可以在没有验证插件的情况下使用 jQuery 表单数据验证吗？
是的，您可以使用自定义 jQuery 代码执行表单数据验证，而无需依赖 Validation 插件。您需要编写 JavaScript 函数来手动检查表单输入并显示错误消息。
查询验证插件有替代品吗？
是的，还有其他表单验证库和框架可用，例如 Parsley.js 和 Formik（用于 React 应用程序）。此外，HTML5 引入了内置表单验证属性和约束。
我可以使用 AJAX 来验证表单数据吗？
是的，您可以将 AJAX 与表单验证结合使用，以执行实时验证或异步提交表单数据。这可以通过减少页面重新加载来帮助增强用户体验。
表单数据验证仅适用于客户端验证吗？
表单验证可以在客户端和服务器端进行。客户端验证可以提高用户体验，而服务器端验证对于防止恶意或不正确的数据到达服务器至关重要。
验证后如何处理表单提交？
如果您使用插件，验证通过后插件会自动处理提交。如果您使用自定义验证，验证成功后您可以手动提交表单。
我可以将 jQuery 表单数据验证与其他 JavaScript 框架一起使用吗？
是的，您可以将 jQuery 表单验证与其他 JavaScript 框架一起使用。请注意潜在的冲突或兼容性问题，并确保正确集成验证逻辑。
如何有效实现实时验证？
为了提高性能，可以实现带防抖功能的实时验证。“onkeyup”方法用于防抖输入验证。
我可以异步验证数据吗，例如检查用户名可用性？
是的，jQuery 数据验证支持异步验证，例如检查用户名是否已被使用。这是通过在后台进行 API 调用并根据服务器的响应显示适当的反馈来完成的。
网友评论文明上网理性发言 已有0人参与
发表评论: