【JQUERY】ASPX多服务器控件下使用Jquery.validate.js

tudusi

浏览: 1049595 次

最近访客更多访客>>

qq852014098

ja_1991

u012363178

my_xinwen

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1771)

社区版块

存档分类

2012-05 ( 47)
2012-04 ( 167)
2012-03 ( 41)
更多存档...

ASPX多服务器控件下使用Jquery.validate.js

2010-01-04 10:25

Jquery.validate.js是基于JQuery库的一个前端验证控件，功能很强大，自身集成了大多常用的验证方法。非常方便。如下：

//验证
$(function() {
//文档加载后对表单绑定验证规则。这样当表单submit时，自动进行验证
$("#aspnetForm").validate({
rules: {

txtAge: {
required: true,
number: true,
min:18
},
},
messages: {
txtAge: {
required:"必须填写",
number:"请输入数字",
min:jQuery.format("必须年满{0}.")
},
}

});
});

其运行的原理是给HTML中的form绑定一些验证方法。在Form提交时自动进行验证，并在验证失败时进行拦截FORM提交。这样的设计思路是正确可行的，可以理解设计人员为何没有将事件以按扭为目标进行绑定。它在关键的地方进行了拦截。这样可以有效的防止多个Submit的情况下。有漏网之鱼！

但做为ASP.NET的开发人员就头痛了。原因是从控件面板上拖动的按扭，最终在页面上全部转换成了submit。而大多情况下每个Submit的业务规则不同。所以特别需要Jquery.validate能够以特定的submit为目标进行验证绑定。但“不幸”的是，我今天鄱遍了官方API都没有找到相关的直接支持！

但还是发现有用价值！Jquery.validate提供了方法删除特定验证。这就好办。我们采用目标按扭使FORM绑定验证，然后再在不相关的SUBMIT绑定一个移除验证方法就行。相关代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Decompress.aspx.cs" Inherits="QsqManage.Decompress"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>演示</title>

<scriptlanguage="JavaScript" src="/jslib/jquery-1.3.2.min.js" type="text/javascript"></script>
<script language="JavaScript" src="/jslib/jPlug/jquery.validate.min.js" type="text/javascript"></script>
<script type="text/javascript">
//绑定表单验证
function NeedValidate()
{
$("#aspnetForm").validate({
rules: {
txtAge: {
required:true,
number:true,
min:18
}
},
messages:{
txtAge: {
required:"必须填写",
number:"请输入数字",
min:jQuery.format("必须年满{0}.")
}
}
});
}
//取消表单验证
function NoValidate()
{
$("#txtAge").rules("remove");//如果有多个依次取消
}

$(function() {
//给需要验证的控件为表单绑定验证
$("#Button1").click(function(){
NeedValidate();
});

//不需要验证的控件取消验证绑定
$("#Button2").click(function() {
NoValidate();
});
});
</script>
</head>
<body>
<formid="aspnetForm" runat="server">
<div>

年龄：<asp:TextBoxID="txtAge" runat="server"></asp:TextBox>

<asp:ButtonID="Button1" runat="server" onclick="Button1_Click" Text="需要验证" />
<asp:ButtonID="Button2" runat="server" onclick="Button2_Click" Text="无须验证" />

</div>

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

后台很简单，

protected void Button1_Click(object sender, EventArgs e)
{
Response.Write("验证通过");
}

protectedvoid Button2_Click(object sender, EventArgs e)
{
Response.Write("没有经过验证");
}

这样，点击Button1就会进行验证，而Button2则直接跳过。

如果一个页面有很多其它按扭，可以使用JQUERY强大的选择器进行批量取消验证功能。如下：

$(document).ready(function() {
//给需要验证的控件为表单绑定验证
$("#Button1").click(function() {
NeedValidate();
});

//不需要验证的控件取消验证绑定
// $("#Button2").click(function() {
// NoValidate();
// });

//批量取消绑定验证对所有 type=submit 并且 name不为Button1的按扭取消表单验证
$("input[type='submit'][name!='Button1']").click(function() {
NoValidate();
});
});

------------------------------------------------------------------------------------------------

贴个简单的例子：

$('#EditView').validate({
                event: "keyup",
                rules:{
                    name:{required:true},
                    cosa_commodity_group_list:{required:true}
                },
                submitHandler:function(){
                    $("#group_list > option").attr("selected","selected");
                    $(this).submit();
                }
});

1.event是触发校验的方式，可选值有keyup(每次按键时)，blur(当控件失去焦点时)，不使用这个参数时就只在按提交按钮时触发

2.如果在提交前还需要进行一些自定义处理使用submitHandler参数，其它的都比较简单，自己看看API就成了.

3.debug，如果这个参数为true，那么表单不会提交，只进行检查，调试时十分方便.

4.rules，所有的检验规则都写在这个参数里面.

格式为： ID : {rule1,rule2,...}

(1) required: true 必输
(2) number: true 只能输入数字(包括小数)
(3) digits:true 只能输入整数
(4) minValue: 3 不能小于3
(5) maxValue: 100 最大不超过100
(6) rangeValue:[50,100] 值范围为50-100
(7) minLength: 5 最小长度(汉字算一个字符)
(8) maxLength: 10 最大长度(汉字算一个字符)
(9) rangeLength:[5,10] 长度范围为5至10位(汉字算一个字符)
(10) 上面的minLength, maxLength, rangeLength 这三项除了text input之外还可以用于checkbox,select这两种控件
(11) email:true 电子邮件
(12) equalTo: "#field" 与#field值相同
(13) dateISO:true 日期型，格式为1998/01/22 1999-12-12

5.messages，自定义错误信息，格式与rules类似：

messages {
             password: {
                 required: "请输入您的密码."
                 minLength: "密码不能小于５位.",
                 maxLength: "密码不能长于32位."
             },