Jquery.validate插件表单应验 (新样式) _Web前端

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 }

所有代码都贴完了，这里发帖的目录只是想记录下来，方便以后查阅。

?http://files.cnblogs.com/zwswood/regValidator.rar.