Jquery.validate插件表单验证
验证的效果如图：
学习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 }
所有代码都贴完了，这里发帖的目录只是想记录下来，方便以后查阅。
https://files.cnblogs.com/zwswood/regValidator.rar.
