验证的效果如图:
学习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 }
所有代码都贴完了,这里发帖的目录只是想记录下来,方便以后查阅。
相关推荐
本文实例为大家分享了jquery.validate表单验证的使用方法,供大家参考,具体内容如下 1 、表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家。 1.点击表单项,显示帮助提示 2.鼠标离开表...
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来...
Validate是基于jQuery的一款轻量级验证插件,内置丰富的验证规则,还有灵活的自定义规则接口,HTML、CSS与JS之间的低耦合能让您自由布局和丰富样式,支持input,select,textarea的验证。 效果: 代码: <!...
刚刚研究了jqueryvalidate表单验证插件, 加了一些样式,出错提示和验证通过的提示,通过ajaxSubmit()异步提交表单 对input select 标签进行了简单美化。样式全是自己写的,不是网上照抄 适合初学jqueryvalidate, ...
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家。 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确、错误提示及鼠标移入时的帮助提醒 对于...
本文实例讲解了jQuery Validate 表单验证插件,如何自定义一个验证方法,分享给大家供大家参考,具体内容如下 效果如下: 验证失败效果: 验证成功效果: 具体步骤: 1、引入依赖包 [removed][removed] ...
要做好表单验证,需要准备以下基本要素: 1.html表单结构:包含需要校验的表单元素; 2.js逻辑控制:在需要校验的表单元素上绑定事件,如点击、获取焦点、失去焦点等事件,并设置这些事件对应的执行函数; 3.css...
6.jQuery带Tips动画提示通用表单验证插件下载(jquery validate),动画效果漂亮 7.jQuery鼠标移到下载地址滑出气泡提示效果的插件 8.又一款jquery实现链接Tip演示下载 9.常用jQuery弹出式链接提示效果Tooltip...
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。 一、导入js库 [removed]/validate/jquery-1.6.2.min.js>[removed] [removed]/...
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单。 但是在学习的过程中,我也遇到了疑惑,网上的很多例子貌似都是依赖jquery.metadata.js这个库,然后在标签里写成class=”required ...
其效果图如下:使用说明 需要使用jQuery库文件和formValidation库文件[下载实例代码] http://jquery.com/ 同时需要自定义显示提示错误信息的CSS样式 使用实例 一,包含文件部分 代码如下:[removed][removed] ...
使用bootstrap后他由他自带的样式has-error,想要使用它就会比较麻烦,往常使用jquery.validate的话只有使用他自己的样式了,而且有模型在使用模型验证更方便点。怎么解决呢? 当然你可以专门写一个针对此的jquery...
validate验证插件 form表单插件 cookie插件 autocomplete插件 notesforlightbox插件 ContextMenu插件 JQZoom放大镜插件 编写一个对象级别的插件 编写一个类级别的插件 uploadify文件上传插件 第8章 使用...
分别是: [removed][removed] [removed][removed] 1、基本使用方法,通过样式设置验证规则 代码如下: [removed] $(function() { $(“#signupForm”).validate(); }); //验证所选择的表单 [removed] <p> <l
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 图片放大镜插件...
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 ...
该验证框可以结合form(表单)插件并防止表单重复提交。 2.练习1:验证输入字符长度及非空 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>validatebox</title> <...
对于Bootstrap而言,利用BootstrapValidator来做Form表单验证是个相当不错的选择,两者完全兼容,我们也不用去关注CSS样式等美工效果。 0x01 引入BootstrapValidator 官网:BootstrapValidator,作为一个纯粹的使用...
\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}{...