Jquery.validate插件表单验证 (新样式)
<!--end: header 头部 -->
?
学习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 <%@ 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文件代码：
?
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文件代码：
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，主要用于用户名重复检查，代码如下：
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.WebService18 {19 20 [WebMethod]21 public bool CheckUserAvailable(string username)22 {23 if (username == "zwswood")24 {25 return false;26 }27 else28 {29 return true;30 }31 }32 }33 }所有代码都贴完了，这里发帖的目录只是想记录下来，方便以后查阅。
?http://files.cnblogs.com/zwswood/regValidator.rar.