您的位置：首页 > Web前端 > JQuery

jQuery.Validate客户端验证使用介绍

2012-09-16 21:46 399 查看

在日常项目中表单验证算是最常见的了，使用一个好的js库可以使我们的工作事半功倍。jQuery.Validate无疑就是一个不错的选择。

jQuery.Validate，这个验证库是属于jQuery的插件，是由bassistance.de编写的，bassistance.de还提供许多jQuery的其他插件，这里就不一一介绍了，大家可以到其官网查看都是很不错的。

下面为大家提供jQuery.Validate的下载地址：

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

这里有很详尽的说明和文档。

好废话不多说直接上干货.

要使用jQuery.Validate首先我们要在也页面中引用jQuery，然后引用下载好的 jquery.validate.js 文件。如何大家需要提示验证提示消息采用默认的中文的话，还需要引用 messages_cn.js 文件。

文件引入完毕之后，我们就需要开始编码了，jQuery.Validate是监控form表单的，在任何提交表单的操作前jQuery.Validate都会检测表单里的输入项是否满足规则，满足才允许提交。所以需要在jQuery(document).ready（）时为form进行验证注册代码如下：

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#<%=form1.ClientID %>").validate();
});
</script>

接下来我们要为表单元素设置规则：

格式是　rules: {　表单元素name名：{ 规则 }　　}

自定义错误提示消息是通过 messages 来设置的：

格式是　　 messages: { rules中的出现的表单元素name名：{ 对应规则名：显示消息} }

简单例子如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="Scripts/messages_cn.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#form1").validate({
rules: {
name: {
required: true
},
password: {
required: true
},
confirm_password: {
equalTo: "#password"
},
email: {
required: true,
email: true
},
date: { required: true,
date: true
},
url: { required: true,
url: true
},
number: { required: true,
number: true
}
},

messages: {
url: {
url: "url错误"
}
}
});
})
</script>
</head>
<body>
<form id="form1" runat="server">
name<asp:TextBox ID="name" runat="server"></asp:TextBox><br />
password<asp:TextBox ID="password" runat="server"></asp:TextBox><br />
confirm_password<asp:TextBox ID="confirm_password" runat="server"></asp:TextBox><br />
email<asp:TextBox ID="email" runat="server"></asp:TextBox><br />
date<asp:TextBox ID="date" runat="server"></asp:TextBox><br />
url<asp:TextBox ID="url" runat="server"></asp:TextBox><br />
number<asp:TextBox ID="number" runat="server"></asp:TextBox><br />
<asp:Button ID="Button1" runat="server" Text="Button" />

</form>
</body>
</html>

上面演示了基本的验证设置，除此之外我们还需要远程的验证。

为此我们将上面的实例完善，在name字段中添加远程验证：

name: {
required: true,
remote: {
url: "remote.ashx",
type: "post",
data: {
name: function () {
return $("#name").val();
}
},
dataType: "html",
dataFilter: function (data) {
data = data.toLowerCase()
if (data == "true") {
return true;
}
else {
return false;
}
}
}

此时我们需要在服务器端进行配合，在此以asp.net为例演示：

创建一个ashx，一般处理程序，

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/html";
string name = context.Request["name"];
if (!string.IsNullOrWhiteSpace(name))
{
if (name.Trim() == "wang")
context.Response.Write(true);
}

}

自此我们的远程验证就完成了。

此处只是做了一个基本介绍，由于时间还有很多没有介绍的大家可以参看下载的文档或Demos。

如有什么不对的地方还请大家拍砖.

// var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-34864783-1']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
// ]]>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航