使用jQuery Validation插件的示例
本文介绍使用 jQuery 验证插件的示例。
引言
本文介绍使用 jQuery 验证插件的示例。
背景
jQuery 的“验证插件”是网页用于在客户端使用 JavaScript 验证数据输入的优秀工具。不幸的是，很难找到一个完整的可用示例来说明如何使用它。本文介绍使用 jQuery 验证插件的示例。我在 IE8、Google Chrome、Firefox 和 Safari 中测试了该示例。该示例在 IE7 及更早版本中运行效果不佳。本文假定您对 jQuery 及其使用方法有一些基本知识。如果您是 jQuery 新手，可以在互联网上轻松找到大量有关如何使用它的信息。
- * 快速提示 #1：附带的示例在 IE7 中运行效果不佳。这是因为我在此示例中使用的“jquery.validate.min.js”是 1.5.5 版本。在完成文章后，我发现如果使用较新的版本“1.8.1”，它应该可以在 IE7 中运行。您可以从 此处 下载“1.8.1”版本。- 2011/6/19
- * 快速提示 #2：一些读者发现该示例根本无法在 IE 中运行。在我自己的另一台计算机上进行测试（不确定为什么我的第一次测试在 IE8 中有效）后，情况确实如此。但是，如果将“1.5.5”版本的“jquery.validate.min.js”替换为“1.8.1”版本，我的测试表明该示例在 IE 中也有效。我将重新上传一个使用“1.8.1”的版本。感谢您的反馈。- 2011/6/20
- * 快速提示 #3：在“jQueryValidationExample1.8.1.zip”文件中上传了另一个示例副本。它使用了“1.8.1”版本的“jquery.validate.min.js”。我的测试表明它可以在 IE7+、Chrome、Safari 和 Firefox 中运行。如果您有兴趣，可以下载两个版本并查看区别。感谢指出问题的读者。- 2011/6/20
示例 Visual Studio 解决方案
附带的 Visual Studio 2010 解决方案的结构如下：
验证插件依赖于 jQuery 和 jQuery UI 来工作，因此我在 Scripts 文件夹中包含了来自 jQuery 的 jquery-1.6.1.min.js 文件和来自 jQuery UI 的 jquery-ui-1.8.13.custom.min.js 文件。Styles 文件夹中的ui-lightness 文件夹及其内容是 样式表以及 jQuery UI 使用的图像资源。它们来自下载“jquery-ui-1.8.13.custom.min.js”文件时的同一个下载包。“jquery.validate.min.js”文件是 jQuery 验证插件。本示例中使用的版本是 1.5.5。
我为本示例编写的代码位于以下文件中：
- Example.htm 文件是一个示例 HTML 页面，通过jquery.validate.wrapper.js 文件中创建的 JavaScript 类来使用 jQuery 验证插件。
- jquery.validate.wrapper.js 文件实现了一个简单的 JavaScript 函数，用于包装本示例的 jQuery UI。此函数将在验证期间用作 面向对象的类。JavaScript 对 面向对象的支持不完善，但我们可以某种程度上模拟它。如果您有兴趣，可以查看 此链接。
- Site.css 文件包含一个简单的 CSS 类，用于突出显示验证失败的输入控件。
我将首先介绍“Example.htm”页面，然后介绍“jquery.validate.wrapper.js”中的 JavaScript 类。最后，我将介绍 Site.css 文件中的 CSS 类。
“Example.htm”文件
Example.htm 文件实现如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Validation Example</title>
<link href="Styles/ui-lightness/jquery-ui-1.8.13.custom.css"
rel="stylesheet" type="text/css" />
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.13.custom.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.validate.wrapper.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
// 1. prepare the validation rules and messages.
var rules = {
textbox1: {
required: true,
minlength: 2
},
textbox2: "required",
textbox3: "required"
};
var messages = {
textbox1: {
required: "textbox1 is required",
minlength: "textbox1 needs to be at least length 2"
},
textbox2: "textbox2 is requried",
textbox3: "textbox3 is required"
};
// 2. Initiate the validator
var validator
= new jQueryValidatorWrapper("FormToValidate",
rules, messages);
// 3. Set the click event to do the validation
$("#btnValidate").click(function () {
if (!validator.validate())
return;
alert("Validation Success!");
});
});
</script>
</head>
<body>
<form id="FormToValidate" action="#">
<table>
<tr>
<td>
<input type="text" id="textbox1" name="textbox1" />
</td>
<td>
<input type="text" id="textbox2" name="textbox2" />
</td>
</tr>
<tr>
<td>
<input type="text" id="textbox3" name="textbox3" />
</td>
<td>
<input type="button" id="btnValidate"
style="width: 100%" value="Validate" />
</td>
</tr>
</table>
</form>
</body>
</html>
此 HTML 文件包含三个文本框和一个按钮。本示例的目的是在单击按钮时验证文本框中的内容。要设置验证，我们需要在 $(document).ready 事件中完成三个步骤：
- 准备验证规则以及验证失败时要显示的邮件。
- 创建一个验证器对象，将包含文本框的 HTML 表单的 ID 传递给
jQueryValidatorWrapper函数。验证规则和邮件也传递给此函数。jQueryValidatorWrapper函数在 jquery.validate.wrapper.js 文件中实现。 - 挂钩按钮的点击事件以启动验证。
这段代码非常简单，但您应该注意以下几点：
- 所有必需的 JavaScript 文件和样式表都需要正确引用。
- 所有文本框都需要有一个“
name”属性。验证规则和邮件与name属性相关联。 - 所有要验证的文本框都需要位于用于创建验证器对象的 HTML 表单中。
现在让我们看一下 jQueryValidatorWrapper 函数。
jQuery 验证包装器
jQueryValidatorWrapper 函数在 jquery.validate.wrapper.js 文件中实现。
var dialogIdSeed = 1000000000;
function jQueryValidatorWrapper(formId, rules, messages) {
// Get an Id for the "<div>" to diaply the error messages.
// The Id is made sure to be unique in the web page.
var dialogId = "V_dia_log" + dialogIdSeed++;
while ($("#" + dialogId).length != 0) {
alert(dialogId);
dialogId = "V_dia_log" + dialogIdSeed++;
}
// create the error message "div" and add it to the dom.
// it will be use to display the validation error messages.
var dialogText = "<div id='" + dialogId
+ "' title='Please correct the errors ...'>"
+ "<ul /></div>";
$("body").append(dialogText);
var $dialog = $("#" + dialogId);
var $ul = $("#" + dialogId + ">ul");
$dialog.dialog({
autoOpen: false,
modal: true,
close: function (event, ui) {
$ul.html("");
}
});
// hook up the form, the validation rules, and messages with jQuery validate.
var showErrorMessage = false;
var validator = $("#" + formId).validate({
onchange: true,
rules: rules,
messages: messages,
errorPlacement: function (error, element) {
if (showErrorMessage) {
var li = document.createElement("li")
li.appendChild(document
.createTextNode(error.html()));
$ul.append(li);
}
},
showErrors: function (errorMap, errorList) {
this.defaultShowErrors();
if ((errorList.length != 0) && showErrorMessage) {
$dialog.dialog('open');
}
}
});
// This is the function to call whem make the validation
this.validate = function () {
showErrorMessage = true;
var result = validator.form();
showErrorMessage = false;
return result;
};
}
jQueryValidatorWrapper 函数执行以下操作：
- 它首先创建一个
div元素并将其附加到 DOM。它确保div元素的 ID 在网页中是唯一的。如果验证失败，此div元素将用作显示错误消息的对话框。 - 它使用 jQuery 验证插件将验证规则和邮件挂钩到将要验证的 HTML 表单。
- 最后，它创建一个函数来启动验证。
用于突出显示失败输入元素的 CSS
如果文本框验证失败，我们需要突出显示它。用于突出显示 HTML 元素的 CSS 类在 Site.css 文件中实现。
.error
{
border-color:red;
border-style:solid;
border-width:1px;
}
jQuery 验证插件将查找 .error 类以将样式应用于失败的 HTML 元素。您可以根据需要实现此 CSS 类来突出显示失败的元素。在此示例中，如果文本框验证失败，我将简单地给它一个红色边框。
运行示例
现在我们已经完成了代码回顾，可以运行 Web 页面了。将 Example.htm 文件设置为启动页面；我们可以在 Visual Studio 中调试并运行应用程序。
当 Web 页面首次加载时，我们可以看到三个文本框和“Validate”按钮。
不输入任何内容并单击“Validate”按钮，所有三个文本框的验证都会失败。文本框会以红色边框突出显示，并弹出一个对话框要求我们纠正问题。
关闭对话框后，我们可以在文本框中输入内容。您可能会注意到，当文本框中的文本变得有效时，红色边框会消失。
如果我们为所有三个文本框输入有效文本，然后单击“Validate”按钮，会弹出一个消息框告诉我们验证成功。
关注点
- 本文介绍了使用 jQuery 验证插件的示例。
- 您可能注意到我在 jquery.validate.wrapper.js 文件中初始化验证器时将一个
div元素插入到了 DOM 中。此div元素将获得一个 ID，格式为“V_dia_log1???..” 如果您的网页中恰好有一个 ID 模式相同的 HTML 元素，jQueryValidatorWrapper函数最终会找到一个唯一的 ID 来为div元素分配，但这可能需要一些时间。如果您想在应用程序中按原样使用 jquery.validate.wrapper.js，您应该避免为页面中的任何元素分配相同模式的 ID。 - 我在 IE8、Google Chrome、Firefox 和 Safari 中测试了该示例。该示例在 IE7 及更早版本中运行效果不佳。但我的测试是有限的。如果您在自己的测试中发现任何有趣的内容，请随时告知我，我将不胜感激。
- 附带的示例在 IE7 中运行效果不佳。这是因为我在本示例中使用的 jquery.validate.min.js 是 1.5.5 版本。在完成文章后，我发现如果使用较新的版本 1.8.1，它应该可以在 IE7 中运行。您可以从 此处下载 1.8.1 版本。
- 我希望您喜欢我的文章，希望本文能以某种方式帮助您。
历史
- 首次修订：2011 年 6 月 18 日。