`

Jquery.validate插件表单验证 (新样式)

阅读更多

<!--done-->

<!--end: header 头部 -->

<!--done-->

验证的效果如图: 

 

学习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.

分享到:
评论

相关推荐

    功能强大的jquery.validate表单验证插件

    本文实例为大家分享了jquery.validate表单验证的使用方法,供大家参考,具体内容如下 1 、表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家。 1.点击表单项,显示帮助提示  2.鼠标离开表...

    jquery.validate.css

    jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来...

    jQuery.validate.js表单验证插件的使用代码详解

    Validate是基于jQuery的一款轻量级验证插件,内置丰富的验证规则,还有灵活的自定义规则接口,HTML、CSS与JS之间的低耦合能让您自由布局和丰富样式,支持input,select,textarea的验证。 效果: 代码: &lt;!...

    jqueryvalidate验证demo 美化了表单元素

    刚刚研究了jqueryvalidate表单验证插件, 加了一些样式,出错提示和验证通过的提示,通过ajaxSubmit()异步提交表单 对input select 标签进行了简单美化。样式全是自己写的,不是网上照抄 适合初学jqueryvalidate, ...

    jQuery Validate表单验证插件实现代码

    1 表单验证的准备工作  在开启长篇大论之前,首先将表单验证的效果展示给大家。    1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确、错误提示及鼠标移入时的帮助提醒  对于...

    jQuery插件Validate实现自定义表单验证

    本文实例讲解了jQuery Validate 表单验证插件,如何自定义一个验证方法,分享给大家供大家参考,具体内容如下 效果如下: 验证失败效果: 验证成功效果: 具体步骤: 1、引入依赖包 [removed][removed] ...

    jquery validate表单验证插件

    要做好表单验证,需要准备以下基本要素: 1.html表单结构:包含需要校验的表单元素; 2.js逻辑控制:在需要校验的表单元素上绑定事件,如点击、获取焦点、失去焦点等事件,并设置这些事件对应的执行函数; 3.css...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    6.jQuery带Tips动画提示通用表单验证插件下载(jquery validate),动画效果漂亮 7.jQuery鼠标移到下载地址滑出气泡提示效果的插件 8.又一款jquery实现链接Tip演示下载 9.常用jQuery弹出式链接提示效果Tooltip...

    jQuery Validate验证框架详解(推荐)

    jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。 一、导入js库 [removed]/validate/jquery-1.6.2.min.js&gt;[removed] [removed]/...

    jQuery Validate初步体验(一)

    jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单。 但是在学习的过程中,我也遇到了疑惑,网上的很多例子貌似都是依赖jquery.metadata.js这个库,然后在标签里写成class=”required ...

    jQuery 表单验证插件formValidation实现个性化错误提示

    其效果图如下:使用说明 需要使用jQuery库文件和formValidation库文件[下载实例代码] http://jquery.com/ 同时需要自定义显示提示错误信息的CSS样式 使用实例 一,包含文件部分 代码如下:[removed][removed] ...

    MVC遇上bootstrap后的ajax表单验证

    使用bootstrap后他由他自带的样式has-error,想要使用它就会比较麻烦,往常使用jquery.validate的话只有使用他自己的样式了,而且有模型在使用模型验证更方便点。怎么解决呢? 当然你可以专门写一个针对此的jquery...

    JQuery权威指南源代码

    validate验证插件 form表单插件 cookie插件 autocomplete插件 notesforlightbox插件 ContextMenu插件 JQZoom放大镜插件 编写一个对象级别的插件 编写一个类级别的插件 uploadify文件上传插件 第8章 使用...

    JQuery扩展插件Validate 1 基本使用方法并打包下载

    分别是: [removed][removed] [removed][removed] 1、基本使用方法,通过样式设置验证规则 代码如下: [removed] $(function() { $(“#signupForm”).validate(); }); //验证所选择的表单 [removed] &lt;p&gt; &lt;l

    jQuery权威指南-源代码

    7.2 验证插件validate /198 7.3 表单插件form /202 7.4 Cookie插件cookie /205 7.5 搜索插件AutoComplete /209 7.6 图片灯箱插件notesforlightbox /213 7.7 右键菜单插件contextmenu /216 7.8 图片放大镜插件...

    jQuery权威指南366页完整版pdf和源码打包

    6.5.1 需求分析 6.5.2 效果界面 6.5.3 功能实现 6.5.4 代码分析 6.6 本章小结 第7章 jquery常用插件 7.1 jquery插件概述 7.2 验证插件validate 7.3 表单插件form 7.4 cookie插件cookie 7.5 ...

    jQuery EasyUI之验证框validatebox实例详解

    该验证框可以结合form(表单)插件并防止表单重复提交。 2.练习1:验证输入字符长度及非空 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;validatebox&lt;/title&gt; &lt...

    基于BootstrapValidator的Form表单验证(24)

    对于Bootstrap而言,利用BootstrapValidator来做Form表单验证是个相当不错的选择,两者完全兼容,我们也不用去关注CSS样式等美工效果。 0x01 引入BootstrapValidator 官网:BootstrapValidator,作为一个纯粹的使用...

    Java学习笔记-个人整理的

    \contentsline {chapter}{Contents}{2}{section*.1} {1}Java基础}{17}{chapter.1} {1.1}基本语法}{17}{section.1.1} {1.2}数字表达方式}{17}{section.1.2} {1.3}补码}{19}{section.1.3} {1.3.1}总结}{23}{...

Global site tag (gtag.js) - Google Analytics