验证的效果如图：
学习Jquery表单验证插件自己琢磨，加上网上看了些攻略，基本算是学会使用这个插件了，下面分享一下我的心得；
我的开发环境是VS2008+jquery-1.4.2.min.js+jquery.validate.min.js
新建了项目，项目下面保护JS目录，主要存放Jquery插件jquery-1.4.2.min.js+jquery.validate.min.js以及外链JS，register.js
images目录，主要存放验证时候错误信息的小图标
css目录，主要存放样式文件
首先在默认页面default.aspx<head>标记中引入JS以及CSS
1 <link type="text/css" href="css/css.css" rel="stylesheet" /> 2 <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 3 <script type="text/javascript" src="js/jquery.validate.min.js"></script> 4 <script type="text/javascript" src="js/register.js"></script>
PS：这里得注意以下，就是Jquery插件得在验证插件前面引用，顺序错了可能发生Jquery无效的问题。
我页面结构代码如下：
View Code
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="regValidator._Default" %> 2 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> 4 5 <html xmlns=" http://www.w3.org/1999/xhtml " > 6 <head runat="server"> 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 8 <title>jQusery学习之表单验证</title> 9 <link type="text/css" href="css/css.css" rel="stylesheet" /> 10 <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 11 <script type="text/javascript" src="js/jquery.validate.min.js"></script> 12 <script type="text/javascript" src="js/register.js"></script> 13 </head> 14 <body> 15 <form id="register_form" runat="server"> 16 <table border="0" cellpadding="0" cellspacing="0"> <tr> 17 <th colspan="2">jQusery学习-表单验证之用户注册</th> 18 </tr> 19 <tr> 20 <td width="25%">用户名：</td> 21 <td> 22 <asp:TextBox ID="txtUserName" runat="server" CssClass="ipt_txt"></asp:TextBox><span id="msg"></span> 23 </td> 24 </tr> 25 <tr> 26 <td>密码：</td> 27 <td> 28 <asp:TextBox ID="txtUserPwd" TextMode="Password" runat="server" CssClass="ipt_txt"></asp:TextBox> 29 30 </td> 31 </tr> 32 <tr> 33 <td>确认密码：</td> 34 <td> 35 <asp:TextBox ID="txtRUserPwd" TextMode="Password" runat="server" CssClass="ipt_txt"></asp:TextBox> 36 </td> 37 </tr> 38 <tr> 39 <td>地址：</td> 40 <td> 41 <asp:TextBox ID="txtAddress" runat="server" CssClass="ipt_txt"></asp:TextBox> 42 </td> 43 </tr> 44 <tr> 45 <td>网址：</td> 46 <td> 47 <asp:TextBox ID="txtUrl" runat="server" CssClass="ipt_txt"></asp:TextBox> 48 </td> 49 </tr> 50 <tr> 51 <td>电话号码：</td> 52 <td> 53 <asp:TextBox ID="txtPhone" runat="server" CssClass="ipt_txt"></asp:TextBox> 54 </td> 55 </tr> 56 <tr> 57 <td>邮政编码：</td> 58 <td> 59 <asp:TextBox ID="txtZipCode" runat="server" CssClass="ipt_txt"></asp:TextBox> 60 </td> 61 </tr> 62 <tr> 63 <td>邮箱地址：</td> 64 <td> 65 <asp:TextBox ID="txtEmail" runat="server" CssClass="ipt_txt"></asp:TextBox> 66 </td> 67 </tr> 68 <tr> 69 <td colspan="2"> 70 <asp:Button ID="Button1" runat="server" Text="注册" onclick="Button1_Click" /></td> 71 </tr> 72 </table> 73 </form> 74 </body> 75 </html>
在附上CSS文件代码：
View Code
1 /* CSS Document */ 2 body{ text-align:center; margin:10px auto; font-size:12px;} 3 table{ width:500px; text-align:center; margin:0 auto; border-top:1px solid #B1C3D9; border-left:1px solid #B1C3D9;} 4 table tr th,table tr td{ font-size:12px; border-bottom:1px solid #B1C3D9; border-right:1px solid #B1C3D9; line-height:30px; height:30px;} 5 table tr th{ background:#7F007F; color:#fff; font-size:14px;} 6 table tr td{ padding-left:12px; text-align:left;} 7 label.error 8 { 9 padding-left:12px; 10 background: url(/images/error.png) no-repeat; 11 color:Red; 12 } 13 label.success{background: url(/images/succes.png) no-repeat;} 14 .ipt_txt{width:150px; border:1px solid #B1C3D9; background-color:#FBFBFB;} 15 input.error{background-color:#FBE2E2}
现在核心的JS代码来了，register.js文件代码：
View Code
1 //以下为自定义方法，validate方法中没有的 2 //判断两个值是否相等 3 jQuery.validator.addMethod("notEqualTo", function(value, element, param) { 4 return value != $(param).val(); 5 }, $.validator.format("两次输入不能相同!")); 6 7 //只能输入数字 8 jQuery.validator.addMethod("isNum", function(value, element) { 9 var RegExp = /^\d+$/; 10 return RegExp.test(value); 11 }, $.validator.format("只能为数字!")); 12 13 //电话号码验证 14 jQuery.validator.addMethod("isTell", function(value, element) { 15 var RegExp = /^(\d{3}-(\d{8})|(\d{7}))$|^(\d+)$|^(\d{4}-(\d{7})|(\d{8}))$|^(\d{7,8})$/; 16 return RegExp.test(value); 17 }, $.validator.format("电话号码输入不正确!")); 18 19 20 //页面加载时调用 21 $(function() { 22 $('#register_form').validate({ 23 rules: { 24 txtUserName: { 25 required: true, 26 maxlength: 18, 27 minlength: 4, 28 remote: { 29 type: "post", 30 url: "validator.asmx/CheckUserAvailable", 31 data: { 32 username: function() { 33 return $("#txtUserName").val() 34 } 35 }, 36 dataType: "xml", 37 dataFilter: function(dataXML) { 38 var result = $(dataXML).find("boolean").text(); 39 if (result == "false") 40 return false; 41 else 42 return true; 43 } 44 } 45 }, 46 txtUserPwd: { 47 required: true, 48 maxlength: 18, 49 minlength: 6, 50 notEqualTo:"#txtUserPwd" 51 }, 52 txtRUserPwd: { 53 required: true, 54 equalTo: "#txtUserPwd" 55 }, 56 txtAddress: { 57 required: true, 58 maxlength: 50 59 }, 60 txtUrl: { 61 required: true, 62 url: true 63 }, 64 txtPhone: { 65 required: true, 66 minlength: 7, 67 maxlength: 13, 68 isTell: true 69 }, 70 txtZipCode: { 71 required: true, 72 minlength: 6, 73 maxlength: 6, 74 isNum: true 75 }, 76 txtEmail: { 77 required: true, 78 email: true, 79 maxlength: 40 80 } 81 }, 82 messages: { 83 txtUserName: { 84 required: "用户名不能为空！", 85 maxlength: "最长为18个字符！", 86 minlength: "最短为4个字符！", 87 remote: "该用户名已被占用！" 88 }, 89 txtUserPwd: { 90 required: "密码不能为空！", 91 maxlength: "最长为18个字符！", 92 minlength: "最短为6个字符！", 93 notEqualTo: "用户名和密码不能相同！" 94 }, 95 txtRUserPwd: { 96 required: "密码不能为空！", 97 equalTo: "两次输入密码不相同！" 98 }, 99 txtAddress: { 100 required: "地址不能为空！", 101 maxlength: "最长50个字符！" 102 }, 103 txtUrl: { 104 required: "网址不能为空！", 105 url: "请填写正确的网址！" 106 }, 107 txtPhone: { 108 required: "电话不能为空！", 109 minlength: "最少7个数字！", 110 maxlength: "最长13个数字！", 111 isTell: "电话格式不正确！" 112 }, 113 txtZipCode: { 114 required: "邮编不能为空！", 115 minlength: "邮编为6个数字！", 116 maxlength: "邮编为6个数字！", 117 isNum: "请输入数字！" 118 }, 119 txtEmail: { 120 required: "邮箱不能为空！", 121 email: "邮箱格式不正确！", 122 maxlength: "最长40个字符！" 123 } 124 }, 125 errorPlacement: function(error, element) { 126 error.appendTo(element.parent()); 127 }, 128 submitHandler: function(form) { 129 form.submit(); 130 }, 131 errorClass: "error", 132 // focusCleanup: true, //被验证的元素获得焦点时移除错误信息 133 success: function(label) { 134 label.html("<span style=\"color:green\">填写正确！</span>").addClass("success"); 135 } 136 }); 137 138 139 //所有使用“.ipt_txt”样式的文本框加上效果，获得焦点文本框变成淡黄色 140 $(".ipt_txt").focus(function() { 141 $(this).css("background-color", "#FFFFCC").blur(function() { 142 $(this).css("background-color", "#FBFBFB"); 143 }); 144 }); 145 });
另外还有一个web服务文件validator.asmx，主要用于用户名重复检查，代码如下：
View Code
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Web.Services; 6 7 namespace regValidator 8 { 9 /// <summary> 10 /// validator 的摘要说明 11 /// </summary> 12 [WebService(Namespace = "http://tempuri.org/")] 13 [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] 14 [System.ComponentModel.ToolboxItem(false)] 15 // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。 16 // [System.Web.Script.Services.ScriptService] 17 public class validator : System.Web.Services.WebService 18 { 19 20 [WebMethod] 21 public bool CheckUserAvailable(string username) 22 { 23 if (username == "zwswood") 24 { 25 return false; 26 } 27 else 28 { 29 return true; 30 } 31 } 32 } 33 }
所有代码都贴完了，这里发帖的目录只是想记录下来，方便以后查阅。