jQuery.Validate（Example）
来源：互联网 发布：淘宝百度云盘账号购买 编辑：程序博客网 时间：2024/06/10 14:47
苦于验证的烦恼，所以需要学习一下jQuery.Validate，但一开始竟无从下手，看官方的例子也不明白（个人英语不行，理解能力也相当有限）。
看到http://www.cnblogs.com/kyo-yo/archive/2010/06/28/Use-jQueryValidate-To-Validate-Client.html的文章，对自己的理解有很大的帮助，但还是有点麻烦，我喜欢直来直往的说，傻瓜试的应用。所以，我想写下这些东西，供以后自己回看。
首先，建立一个最简单的例子。
<script src="js/jquery1.7.0.js" type="text/javascript"></script>
<script src="js/jquery.validate.min.js" type="text/javascript"></script>
<script src="js/messages_cn.js" type="text/javascript"></script>
需要引入这些文件，值得说明的是，messages_cn.js这个是我从官方下载下来的，放在“localization”文件夹下面，这里放的都是更种语言的提示文字。我选择的文件是"cn"后缀的，顾名思义，是中国简体字。即使用了这个文件之后，验证信息提示的文字就不会再是英文的了。如果自己想修改提示信息的文字，也可以直接到js里修改。
ps：其实虽然看不懂很多，但是看一下js源文件对自己理解还是有挺大帮助的。
jQuery("#<%=form1.ClientID %>").validate();
需要注册的事件，让页面在submit的时候触发验证，通过默认的或者自定义的规则验证所输入的值。
因为，我用的是asp.net，所以，获取表单是用"#<%=form1.ClientID %>"，而不是html控件的获取方式“#form”，这个只是获取控件对象的方式不同而已。
validate()里面没有参数，使用的是默认的验证规则。
label.error
input.error
这两个样式是验证失败后，文字和控件的样式。
默认的是这样，如果需要自定义验证。就需要在validate（）中写入参数了。
上面是我安装链接作者的例子稍微修改的，本以为我会看懂他的例子，但是我往下看之后，竟然能够看懂一些了。所以，我就到此为止，有空去他的博客看吧。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RegisterMember.aspx.cs" Inherits="AirBtc.Web.Member.RegisterMember" %><%@ Register src="../WebControls/footer.ascx" tagname="footer" tagprefix="uc1" %><%@ Register src="../WebControls/header.ascx" tagname="header" tagprefix="uc2" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head> <title>会员注册-<%=AirBtc.Config.SysConfig.WebSiteName %></title> <meta http-equiv="x-ua-compatible" content="ie=7" /> <script src="jquery-1.5.2.js" type="text/javascript"></script> <script src="../jquery_validate/jquery.validate1.js" type="text/javascript"></script> <script src="../jquery_validate/jQuery.validate.message_cn.js" type="text/javascript"></script> <script src="../jquery_validate/jquery.metadata.js" type="text/javascript"></script> <script src="../jquery_validate/jquery.validate.extension.js" type="text/javascript"></script> <script src="../jquery_validate/cmxforms.js" type="text/javascript"></script> <script type="text/javascript"> jQuery.metadata.setType("attr", "validate"); </script> <%--<script type="text/javascript" src="js/RegisterMember.js"></script>--%> <link type="text/css" rel="Stylesheet" href="/Skin/Flight/Register.css" /> <link type="text/css" rel="Stylesheet" href="/Skin/Flight/login.css" /> <script type="text/javascript"> function InitRules() { var dataInfo = {reqname:function(){ return $("#<%=txtM_user.ClientID %>").val();}}; var remoteInfo = GetRemoteInfo('/Service/webUser.asmx/CheckUid', dataInfo); var dateEmailInfo={email:function(){return $("<%=txtEmail.ClientID %>").val()}}; var remoteEmail = GetRemoteInfo('/Service/webUser.asmx/CheckEmail', dateEmailInfo); var dataCode={vilidateCode:function(){ return $("#<%=txtRM_checkCode.ClientID %>").val();}}; var remoteCode = GetRemoteInfo('/Service/webUser.asmx/CheckValidateCode', dataCode); jQuery.validator.addMethod("telphoneValid", function(value, element) { var tel = /^(130|131|132|133|134|135|136|137|138|139|150|153|157|158|159|180|187|188|189)\d{8}$/; return tel.test(value) || this.optional(element); }, "请输入正确的手机号码"); jQuery.validator.addMethod("telphoneEmailValid", function(value, element) { var tel1 = /^(\b\w+@(\w+\.)+\w+$\b)|((1(3[4-9]|5[012789]|8[78])\d{8})|(1(8[09])\d{8})|(1(3[0-2]|5[56]|8[56])\d{8})|(1[35]3\d{8))$/; return tel1.test(value) || this.optional(element); }, "请输入正确的邮箱或手机号码"); opts = { rules: { <%=txtM_user.UniqueID %>: { required: true, telphoneEmailValid:true, remote:remoteInfo }, <%=txtM_pwd.UniqueID %>: { required: true, minlength: 6 }, <%=txtM_pwd2.UniqueID %>: { required: true, minlength: 6, equalTo:"#<%=txtM_pwd.ClientID %>" }, <%=txtPhone.UniqueID %>: { required: true, telphoneValid:true }, <%=txtEmail.UniqueID %>: { required:true, email: true, remote:remoteEmail }, <%=txtRM_checkCode.UniqueID %>: { required:true, remote:remoteCode }, CheckBoxAgreement:"required" }, messages: { <%=txtM_user.UniqueID %>: { required:"请输入'邮箱/手机号码'做为你的用户帐号。" }, <%=txtM_pwd.UniqueID %>: { required:"请输入密码。", minlength:"请输入6位字符以上的密码。" }, <%=txtPhone.UniqueID %>: { required: "请输入手机号码。" }, <%=txtEmail.UniqueID %>: { required:"请输入邮箱。" }, <%=txtRM_checkCode.UniqueID %>: { required:"请输入验证码。" } },success: function(label) { label.addClass("success").html(" "); } } } </script> <script type="text/javascript"> var opts = null; var isValidationGroup = false; </script> <style type="style/css"> td { height:40px; border:1px solid red; } </style></head><body> <form id="form1" runat="server"> <div id="#Main"> <div> <uc2:header ID="header1" runat="server"/> </div> <div class="wrap"> <!--内容部分--> <div id="DivMemu"> <div class="menu"> </div> <div class="menucenter1"> 用户注册 </div> <div class="menuright"> </div> </div> <div id="contentWordR" class="box"> <table style="width:800px; margin-left:50px;"> <tr> <td colspan="2" class="R_Title">请真实填写您的注册信息</td> </tr> <tr> <td style="width:80px;text-align:right;"><span style="color:red">*</span>用户帐号：</td> <td style="width:600px;"><asp:TextBox ID="txtM_user" runat="server" CssClass="R_txtbox" Text="" MaxLength="20"></asp:TextBox></td> </tr> <tr> <td style="text-align:right;"><span style="color:red">*</span>输入密码：</td> <td><asp:TextBox ID="txtM_pwd" runat="server" TextMode="Password" CssClass="R_txtbox" MaxLength="50"></asp:TextBox></td> </tr> <tr> <td style="text-align:right;"><span style="color:red">*</span>确认密码：</td> <td><asp:TextBox ID="txtM_pwd2" runat="server" TextMode="Password" CssClass="R_txtbox"></asp:TextBox></td> </tr> <tr> <td style="text-align:right;">性别：</td> <td><asp:DropDownList ID="ddlSex" runat="server"> <asp:ListItem Selected="True" Value="1">男</asp:ListItem> <asp:ListItem Value="0">女</asp:ListItem> </asp:DropDownList></td> </tr> <tr> <td style="text-align:right;"><span style="color:red">*</span>手机：</td> <td><asp:TextBox ID="txtPhone" runat="server" CssClass="R_txtbox" MaxLength="30"></asp:TextBox></td> </tr> <tr> <td style="text-align:right;"><span style="color:red">*</span>邮箱：</td> <td><asp:TextBox ID="txtEmail" runat="server" MaxLength="50" CssClass="R_txtbox"></asp:TextBox></td> </tr> <tr> <td style="text-align:right;">真实姓名：</td> <td><asp:TextBox ID="txtM_RealName" runat="server" CssClass="R_txtbox" MaxLength="20"></asp:TextBox></td> </tr> <tr> <td style="text-align:right;">联系地址：</td> <td><asp:TextBox ID="txtM_Address" runat="server" CssClass="R_txtbox" style="width:300px;" CausesValidation="True"></asp:TextBox></td> </tr> <tr> <td style="text-align:right;"><asp:Label ID="lblYicang" runat="server" Text="" Visible="false"></asp:Label></span><span style="color:red">*</span>验证码：</td> <td><asp:TextBox ID="txtRM_checkCode" runat="server" CssClass="R_chkcode" validate="{required:true}" style="margin-left:0px;"></asp:TextBox> </td> </tr> <tr style=" margin-bottom:10px;"> <td></td> <td><script type="text/javascript" language="JavaScript"> var numkey = Math.random(); numkey = Math.round(numkey * 10000); document.write("<img id=\"imgchk_imgchk_lvxoo\" src=\"/Controls/Image.aspx?k=" + numkey + "\" width=\"70\" onClick=\"this.src+=Math.random()\" alt=\"图片看不清？点击重新得到验证码\" style=\"cursor:pointer;\" height=\"30\" hspace=\"4\""); </script></td> </tr> <tr> <td colspan="2"><span style="color:red">*</span>已阅<a href="/AboutUs/TermsOfService.htm" target="_blank" class="lanse">《服务条款》</a><input type="checkbox" style="vertical-align:middle;" id="CheckBoxAgreement" value="email" name="CheckBoxAgreement" validate="required:true" /></td> </tr> <tr> <td colspan="2"> <asp:Button ID="btnInput" runat="server" Text="" onclick="btnInput_Click" /> </td> </tr> </table> </div> <!--内容部分结束--> </div> <div><uc1:footer ID="footer" runat="server"/></div> </div> <script type="text/javascript"> InitRules(); jQuery(document).ready(function() { if (isValidationGroup) { if (opts != undefined || opts != null) { jQuery("#<%=form1.ClientID %>").validate(jQuery.extend(opts, { onsubmit: false })); } else { jQuery("#<%=form1.ClientID %>").validate({ onsubmit: false }); } InitValidationGroup(); } else { if (opts != undefined || opts != null) { jQuery("#<%=form1.ClientID %>").validate(opts); } else { jQuery("#<%=form1.ClientID %>").validate(); } } }); </script> </form></body></html>实践小注意：
在用用户控件嵌套使用的时候，千万不要用两次的jquery.js，即用户控件调用，主页面也调用，否则验证无效
jquery.validation在IE下不出来，是因为html（“ ”）
jquery.validation.js在IE下，用jquery1.5.2才勉强行。
但是，现一个问题不能解决，当对一个控件验证几个规则的时候，成功和失败的信息显示共存了。即上一个规则成功，后一个规则不成功的时候，后一个错误旁边还显示上次成功的图标样式。不解，产生两个lable，一个成功一个失败。
以上只是一个小例子，不能以偏概全，所以当自己不懂的时候，可以去官网下载Demo下来看它的源码。
- jQuery.Validate（Example）
- jquery validate 基础（二）之validate
- jquery.validate插件的（-）
- jQuery.Validate（初级篇）
- jquery validate 基础（一）
- （jquery.validate.unobtrusive.js）
- jquery.validate
- jquery validate
- jquery.validate
- jquery validate
- jquery validate
- jquery validate
- jquery.validate
- jquery validate()
- JQuery.validate
- jquery validate
- jquery validate
- jquery validate
- 服务器端获取外网ip
- linux硬件检测
- C语言字节对齐
- 网络层次协议和结构体系之间的关系
- 设计模式十五（命令模式，python语言实现）
- jQuery.Validate（Example）
- c 复制二进制流
- DIV+CSS网页布局常用的一些基础知识整理
- 项目经理问：为什么总是只有我在加班 – 挂包袱现象
- SCI EI 收录
- 查看linux版本的三种常用方法
- 人生还有四件大事不能糊涂
- 每个字符出现的个数
- Linux动态库的编译与使用
