jquery.validate.js表单验证插件的用法和入门范例

网上介绍的jquery.validate大部门只是介绍它的api和用法，没有一个完整的入门范例，有时候看半天才知道该怎么下手。因此为了快速了解学习，我弄了一个快速入门范例，虽然用的知识点不多，写的也不是很好，但是可以快速的入手。

以下是参考源码（下面有源码网上可以下载到在此不再提供）：

   
   
   
   
   
   
   


   

信息录入

   

       

用户名：

       

工作号：

       

备 注：

       

   

   

运行的效果：

为了让各位在项目上更清楚我们以.net为例子为各位演示一下

新建了项目，项目下面保护JS目录，主要存放Jquery插件jquery-1.4.2.min.js+jquery.validate.min.js以及外链JS，register.js

images目录，主要存放验证时候错误信息的小图标

css目录，主要存放样式文件

首先在默认页面default.aspx

标记中引入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
4
5
6
7
8
9
10
11
12
13
14
15

16
17
18
19
20
21
24
25
26
27
31
32
33
34
37
38
39
40
43
44
45
46
49
50
51
52
55
56
57
58
61
62
63
64
67
68
69
71
72

jQusery学习-表单验证之用户注册
用户名：	22 23
密码：	28 29 30
确认密码：	35 36
地址：	41 42
网址：	47 48
电话号码：	53 54
邮政编码：	59 60
邮箱地址：	65 66
70

73

74
75
复制代码
在附上CSS文件代码：

 

View Code
复制代码
1
2 body{ text-align:center; margin:10px auto; font-size:12px;}
3 table{ 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- }
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{ 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("填写正确！").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 ///

10 /// validator 的摘要说明
11 ///

12 [WebService(Namespace = "http://www.111com.net/")]
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 }