您的位置：首页 > Web前端 > JQuery

jquery.Validation.js使用手册，案例Demo

2015-08-13 14:45 579 查看

<div id="article_details" class="details">

<div class="article_title">



<h1>

<a href="/luxin8/article/details/41517681">

jquery.Validation.js使用手册，案例Demo

</a>

</h1>

</div>

<div class="article_manage">



分类：

<a href="/luxin8/article/category/2729529" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_fenlei']);">前端技术</a>



2014-11-26 16:17

251人阅读

<a href="#comments" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_pinglun'])">评论</a>(0)

<a href="javascript:void(0);" onclick="javascript:collectArticle('jquery.Validation.js使用手册，案例Demo','41517681');return false;" title="收藏">收藏</a>

<a href="#report" onclick="javascript:report(41517681,2);return false;" title="举报">举报</a>

</div>

<div class="tag2box"><a href="http://www.csdn.net/tag/jquery" target="_blank" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_tag']);">jquery</a><a href="http://www.csdn.net/tag/jquery-validate%e8%b5%84%e6%96%99" target="_blank" onclick="_gaq.push(['_trackEvent','function',
'onclick', 'blog_articles_tag']);">jquery-validate资料</a><a href="http://www.csdn.net/tag/validation" target="_blank" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_tag']);">validation</a><a href="http://www.csdn.net/tag/javascript"
target="_blank" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_tag']);">javascript</a><a href="http://www.csdn.net/tag/c%23" target="_blank" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_tag']);">c#</a></div>

<div style="clear:both"></div><div style="border:solid 1px #ccc; background:#eee; float:left; min-width:200px;padding:4px 10px;">目录<a href="#" title="系统根据文章中H1到H6标签自动生成文章目录">(?)</a><a href="#"
onclick="javascript:return openct(this);" title="展开">[+]</a><ol style="display:none;margin-left:14px;padding-left:14px;line-height:160%;"><li><a href="#t0">从一段基础的HTML开始</a></li><li><a href="#t1">最简单的表单验证方式</a></li><li><a href="#t2">表单内的单个对象数据验证</a></li><li><a
href="#t3">表单数据的基础验证</a></li><li><a href="#t4">使用JS方法验证表单</a></li><li><a href="#t5">修改验证提示样式</a></li><li><a href="#t6">添加自定义验证方法</a></li><li><a href="#t7">在Rules内添加验证函数</a></li><li><a href="#t8">在自定义事件内初始化验证框架</a></li><li><a href="#t9">Validator</a></li><li><a
href="#t10">内置验证方式</a></li><li><a href="#t11">validate 的可选项</a></li><li><a href="#t12"> </a></li></ol></div><div style="clear:both"></div><div id="article_content" class="article_content">

jquery.Validation.js使用手册

联系邮箱：lusens@foxmail.com

<h6><a name="t0"></a>从一段基础的HTML开始：</h6>

<div class="dp-highlighter bg_html"><div class="bar"><div class="tools">[html] <a href="#" class="ViewSource" title="view plain" onclick="dp.sh.Toolbar.Command('ViewSource',this);return false;">view plain</a><a href="#" class="CopyToClipboard" title="copy"
onclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;">copy</a><a href="#" class="PrintSource" title="print" onclick="dp.sh.Toolbar.Command('PrintSource',this);return false;">print</a><a href="#" class="About" title="?" onclick="dp.sh.Toolbar.Command('About',this);return
false;">?</a><div style="position: absolute; left: 473px; top: 534px; width: 18px; height: 18px; z-index: 99;"><embed id="ZeroClipboardMovie_1" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best"
bgcolor="#ffffff" width="18" height="18" name="ZeroClipboardMovie_1" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=1&width=18&height=18"
wmode="transparent"></div></div></div><ol start="1" class="dp-xml"><li class="alt"><!DOCTYPE html> </li><li class=""> </li><li class="alt"><html xmlns="http://www.w3.org/1999/xhtml"> </li><li
class=""><head runat="server"> </li><li
class="alt"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </li><li class=""> <title></title> </li><li class="alt"></head> </li><li
class=""><body> </li><li class="alt"> <form id="form1" runat="server"> </li><li
class=""> <table> </li><li class="alt"> <tr> </li><li class=""> <td>用户名：</td> </li><li class="alt"> <td> </li><li class=""> <input type="text" id="loginName" name="loginName" /></td> </li><li
class="alt"> </tr> </li><li class=""> <tr> </li><li class="alt"> <td>密码：</td> </li><li class=""> <td> </li><li class="alt"> <input type="password" id="loginPwd" name="loginPwd" /></td> </li><li
class=""> </tr> </li><li class="alt"> <tr> </li><li class=""> <td colspan="2"> </li><li class="alt"> <input type="button" id="BtnOK" value="登录" /></td> </li><li
class=""> </tr> </li><li class="alt"> </table> </li><li class=""> </form> </li><li
class="alt"></body> </li><li class=""></html> </li></ol></div><pre
name="code" class="html" style="display: none;"><!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

</head>

<body>

<form id="form1" runat="server">

<table>

<tr>

<td>用户名：</td>

<td>

<input type="text" id="loginName" name="loginName" /></td>

</tr>

<tr>

<td>密码：</td>

<td>

<input type="password" id="loginPwd" name="loginPwd" /></td>

</tr>

<tr>

<td colspan="2">

<input type="button" id="BtnOK" value="登录" /></td>

</tr>

</table>

</form>

</body>

</html></pre>

<h6><a name="t1"></a>最简单的表单验证方式：</h6>

<div class="dp-highlighter bg_html"><div class="bar"><div class="tools">[html] <a href="#" class="ViewSource" title="view plain" onclick="dp.sh.Toolbar.Command('ViewSource',this);return false;">view plain</a><a href="#" class="CopyToClipboard" title="copy"
onclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;">copy</a><a href="#" class="PrintSource" title="print" onclick="dp.sh.Toolbar.Command('PrintSource',this);return false;">print</a><a href="#" class="About" title="?" onclick="dp.sh.Toolbar.Command('About',this);return
false;">?</a><div style="position: absolute; left: 473px; top: 1142px; width: 18px; height: 18px; z-index: 99;"><embed id="ZeroClipboardMovie_2" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best"
bgcolor="#ffffff" width="18" height="18" name="ZeroClipboardMovie_2" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=2&width=18&height=18"
wmode="transparent"></div></div></div><ol start="1" class="dp-xml"><li class="alt"><!DOCTYPE html> </li><li class=""> </li><li class="alt"><html xmlns="http://www.w3.org/1999/xhtml"> </li><li
class=""><head runat="server"> </li><li
class="alt"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </li><li class=""> <script src="../../jQuery/jquery-1.8.3.min.js"></script> </li><li
class="alt"> <script src="../../jQuery/jquery-validation-1.13.1/dist/jquery.validate.min.js"></script> </li><li class=""> <script src="../../jQuery/jquery-validation-1.13.1/dist/additional-methods.js"></script> </li><li
class="alt"> <title></title> </li><li
class=""></head> </li><li class="alt"><body> </li><li
class=""> <form id="form1" runat="server"> </li><li class="alt"> <table> </li><li
class=""> <tr> </li><li class="alt"> <td>用户名：</td> </li><li class=""> <td> </li><li class="alt"> <input type="text" id="loginName" name="loginName" required/></td> </li><li
class=""> </tr> </li><li class="alt"> <tr> </li><li class=""> <td>密码：</td> </li><li class="alt"> <td> </li><li class=""> <input type="password" id="loginPwd" name="loginPwd" /></td> </li><li
class="alt"> </tr> </li><li class=""> <tr> </li><li class="alt"> <td colspan="2"> </li><li class=""> <input type="submit" id="BtnOK" value="登录" /></td> </li><li
class="alt"> </tr> </li><li class=""> </table> </li><li class="alt"> </form> </li><li
class=""></body> </li><li class="alt"></html> </li></ol></div><pre
name="code" class="html" style="display: none;"><!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="../../jQuery/jquery-1.8.3.min.js"></script>

<script src="../../jQuery/jquery-validation-1.13.1/dist/jquery.validate.min.js"></script>

<script src="../../jQuery/jquery-validation-1.13.1/dist/additional-methods.js"></script>

<title></title>

</head>

<body>

<form id="form1" runat="server">

<table>

<tr>

<td>用户名：</td>

<td>

<input type="text" id="loginName" name="loginName" required/></td>

</tr>

<tr>

<td>密码：</td>

<td>

<input type="password" id="loginPwd" name="loginPwd" /></td>

</tr>

<tr>

<td colspan="2">

<input type="submit" id="BtnOK" value="登录" /></td>

</tr>

</table>

</form>

</body>

</html></pre>

上面的HTML代码先引用了jQuery框架，然后引用了jquery.validate验证框架，注意这里的引用顺序不能错。在loginName内添加了required属性，表示该文本框为必填项目，使用submit提交按钮，在表单提交前由框架进行数据校验工作，代码工作截图如下：

<img width="382" height="159" src="http://img.blog.csdn.net/20141126222444351?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbHV4aW44/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center"
alt="">

下面说说该验证框架的使用场景：

1、表单内的单个对象数据验证

2、表单数据的基础验证

3、使用JS方法验证表单数据

4、修改表单验证的提示样式

5、添加自定义的表单验证方法

6、Radio、CheckBox、Select控件的数据验证

7、在Rules内添加验证的函数

8、点击按钮时初始化验证框架并进行数据验证

9、框架的中文API

<h6><a name="t2"></a>1、表单内的单个对象数据验证</h6>

单个对象数据验证仅仅使用到框架的validate()方法，具体参数说明可以参考框架的中文API，验证可以使用如下两种代码方式实现：

方式1：

<div class="dp-highlighter bg_javascript"><div class="bar"><div class="tools">[javascript] <a href="#" class="ViewSource" title="view plain" onclick="dp.sh.Toolbar.Command('ViewSource',this);return false;">view plain</a><a href="#" class="CopyToClipboard"
title="copy" onclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;">copy</a><a href="#" class="PrintSource" title="print" onclick="dp.sh.Toolbar.Command('PrintSource',this);return false;">print</a><a href="#" class="About" title="?" onclick="dp.sh.Toolbar.Command('About',this);return
false;">?</a><div style="position: absolute; left: 508px; top: 2453px; width: 18px; height: 18px; z-index: 99;"><embed id="ZeroClipboardMovie_3" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best"
bgcolor="#ffffff" width="18" height="18" name="ZeroClipboardMovie_3" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=3&width=18&height=18"
wmode="transparent"></div></div></div><ol start="1" class="dp-c"><li class="alt"><script type="text/javascript"> </li><li class=""> $(function () { </li><li class="alt"> $("#BtnOK").click(function () { </li><li
class=""> $("#loginForm").validate().element($("#loginName")); </li><li
class="alt"> }); </li><li class=""> }) </li><li class="alt"> </script> </li><li
class=""><input type="text" id="loginName" name="loginName" class="required"/></td> </li><li class="alt">注意：使用这种方式需要在表单被验证的控件对象内添加class属性，required属性表示必填项，其他验证属性可以参考框架的中文API </li><li class=""> </li><li
class="alt">方式2： </li><li class=""> <script type="text/javascript"> </li><li class="alt"> $(function () { </li><li class=""> var validator = $("#loginForm").validate({ </li><li
class="alt"> rules: { </li><li class=""> "loginName": { </li><li class="alt"> "required": true, </li><li class=""> "minlength": 6 </li><li
class="alt"> } </li><li class=""> }, </li><li
class="alt"> messages: { </li><li class=""> "loginName": { </li><li class="alt"> "required": "请输入登录名", </li><li class=""> "minlength": "登录名最小6个字符" </li><li class="alt"> } </li><li class=""> } </li><li
class="alt"> }); </li><li class=""> </li><li class="alt"> $("#BtnOK").click(function () { </li><li class=""> $("#loginForm").validate().element($("#loginName")); </li><li class="alt"> }); </li><li
class=""> }) </li><li class="alt"></script> </li></ol></div><pre name="code" class="javascript" style="display: none;"><script type="text/javascript">

$(function () {

$("#BtnOK").click(function () {

$("#loginForm").validate().element($("#loginName"));

});

})

</script>

<input type="text" id="loginName" name="loginName" class="required"/></td>

注意：使用这种方式需要在表单被验证的控件对象内添加class属性，required属性表示必填项，其他验证属性可以参考框架的中文API

方式2：

<script type="text/javascript">

$(function () {

var validator = $("#loginForm").validate({

rules: {

"loginName": {

"required": true,

"minlength": 6

}

},

messages: {

"loginName": {

"required": "请输入登录名",

"minlength": "登录名最小6个字符"

}

}

});

$("#BtnOK").click(function () {

$("#loginForm").validate().element($("#loginName"));

});

})

</script></pre>

说明：这种方式不需要对被验证表单内的控件对象添加属性，全部通过JS代码实现即可，首先声明一个validator验证对象，然后使用该对象的element方法查看控件数据是否通过验证。声明validator对象时，可以初始化一些实例属性，包括rules（验证规则），messages（验证失败后的消息提示）等等，具体属性可以参考验证框架的中文API。

<h6><a name="t3"></a>1、表单数据的基础验证</h6>

查看以下HTML代码：

<div class="dp-highlighter bg_javascript"><div class="bar"><div class="tools">[javascript] <a href="#" class="ViewSource" title="view plain" onclick="dp.sh.Toolbar.Command('ViewSource',this);return false;">view plain</a><a href="#" class="CopyToClipboard"
title="copy" onclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;">copy</a><a href="#" class="PrintSource" title="print" onclick="dp.sh.Toolbar.Command('PrintSource',this);return false;">print</a><a href="#" class="About" title="?" onclick="dp.sh.Toolbar.Command('About',this);return
false;">?</a><div style="position: absolute; left: 508px; top: 3291px; width: 18px; height: 18px; z-index: 99;"><embed id="ZeroClipboardMovie_4" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best"
bgcolor="#ffffff" width="18" height="18" name="ZeroClipboardMovie_4" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=4&width=18&height=18"
wmode="transparent"></div></div></div><ol start="1" class="dp-c"><li class="alt"> <script type="text/javascript"> </li><li class=""> $(function () { </li><li class="alt"> $("#loginForm").validate(); </li><li
class=""> }) </li><li class="alt"></script> </li><li class=""> </li><li class="alt"> <form id="loginForm" runat="server"> </li><li class=""> <table> </li><li class="alt"> <tr> </li><li
class=""> <td>用户名：</td> </li><li class="alt"> <td> </li><li
class=""> <input type="text" id="loginName" name="loginName" class="required email" minlength="2"/></td> </li><li
class="alt"> </tr> </li><li class=""> <tr> </li><li class="alt"> <td>密码：</td> </li><li
class=""> <td> </li><li class="alt"> <input type="password" id="loginPwd" name="loginPwd" class="required" minlength="2"/></td> </li><li class=""> </tr> </li><li class="alt"> <tr> </li><li
class=""> <td colspan="2"> </li><li class="alt"> <input type="submit" id="BtnOK" value="登录" /></td> </li><li class=""> </tr> </li><li
class="alt"> </table> </li><li class=""> </form> </li></ol></div><pre name="code" class="javascript" style="display: none;">
<script type="text/javascript">

$(function () {

$("#loginForm").validate();

})

</script>

<form id="loginForm" runat="server">

<table>

<tr>

<td>用户名：</td>

<td>

<input type="text" id="loginName" name="loginName" class="required email" minlength="2"/></td>

</tr>

<tr>

<td>密码：</td>

<td>

<input type="password" id="loginPwd" name="loginPwd" class="required" minlength="2"/></td>

</tr>

<tr>

<td colspan="2">

<input type="submit" id="BtnOK" value="登录" /></td>

</tr>

</table>

</form></pre> 

说明：以上代码需要引用jQuery框架和验证框架代码。首先查看被验证表单的控件对象，添加了class="required email" minlength="2"等属性，required表示必填项，email表示该控件的数据必须符合Email的格式，minlength限制了该控件的数据长度。

注意：这里使用了submit类型的按钮进行表单提交。如果在项目中使用了Button类型的按钮进行表单提交，验证代码需要做如下修改

<div class="dp-highlighter bg_javascript"><div class="bar"><div class="tools">[javascript] <a href="#" class="ViewSource" title="view plain" onclick="dp.sh.Toolbar.Command('ViewSource',this);return false;">view plain</a><a href="#" class="CopyToClipboard"
title="copy" onclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;">copy</a><a href="#" class="PrintSource" title="print" onclick="dp.sh.Toolbar.Command('PrintSource',this);return false;">print</a><a href="#" class="About" title="?" onclick="dp.sh.Toolbar.Command('About',this);return
false;">?</a><div style="position: absolute; left: 508px; top: 3932px; width: 18px; height: 18px; z-index: 99;"><embed id="ZeroClipboardMovie_5" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best"
bgcolor="#ffffff" width="18" height="18" name="ZeroClipboardMovie_5" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=5&width=18&height=18"
wmode="transparent"></div></div></div><ol start="1" class="dp-c"><li class="alt"><input type="button" id="BtnOK" value="登录" /> </li><li
class=""> <script type="text/javascript"> </li><li class="alt"> $(function () { </li><li
class=""> $("#BtnOK").click(function () { </li><li class="alt"> $("#loginForm").validate().form(); </li><li class=""> }) </li><li class="alt"> }) </li><li
class=""></script> </li></ol></div><pre name="code" class="javascript" style="display: none;"><input type="button" id="BtnOK" value="登录" />

<script type="text/javascript">

$(function () {

$("#BtnOK").click(function () {

$("#loginForm").validate().form();

})

})

</script></pre>

说明：该框架在表单提交时默认会自动进行数据验证，如果需要在表单提交之前进行数据验证，可以考虑使用上面的验证方式，上面的代码可以分解为两个步骤，$("#loginForm").validate()声明了一个新的数据验证框架，后面调用了该实例的form()方法进行表单数据验证，最终返回的结果是Boolen类型，该方法的具体说明可以参考中文API文档。

<h6><a name="t4"></a>1、使用JS方法验证表单</h6>

使用JS方法进行表单验证的好处在于不需要在HTML的控件对象代码内添加多余的验证框架自定义的属性，仅仅需要在对象内添加name属性，查看以下代码（需要引入jQuery和验证框架的相关JS文件）：



<div class="dp-highlighter bg_javascript"><div class="bar"><div class="tools">[javascript] <a href="#" class="ViewSource" title="view plain" onclick="dp.sh.Toolbar.Command('ViewSource',this);return false;">view plain</a><a href="#" class="CopyToClipboard"
title="copy" onclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;">copy</a><a href="#" class="PrintSource" title="print" onclick="dp.sh.Toolbar.Command('PrintSource',this);return false;">print</a><a href="#" class="About" title="?" onclick="dp.sh.Toolbar.Command('About',this);return
false;">?</a><div style="position: absolute; left: 508px; top: 4355px; width: 18px; height: 18px; z-index: 99;"><embed id="ZeroClipboardMovie_6" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best"
bgcolor="#ffffff" width="18" height="18" name="ZeroClipboardMovie_6" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=6&width=18&height=18"
wmode="transparent"></div></div></div><ol start="1" class="dp-c"><li class="alt"><html xmlns="http://www.w3.org/1999/xhtml"> </li><li class=""><head runat="server"> </li><li class="alt"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </li><li
class=""> <title></title> </li><li class="alt"> <script type="text/javascript"> </li><li class=""> $(function () { </li><li class="alt"> $("#BtnOK").click(function () { </li><li
class=""> var validator = $("#loginForm").validate({ </li><li
class="alt"> rules: { </li><li class=""> "loginName": { </li><li class="alt"> "required": true, </li><li class=""> "email": true, </li><li class="alt"> "minlength": 6 </li><li class=""> }, </li><li
class="alt"> "loginPwd": { </li><li class=""> "required": true, </li><li class="alt"> "minlength": 6, </li><li class=""> "maxlength": 15 </li><li class="alt"> } </li><li
class=""> }, </li><li class="alt"> messages: { </li><li
class=""> "loginName": { </li><li class="alt"> "required": "请输入登录名", </li><li class=""> "email": "登录名格式错误", </li><li class="alt"> "minlength": "登录名最小6个字符" </li><li class=""> }, </li><li
class="alt"> "loginPwd": { </li><li class=""> "required": "请输入密码", </li><li class="alt"> "minlength":"密码最小6位", </li><li class=""> "maxlength": "密码最大15位" </li><li class="alt"> } </li><li
class=""> } </li><li class="alt"> }); </li><li
class=""> </li><li class="alt"> $("#BtnOK").click(function () { </li><li
class=""> $("#loginForm").validate().form(); </li><li class="alt"> }); </li><li
class=""> }) </li><li class="alt"> }) </li><li class=""> </script> </li><li
class="alt"></head> </li><li class=""><body> </li><li class="alt"> <form id="loginForm" runat="server"> </li><li
class=""> <table> </li><li class="alt"> <tr> </li><li class=""> <td>用户名：</td> </li><li
class="alt"> <td> </li><li class=""> <input type="text" id="loginName" name="loginName"/></td> </li><li class="alt"> </tr> </li><li
class=""> <tr> </li><li class="alt"> <td>密码：</td> </li><li
class=""> <td> </li><li class="alt"> <input type="password" id="loginPwd" name="loginPwd"/></td> </li><li class=""> </tr> </li><li
class="alt"> <tr> </li><li class=""> <td colspan="2"> </li><li class="alt"> <input type="button" id="BtnOK" value="登录" /></td> </li><li class=""> </tr> </li><li
class="alt"> </table> </li><li class=""> </form> </li><li class="alt"></body> </li><li class=""></html> </li></ol></div><pre
name="code" class="javascript" style="display: none;"><html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<script type="text/javascript">

$(function () {

$("#BtnOK").click(function () {

var validator = $("#loginForm").validate({

rules: {

"loginName": {

"required": true,

"email": true,

"minlength": 6

},

"loginPwd": {

"required": true,

"minlength": 6,

"maxlength": 15

}

},

messages: {

"loginName": {

"required": "请输入登录名",

"email": "登录名格式错误",

"minlength": "登录名最小6个字符"

},

"loginPwd": {

"required": "请输入密码",

"minlength":"密码最小6位",

"maxlength": "密码最大15位"

}

}

});

$("#BtnOK").click(function () {

$("#loginForm").validate().form();

});

})

})

</script>

</head>

<body>

<form id="loginForm" runat="server">

<table>

<tr>

<td>用户名：</td>

<td>

<input type="text" id="loginName" name="loginName"/></td>

</tr>

<tr>

<td>密码：</td>

<td>

<input type="password" id="loginPwd" name="loginPwd"/></td>

</tr>

<tr>

<td colspan="2">

<input type="button" id="BtnOK" value="登录" /></td>

</tr>

</table>

</form>

</body>

</html></pre>



说明：以上代码使用的验证方式依旧是首先声明验证框架对象（在声明对象是初始化了对象的需要属性），然后在按钮的邦定事件内添加了验证框架实例的表单验证方法。点击按钮后框架验证效果如下：

 

<img width="397" height="101" src="http://img.blog.csdn.net/20141126222750725?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbHV4aW44/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center"
alt="">

 

<h6><a name="t5"></a>1、修改验证提示样式</h6>

在控件数据验证失败时，可以修改验证失败控件的样式以及错误的提示样式，使用到的依旧是框架在声明是初始化的相关属性，查看以下代码：



<div class="dp-highlighter bg_javascript"><div class="bar"><div class="tools">[javascript] <a href="#" class="ViewSource" title="view plain" onclick="dp.sh.Toolbar.Command('ViewSource',this);return false;">view plain</a><a href="#" class="CopyToClipboard"
title="copy" onclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;">copy</a><a href="#" class="PrintSource" title="print" onclick="dp.sh.Toolbar.Command('PrintSource',this);return false;">print</a><a href="#" class="About" title="?" onclick="dp.sh.Toolbar.Command('About',this);return
false;">?</a><div style="position: absolute; left: 508px; top: 5851px; width: 18px; height: 18px; z-index: 99;"><embed id="ZeroClipboardMovie_7" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best"
bgcolor="#ffffff" width="18" height="18" name="ZeroClipboardMovie_7" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=7&width=18&height=18"
wmode="transparent"></div></div></div><ol start="1" class="dp-c"><li class="alt"><style type="text/css"> </li><li class=""> .ErrorBorder { border-width: 2px; border-color: red; } </li><li
class="alt"> </style> </li><li class=""> <script type="text/javascript"> </li><li class="alt"> $(function () { </li><li class=""> $("#BtnOK").click(function () { </li><li
class="alt"> var validator = $("#loginForm").validate({ </li><li
class=""> rules: { </li><li class="alt"> "loginName": { </li><li class=""> "required": true, </li><li class="alt"> "email": true, </li><li class=""> "minlength": 6 </li><li class="alt"> }, </li><li
class=""> "loginPwd": { </li><li class="alt"> "required": true, </li><li class=""> "minlength": 6, </li><li class="alt"> "maxlength": 15 </li><li class=""> } </li><li
class="alt"> }, </li><li class=""> messages: { </li><li
class="alt"> "loginName": { </li><li class=""> "required": "请输入登录名", </li><li class="alt"> "email": "登录名格式错误", </li><li class=""> "minlength": "登录名最小6个字符" </li><li class="alt"> }, </li><li
class=""> "loginPwd": { </li><li class="alt"> "required": "请输入密码", </li><li class=""> "minlength": "密码最小6位", </li><li class="alt"> "maxlength": "密码最大15位" </li><li class=""> } </li><li
class="alt"> }, </li><li class=""> errorClass: "ErrorBorder" </li><li class="alt"> }); </li><li class=""> </li><li
class="alt"> $("#BtnOK").click(function () { </li><li
class=""> $("#loginForm").validate().form(); </li><li class="alt"> }); </li><li
class=""> }) </li><li class="alt"> }) </li><li class=""> </script> </li></ol></div><pre
name="code" class="javascript" style="display: none;"><style type="text/css">

.ErrorBorder { border-width: 2px; border-color: red; }

</style>

<script type="text/javascript">

$(function () {

$("#BtnOK").click(function () {

var validator = $("#loginForm").validate({

rules: {

"loginName": {

"required": true,

"email": true,

"minlength": 6

},

"loginPwd": {

"required": true,

"minlength": 6,

"maxlength": 15

}

},

messages: {

"loginName": {

"required": "请输入登录名",

"email": "登录名格式错误",

"minlength": "登录名最小6个字符"

},

"loginPwd": {

"required": "请输入密码",

"minlength": "密码最小6位",

"maxlength": "密码最大15位"

}

},

errorClass: "ErrorBorder"

});

$("#BtnOK").click(function () {

$("#loginForm").validate().form();

});

})

})

</script></pre> 



说明：首先定义了ErrorBorder的css属性，该属性定义了控件边框宽度为2px，颜色为红色，在validate框架声明时定义了errorClass属性，并为该属性赋予ErrorBorder值，下面查看该代码运行时的效果

 

<img width="414" height="85" src="http://img.blog.csdn.net/20141126222851815?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbHV4aW44/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center"
alt="">

点击登录按钮后，表单的控件对象边框按照定义的CSS样式改变，输入符合验证规则的数据后，表单控件对象样式自动恢复正常，如下图：

 

<img width="353" height="90" src="http://img.blog.csdn.net/20141126222910316?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbHV4aW44/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center"
alt="">

以上修改主要使用了验证框架的errorClass属性，在验证框架中本身已经内置了 validation.css样式文件进行表单上控件对象的样式控制。

在上面的代码内，错误提示据使用label控件放置，同时可以对错误提示的样式进行修改，查看以下代码：

<div class="dp-highlighter bg_javascript"><div class="bar"><div class="tools">[javascript] <a href="#" class="ViewSource" title="view plain" onclick="dp.sh.Toolbar.Command('ViewSource',this);return false;">view plain</a><a href="#" class="CopyToClipboard"
title="copy" onclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;">copy</a><a href="#" class="PrintSource" title="print" onclick="dp.sh.Toolbar.Command('PrintSource',this);return false;">print</a><a href="#" class="About" title="?" onclick="dp.sh.Toolbar.Command('About',this);return
false;">?</a><div style="position: absolute; left: 508px; top: 7095px; width: 18px; height: 18px; z-index: 99;"><embed id="ZeroClipboardMovie_8" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best"
bgcolor="#ffffff" width="18" height="18" name="ZeroClipboardMovie_8" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=8&width=18&height=18"
wmode="transparent"></div></div></div><ol start="1" class="dp-c"><li class="alt"><html xmlns="http://www.w3.org/1999/xhtml"> </li><li class=""><head runat="server"> </li><li class="alt"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </li><li
class=""> <title></title> </li><li class="alt"> <script src="../../jQuery/jquery-1.8.3.min.js"></script> </li><li
class=""> <script src="../../jQuery/jquery-validation-1.13.1/dist/jquery.validate.min.js"></script> </li><li class="alt"> <script src="../../jQuery/jquery-validation-1.13.1/dist/additional-methods.js"></script> </li><li class=""> <script src="../../jQuery/layer-v1.8.5/layer/layer.min.js"></script> </li><li
class="alt"> <style type="text/css"> </li><li class=""> .ErrorBorder { border-width: 2px; border-color: red; } </li><li
class="alt"> </style> </li><li class=""> <script type="text/javascript"> </li><li class="alt"> $(function () { </li><li class=""> $("#BtnOK").click(function () { </li><li
class="alt"> var validator = $("#loginForm").validate({ </li><li
class=""> rules: { </li><li class="alt"> "loginName": { </li><li class=""> "required": true, </li><li class="alt"> "email": true, </li><li class=""> "minlength": 6 </li><li class="alt"> }, </li><li
class=""> "loginPwd": { </li><li class="alt"> "required": true, </li><li class=""> "minlength": 6, </li><li class="alt"> "maxlength": 15 </li><li class=""> } </li><li
class="alt"> }, </li><li class=""> messages: { </li><li
class="alt"> "loginName": { </li><li class=""> "required": "请输入登录名", </li><li class="alt"> "email": "登录名格式错误", </li><li class=""> "minlength": "登录名最小6个字符" </li><li class="alt"> }, </li><li
class=""> "loginPwd": { </li><li class="alt"> "required": "请输入密码", </li><li class=""> "minlength": "密码最小6位", </li><li class="alt"> "maxlength": "密码最大15位" </li><li class=""> } </li><li
class="alt"> }, </li><li class=""> showErrors: function (errorMap, errorList) { </li><li class="alt"> if (errorList.length > 0) { </li><li class=""> layer.tips(errorList[0].message, errorList[0].element, { </li><li
class="alt"> time: 2, </li><li class=""> closeBtn: [0, true], </li><li class="alt"> style: ['background-color:#F26C4F; color:#fff;border:1px solid #FFF3EE;', '#F26C4F'], </li><li class=""> maxWidth: 200 </li><li
class="alt"> }); </li><li class=""> } </li><li
class="alt"> } </li><li class=""> }); </li><li
class="alt"> </li><li class=""> $("#BtnOK").click(function () { </li><li
class="alt"> $("#loginForm").validate().form(); </li><li class=""> }); </li><li
class="alt"> }) </li><li class=""> }) </li><li class="alt"> </script> </li><li
class=""></head> </li><li class="alt"><body> </li><li class=""> <form id="loginForm" runat="server"> </li><li
class="alt"> <table> </li><li class=""> <tr> </li><li class="alt"> <td>用户名：</td> </li><li
class=""> <td> </li><li class="alt"> <input type="text" id="loginName" name="loginName"/></td> </li><li class=""> </tr> </li><li
class="alt"> <tr> </li><li class=""> <td>密码：</td> </li><li
class="alt"> <td> </li><li class=""> <input type="password" id="loginPwd" name="loginPwd"/></td> </li><li class="alt"> </tr> </li><li
class=""> <tr> </li><li class="alt"> <td colspan="2"> </li><li class=""> <input type="button" id="BtnOK" value="登录" /></td> </li><li class="alt"> </tr> </li><li
class=""> </table> </li><li class="alt"> </form> </li><li class=""></body> </li><li class="alt"></html> </li></ol></div><pre
name="code" class="javascript" style="display: none;"><html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<script src="../../jQuery/jquery-1.8.3.min.js"></script>

<script src="../../jQuery/jquery-validation-1.13.1/dist/jquery.validate.min.js"></script>

<script src="../../jQuery/jquery-validation-1.13.1/dist/additional-methods.js"></script>

<script src="../../jQuery/layer-v1.8.5/layer/layer.min.js"></script>

<style type="text/css">

.ErrorBorder { border-width: 2px; border-color: red; }

</style>

<script type="text/javascript">

$(function () {

$("#BtnOK").click(function () {

var validator = $("#loginForm").validate({

rules: {

"loginName": {

"required": true,

"email": true,

"minlength": 6

},

"loginPwd": {

"required": true,

"minlength": 6,

"maxlength": 15

}

},

messages: {

"loginName": {

"required": "请输入登录名",

"email": "登录名格式错误",

"minlength": "登录名最小6个字符"

},

"loginPwd": {

"required": "请输入密码",

"minlength": "密码最小6位",

"maxlength": "密码最大15位"

}

},

showErrors: function (errorMap, errorList) {

if (errorList.length > 0) {

layer.tips(errorList[0].message, errorList[0].element, {

time: 2,

closeBtn: [0, true],

style: ['background-color:#F26C4F; color:#fff;border:1px solid #FFF3EE;', '#F26C4F'],

maxWidth: 200

});

}

}

});

$("#BtnOK").click(function () {

$("#loginForm").validate().form();

});

})

})

</script>

</head>

<body>

<form id="loginForm" runat="server">

<table>

<tr>

<td>用户名：</td>

<td>

<input type="text" id="loginName" name="loginName"/></td>

</tr>

<tr>

<td>密码：</td>

<td>

<input type="password" id="loginPwd" name="loginPwd"/></td>

</tr>

<tr>

<td colspan="2">

<input type="button" id="BtnOK" value="登录" /></td>

</tr>

</table>

</form>

</body>

</html></pre>

说明：上面的代码在修改表单控件样式代码的基础上，仅仅修改了两处，一是使用<script src="../../jQuery/layer-v1.8.5/layer/layer.min.js"></script>代码引入layer代码库，二是在声明验证控件时定义了showErrors属性，在该属性内使用回调方法进行错误代码的控制，上面的代码是使用layer层进行错误代码弹出及显示，同样使用其他JS代码进行相关控制。showErrors属性的相关说明，可以参考验证框架中文API，以上代码的运行结果如下图：

 

<img width="317" height="102" src="http://img.blog.csdn.net/20141126223003484?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbHV4aW44/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center"
alt="">

<h6><a name="t6"></a>1、添加自定义验证方法</h6>

validate验证框架内置了19种验证方法，但是因为本地化等原因，内置的验证方法并不能完全满足网页前端开发时遇到的数据验证情况，但是框架内置了additional-methods.js文件，可以自行添加验证方法。例如对于大陆的身份证验证，笔者添加了如下方法：

<div class="dp-highlighter bg_javascript"><div class="bar"><div class="tools">[javascript] <a href="#" class="ViewSource" title="view plain" onclick="dp.sh.Toolbar.Command('ViewSource',this);return false;">view plain</a><a href="#" class="CopyToClipboard"
title="copy" onclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;">copy</a><a href="#" class="PrintSource" title="print" onclick="dp.sh.Toolbar.Command('PrintSource',this);return false;">print</a><a href="#" class="About" title="?" onclick="dp.sh.Toolbar.Command('About',this);return
false;">?</a><div style="position: absolute; left: 508px; top: 8968px; width: 18px; height: 18px; z-index: 99;"><embed id="ZeroClipboardMovie_9" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best"
bgcolor="#ffffff" width="18" height="18" name="ZeroClipboardMovie_9" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=9&width=18&height=18"
wmode="transparent"></div></div></div><ol start="1" class="dp-c"><li class="alt">// 身份证号码验证 </li><li class="">$.validator.addMethod("isIdCardNo", function (value, element) { </li><li class="alt"> //var idCard = /^(\d{6})()?(\d{4})(\d{2})(\d{2})(\d{3})(\w)$/; </li><li
class=""> return this.optional(element) || isIdCardNo(value); </li><li class="alt">}, "请输入正确的身份证号码。"); </li></ol></div><pre
name="code" class="javascript" style="display: none;">// 身份证号码验证

$.validator.addMethod("isIdCardNo", function (value, element) {

//var idCard = /^(\d{6})()?(\d{4})(\d{2})(\d{2})(\d{3})(\w)$/;

return this.optional(element) || isIdCardNo(value);

}, "请输入正确的身份证号码。");</pre>6、Radio、CheckBox、DropDownSelect控件的验证 

radio 的 required 表示必须选中一个。

checkbox 的 required 表示必须选中。checkbox 的 minlength 表示必须选中的最小个数，maxlength 表示最大的选中个数，rangelength:[2,3] 表示选中个数区间。

select 的 required 表示选中的 value 不能为空。 Select 的 minlength 表示选中的最小个数（可多选的 select），maxlength 表示最大的选中个数，rangelength:[2,3] 表示选中个数区间。

<div class="dp-highlighter bg_javascript"><div class="bar"><div class="tools">[javascript] <a href="#" class="ViewSource" title="view plain" onclick="dp.sh.Toolbar.Command('ViewSource',this);return false;">view plain</a><a href="#" class="CopyToClipboard"
title="copy" onclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;">copy</a><a href="#" class="PrintSource" title="print" onclick="dp.sh.Toolbar.Command('PrintSource',this);return false;">print</a><a href="#" class="About" title="?" onclick="dp.sh.Toolbar.Command('About',this);return
false;">?</a><div style="position: absolute; left: 508px; top: 9337px; width: 18px; height: 18px; z-index: 99;"><embed id="ZeroClipboardMovie_10" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best"
bgcolor="#ffffff" width="18" height="18" name="ZeroClipboardMovie_10" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=10&width=18&height=18"
wmode="transparent"></div></div></div><ol start="1" class="dp-c"><li class="alt"><html xmlns="http://www.w3.org/1999/xhtml"> </li><li class=""><head runat="server"> </li><li class="alt"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </li><li
class=""> <title></title> </li><li class="alt"> <script src="../../jQuery/jquery-1.8.3.min.js"></script> </li><li
class=""> <script src="../../jQuery/jquery-validation-1.13.1/dist/jquery.validate.min.js"></script> </li><li class="alt"> <script src="../../jQuery/jquery-validation-1.13.1/dist/additional-methods.js"></script> </li><li class=""> <script src="../../jQuery/layer-v1.8.5/layer/layer.min.js"></script> </li><li
class="alt"> <script type="text/javascript"> </li><li class=""> var validator; </li><li
class="alt"> $(function () { </li><li class=""> $("#BtnOK").click(function () { </li><li class="alt"> validator.form(); </li><li
class=""> }) </li><li class="alt"> </li><li class=""> validator = $("#loginForm").validate({ </li><li class="alt"> rules: { </li><li class=""> "loginPwd": { </li><li class="alt"> "minlength": 6, </li><li
class=""> "maxlength": 15 </li><li class="alt"> }, </li><li
class=""> "loginName": { </li><li class="alt"> "email": true, </li><li class=""> "minlength": 6 </li><li class="alt"> }, </li><li class=""> "sex": "required", </li><li class="alt"> "LoginType":{ </li><li class=""> "required": true, </li><li class="alt"> "rangelength":[1,3] </li><li
class=""> }, </li><li class="alt"> "LoginSele": "required" </li><li class=""> }, </li><li
class="alt"> messages: { </li><li class=""> "loginPwd": { </li><li class="alt"> "minlength": "密码最小6位", </li><li class=""> "maxlength": "密码最大15位" </li><li class="alt"> }, </li><li class=""> "loginName": { </li><li class="alt"> "email": "登录名格式错误", </li><li class=""> "minlength": "登录名最小6个字符" </li><li class="alt"> }, </li><li class=""> "sex": "请选择用户性别", </li><li class="alt"> "LoginType": { </li><li class=""> "required": "请选择", </li><li class="alt"> "rangelength": "选择1-3个项目" </li><li class=""> }, </li><li class="alt"> "LoginSele": "必选" </li><li class=""> }, </li><li
class="alt"> showErrors: function (errorMap, errorList) { </li><li class=""> if (errorList.length > 0) { </li><li class="alt"> layer.tips(errorList[0].message, errorList[0].element, { </li><li
class=""> time: 2, </li><li class="alt"> closeBtn: [0, true], </li><li class=""> style: ['background-color:#F26C4F; color:#fff;border:1px solid #FFF3EE;', '#F26C4F'], </li><li class="alt"> maxWidth: 200 </li><li
class=""> }); </li><li class="alt"> } </li><li
class=""> } </li><li class="alt"> }) </li><li
class=""> }); </li><li class="alt"> </li><li class=""> </script> </li><li
class="alt"></head> </li><li class=""><body> </li><li class="alt"> <form id="loginForm" runat="server"> </li><li
class=""> <table> </li><li class="alt"> <tr> </li><li class=""> <td>用户名：</td> </li><li
class="alt"> <td> </li><li class=""> <input type="text" id="loginName" name="loginName"/></td> </li><li class="alt"> </tr> </li><li
class=""> <tr> </li><li class="alt"> <td>密码：</td> </li><li
class=""> <td> </li><li class="alt"> <input type="password" id="loginPwd" name="loginPwd"/></td> </li><li class=""> </tr> </li><li
class="alt"> <tr> </li><li class=""> <td colspan="2"> </li><li class="alt"> <input type="radio" name="sex" value="1" />男 </li><li class=""> <input type="radio" name="sex" value="0" />女 </li><li class="alt"> </td> </li><li
class=""> </tr> </li><li class="alt"> <tr> </li><li class=""> <td colspan="2"> </li><li class="alt"> <input type="checkbox" name="LoginType" value="0" />用户名 </li><li class=""> <input type="checkbox" name="LoginType" value="1" />密码 </li><li class="alt"> <input type="checkbox" name="LoginType" value="2" />测试1 </li><li class=""> <input type="checkbox" name="LoginType" value="3" />测试2 </li><li class="alt"> </td> </li><li
class=""> </tr> </li><li class="alt"> <tr> </li><li class=""> <td colspan="2"> </li><li class="alt"> <select name="LoginSele"> </li><li
class=""> <option>--请选择--</option> </li><li class="alt"> <option value="0">0000</option> </li><li class=""> <option value="1">1111</option> </li><li class="alt"> <option value="2">2222</option> </li><li class=""> <option value="3">3333</option> </li><li class="alt"> </select> </li><li
class=""> </td> </li><li class="alt"> </tr> </li><li
class=""> <tr> </li><li class="alt"> <td colspan="2"> </li><li class=""> <input type="button" id="BtnOK" value="登录" /></td> </li><li class="alt"> </tr> </li><li
class=""> </table> </li><li class="alt"> </form> </li><li class=""></body> </li><li class="alt"></html> </li></ol></div><pre
name="code" class="javascript" style="display: none;"><html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<script src="../../jQuery/jquery-1.8.3.min.js"></script>

<script src="../../jQuery/jquery-validation-1.13.1/dist/jquery.validate.min.js"></script>

<script src="../../jQuery/jquery-validation-1.13.1/dist/additional-methods.js"></script>

<script src="../../jQuery/layer-v1.8.5/layer/layer.min.js"></script>

<script type="text/javascript">

var validator;

$(function () {

$("#BtnOK").click(function () {

validator.form();

})

validator = $("#loginForm").validate({

rules: {

"loginPwd": {

"minlength": 6,

"maxlength": 15

},

"loginName": {

"email": true,

"minlength": 6

},

"sex": "required",

"LoginType":{

"required": true,

"rangelength":[1,3]

},

"LoginSele": "required"

},

messages: {

"loginPwd": {

"minlength": "密码最小6位",

"maxlength": "密码最大15位"

},

"loginName": {

"email": "登录名格式错误",

"minlength": "登录名最小6个字符"

},

"sex": "请选择用户性别",

"LoginType": {

"required": "请选择",

"rangelength": "选择1-3个项目"

},

"LoginSele": "必选"

},

showErrors: function (errorMap, errorList) {

if (errorList.length > 0) {

layer.tips(errorList[0].message, errorList[0].element, {

time: 2,

closeBtn: [0, true],

style: ['background-color:#F26C4F; color:#fff;border:1px solid #FFF3EE;', '#F26C4F'],

maxWidth: 200

});

}

}

})

});

</script>

</head>

<body>

<form id="loginForm" runat="server">

<table>

<tr>

<td>用户名：</td>

<td>

<input type="text" id="loginName" name="loginName"/></td>

</tr>

<tr>

<td>密码：</td>

<td>

<input type="password" id="loginPwd" name="loginPwd"/></td>

</tr>

<tr>

<td colspan="2">

<input type="radio" name="sex" value="1" />男

<input type="radio" name="sex" value="0" />女

</td>

</tr>

<tr>

<td colspan="2">

<input type="checkbox" name="LoginType" value="0" />用户名

<input type="checkbox" name="LoginType" value="1" />密码

<input type="checkbox" name="LoginType" value="2" />测试1

<input type="checkbox" name="LoginType" value="3" />测试2

</td>

</tr>

<tr>

<td colspan="2">

<select name="LoginSele">

<option>--请选择--</option>

<option value="0">0000</option>

<option value="1">1111</option>

<option value="2">2222</option>

<option value="3">3333</option>

</select>

</td>

</tr>

<tr>

<td colspan="2">

<input type="button" id="BtnOK" value="登录" /></td>

</tr>

</table>

</form>

</body>

</html></pre> 

<h6><a name="t7"></a>7、在Rules内添加验证函数</h6>

在实例化验证框架的函数内，Rules参数可以支持方法，假设有如下应用场景，根据某个条件来决定是否验证密码的必填属性，代码如下：

<div class="dp-highlighter bg_javascript"><div class="bar"><div class="tools">[javascript] <a href="#" class="ViewSource" title="view plain" onclick="dp.sh.Toolbar.Command('ViewSource',this);return false;">view plain</a><a href="#" class="CopyToClipboard"
title="copy" onclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;">copy</a><a href="#" class="PrintSource" title="print" onclick="dp.sh.Toolbar.Command('PrintSource',this);return false;">print</a><a href="#" class="About" title="?" onclick="dp.sh.Toolbar.Command('About',this);return
false;">?</a><div style="position: absolute; left: 508px; top: 11473px; width: 18px; height: 18px; z-index: 99;"><embed id="ZeroClipboardMovie_11" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best"
bgcolor="#ffffff" width="18" height="18" name="ZeroClipboardMovie_11" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=11&width=18&height=18"
wmode="transparent"></div></div></div><ol start="1" class="dp-c"><li class="alt"><html xmlns="http://www.w3.org/1999/xhtml"> </li><li class=""><head runat="server"> </li><li class="alt"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </li><li
class=""> <title></title> </li><li class="alt"> <script src="../../jQuery/jquery-1.8.3.min.js"></script> </li><li
class=""> <script src="../../jQuery/jquery-validation-1.13.1/dist/jquery.validate.min.js"></script> </li><li class="alt"> <script src="../../jQuery/jquery-validation-1.13.1/dist/additional-methods.js"></script> </li><li class=""> <script src="../../jQuery/layer-v1.8.5/layer/layer.min.js"></script> </li><li
class="alt"> <script type="text/javascript"> </li><li class=""> var validator; </li><li
class="alt"> $(function () { </li><li class=""> $("#BtnOK").click(function () { </li><li class="alt"> validator.form(); </li><li
class=""> }) </li><li class="alt"> </li><li class=""> validator = $("#loginForm").validate({ </li><li class="alt"> rules: { </li><li class=""> "loginPwd": { </li><li class="alt"> "minlength": 6, </li><li
class=""> "maxlength": 15 </li><li class="alt"> }, </li><li
class=""> "loginName": { </li><li class="alt"> "email": true, </li><li class=""> "minlength": 6, </li><li class="alt"> "required": function () { </li><li class=""> var check = $("input[name='CheckPwd']:checked").val(); </li><li class="alt"> return check; </li><li class=""> } </li><li
class="alt"> }, </li><li class=""> "sex": "required", </li><li class="alt"> "LoginType":{ </li><li class=""> "required": true, </li><li class="alt"> "rangelength":[1,3] </li><li
class=""> }, </li><li class="alt"> "LoginSele": "required" </li><li class=""> }, </li><li
class="alt"> messages: { </li><li class=""> "loginPwd": { </li><li class="alt"> "minlength": "密码最小6位", </li><li class=""> "maxlength": "密码最大15位" </li><li class="alt"> }, </li><li class=""> "loginName": { </li><li class="alt"> "email": "登录名格式错误", </li><li class=""> "minlength": "登录名最小6个字符" </li><li class="alt"> }, </li><li class=""> "sex": "请选择用户性别", </li><li class="alt"> "LoginType": { </li><li class=""> "required": "请选择", </li><li class="alt"> "rangelength": "选择1-3个项目" </li><li class=""> }, </li><li class="alt"> "LoginSele": "必选" </li><li class=""> }, </li><li
class="alt"> showErrors: function (errorMap, errorList) { </li><li class=""> if (errorList.length > 0) { </li><li class="alt"> layer.tips(errorList[0].message, errorList[0].element, { </li><li
class=""> time: 2, </li><li class="alt"> closeBtn: [0, true], </li><li class=""> style: ['background-color:#F26C4F; color:#fff;border:1px solid #FFF3EE;', '#F26C4F'], </li><li class="alt"> maxWidth: 200 </li><li
class=""> }); </li><li class="alt"> } </li><li
class=""> } </li><li class="alt"> }) </li><li
class=""> }); </li><li class="alt"> </li><li class=""> </script> </li><li
class="alt"></head> </li><li class=""><body> </li><li class="alt"> <form id="loginForm" runat="server"> </li><li
class=""> <table> </li><li class="alt"> <tr> </li><li class=""> <td colspan="2"> </li><li class="alt"> 是否验证密码：<input type="radio" name="CheckPwd" value="1" />是 </li><li class=""> <input type="radio" name="CheckPwd" value="0" />否 </li><li class="alt"> </td> </li><li
class=""> </tr> </li><li class="alt"> <tr> </li><li class=""> <td>用户名：</td> </li><li
class="alt"> <td> </li><li class=""> <input type="text" id="loginName" name="loginName"/></td> </li><li class="alt"> </tr> </li><li
class=""> <tr> </li><li class="alt"> <td>密码：</td> </li><li
class=""> <td> </li><li class="alt"> <input type="password" id="loginPwd" name="loginPwd"/></td> </li><li class=""> </tr> </li><li
class="alt"> <tr> </li><li class=""> <td colspan="2"> </li><li class="alt"> <input type="radio" name="sex" value="1" />男 </li><li class=""> <input type="radio" name="sex" value="0" />女 </li><li class="alt"> </td> </li><li
class=""> </tr> </li><li class="alt"> <tr> </li><li class=""> <td colspan="2"> </li><li class="alt"> <input type="checkbox" name="LoginType" value="0" />用户名 </li><li class=""> <input type="checkbox" name="LoginType" value="1" />密码 </li><li class="alt"> <input type="checkbox" name="LoginType" value="2" />测试1 </li><li class=""> <input type="checkbox" name="LoginType" value="3" />测试2 </li><li class="alt"> </td> </li><li
class=""> </tr> </li><li class="alt"> <tr> </li><li class=""> <td colspan="2"> </li><li class="alt"> <select name="LoginSele"> </li><li
class=""> <option>--请选择--</option> </li><li class="alt"> <option value="0">0000</option> </li><li class=""> <option value="1">1111</option> </li><li class="alt"> <option value="2">2222</option> </li><li class=""> <option value="3">3333</option> </li><li class="alt"> </select> </li><li
class=""> </td> </li><li class="alt"> </tr> </li><li
class=""> <tr> </li><li class="alt"> <td colspan="2"> </li><li class=""> <input type="button" id="BtnOK" value="登录" /></td> </li><li class="alt"> </tr> </li><li
class=""> </table> </li><li class="alt"> </form> </li><li class=""></body> </li><li class="alt"></html> </li></ol></div><pre
name="code" class="javascript" style="display: none;"><html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<script src="../../jQuery/jquery-1.8.3.min.js"></script>

<script src="../../jQuery/jquery-validation-1.13.1/dist/jquery.validate.min.js"></script>

<script src="../../jQuery/jquery-validation-1.13.1/dist/additional-methods.js"></script>

<script src="../../jQuery/layer-v1.8.5/layer/layer.min.js"></script>

<script type="text/javascript">

var validator;

$(function () {

$("#BtnOK").click(function () {

validator.form();

})

validator = $("#loginForm").validate({

rules: {

"loginPwd": {

"minlength": 6,

"maxlength": 15

},

"loginName": {

"email": true,

"minlength": 6,

"required": function () {

var check = $("input[name='CheckPwd']:checked").val();

return check;

}

},

"sex": "required",

"LoginType":{

"required": true,

"rangelength":[1,3]

},

"LoginSele": "required"

},

messages: {

"loginPwd": {

"minlength": "密码最小6位",

"maxlength": "密码最大15位"

},

"loginName": {

"email": "登录名格式错误",

"minlength": "登录名最小6个字符"

},

"sex": "请选择用户性别",

"LoginType": {

"required": "请选择",

"rangelength": "选择1-3个项目"

},

"LoginSele": "必选"

},

showErrors: function (errorMap, errorList) {

if (errorList.length > 0) {

layer.tips(errorList[0].message, errorList[0].element, {

time: 2,

closeBtn: [0, true],

style: ['background-color:#F26C4F; color:#fff;border:1px solid #FFF3EE;', '#F26C4F'],

maxWidth: 200

});

}

}

})

});

</script>

</head>

<body>

<form id="loginForm" runat="server">

<table>

<tr>

<td colspan="2">

是否验证密码：<input type="radio" name="CheckPwd" value="1" />是

<input type="radio" name="CheckPwd" value="0" />否

</td>

</tr>

<tr>

<td>用户名：</td>

<td>

<input type="text" id="loginName" name="loginName"/></td>

</tr>

<tr>

<td>密码：</td>

<td>

<input type="password" id="loginPwd" name="loginPwd"/></td>

</tr>

<tr>

<td colspan="2">

<input type="radio" name="sex" value="1" />男

<input type="radio" name="sex" value="0" />女

</td>

</tr>

<tr>

<td colspan="2">

<input type="checkbox" name="LoginType" value="0" />用户名

<input type="checkbox" name="LoginType" value="1" />密码

<input type="checkbox" name="LoginType" value="2" />测试1

<input type="checkbox" name="LoginType" value="3" />测试2

</td>

</tr>

<tr>

<td colspan="2">

<select name="LoginSele">

<option>--请选择--</option>

<option value="0">0000</option>

<option value="1">1111</option>

<option value="2">2222</option>

<option value="3">3333</option>

</select>

</td>

</tr>

<tr>

<td colspan="2">

<input type="button" id="BtnOK" value="登录" /></td>

</tr>

</table>

</form>

</body>

</html></pre> 

运行界面如下：

 

<img width="393" height="181" src="http://img.blog.csdn.net/20141203193919789?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbHV4aW44/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center"
alt="">

当是否验证密码的单选框选择“是”时，密码为必填项目，当选择否时，密码不为必填项目。

<h6><a name="t8"></a>1、在自定义事件内初始化验证框架</h6>

下面的代码描述这样一个使用场景，页面加载完成后，点击“登录”按钮，验证框架没有正常工作，点击“初始化验证框架”后，完成框架的初始化，然后点击“登录”按钮，表单的元素正常被验证，代码如下：

<div class="dp-highlighter bg_javascript"><div class="bar"><div class="tools">[javascript] <a href="#" class="ViewSource" title="view plain" onclick="dp.sh.Toolbar.Command('ViewSource',this);return false;">view plain</a><a href="#" class="CopyToClipboard"
title="copy" onclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;">copy</a><a href="#" class="PrintSource" title="print" onclick="dp.sh.Toolbar.Command('PrintSource',this);return false;">print</a><a href="#" class="About" title="?" onclick="dp.sh.Toolbar.Command('About',this);return
false;">?</a><div style="position: absolute; left: 508px; top: 14110px; width: 18px; height: 18px; z-index: 99;"><embed id="ZeroClipboardMovie_12" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best"
bgcolor="#ffffff" width="18" height="18" name="ZeroClipboardMovie_12" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=12&width=18&height=18"
wmode="transparent"></div></div></div><ol start="1" class="dp-c"><li class="alt"><html xmlns="http://www.w3.org/1999/xhtml"> </li><li class=""><head runat="server"> </li><li class="alt"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </li><li
class=""> <title></title> </li><li class="alt"> <script src="../../jQuery/jquery-1.8.3.min.js"></script> </li><li
class=""> <script src="../../jQuery/jquery-validation-1.13.1/dist/jquery.validate.min.js"></script> </li><li class="alt"> <script src="../../jQuery/jquery-validation-1.13.1/dist/additional-methods.js"></script> </li><li class=""> <script src="../../jQuery/layer-v1.8.5/layer/layer.min.js"></script> </li><li
class="alt"> <script type="text/javascript"> </li><li class=""> var validator; </li><li
class="alt"> $(function () { </li><li class=""> $("#BtnOK").click(function () { </li><li class="alt"> validator.form(); </li><li
class=""> }) </li><li class="alt"> </li><li class=""> $("#BtnNewObj").click(function () { </li><li class="alt"> validator = $("#loginForm").validate({ </li><li class=""> rules: { </li><li
class="alt"> "loginPwd": { </li><li class=""> "minlength": 6, </li><li class="alt"> "maxlength": 15 </li><li class=""> }, </li><li
class="alt"> "loginName": { </li><li class=""> "email": true, </li><li class="alt"> "minlength": 6, </li><li class=""> "required": function () { </li><li class="alt"> var check = $("input[name='CheckPwd']:checked").val(); </li><li class=""> return check; </li><li class="alt"> } </li><li
class=""> }, </li><li class="alt"> "sex": "required", </li><li class=""> "LoginType": { </li><li class="alt"> "required": true, </li><li class=""> "rangelength": [1, 3] </li><li class="alt"> }, </li><li
class=""> "LoginSele": "required" </li><li
class="alt"> }, </li><li class=""> messages: { </li><li
class="alt"> "loginPwd": { </li><li class=""> "minlength": "密码最小6位", </li><li class="alt"> "maxlength": "密码最大15位" </li><li class=""> }, </li><li
class="alt"> "loginName": { </li><li class=""> "email": "登录名格式错误", </li><li class="alt"> "minlength": "登录名最小6个字符" </li><li class=""> }, </li><li
class="alt"> "sex": "请选择用户性别", </li><li
class=""> "LoginType": { </li><li class="alt"> "required": "请选择", </li><li class=""> "rangelength": "选择1-3个项目" </li><li class="alt"> }, </li><li
class=""> "LoginSele": "必选" </li><li
class="alt"> }, </li><li class=""> showErrors: function (errorMap, errorList) { </li><li class="alt"> if (errorList.length > 0) { </li><li class=""> layer.tips(errorList[0].message, errorList[0].element, { </li><li
class="alt"> time: 2, </li><li class=""> closeBtn: [0, true], </li><li class="alt"> style: ['background-color:#F26C4F; color:#fff;border:1px solid #FFF3EE;', '#F26C4F'], </li><li class=""> maxWidth: 200 </li><li
class="alt"> }); </li><li class=""> } </li><li
class="alt"> } </li><li class=""> }) </li><li
class="alt"> }); </li><li class=""> }) </li><li class="alt"> </script> </li><li
class=""></head> </li><li class="alt"><body> </li><li class=""> <form id="loginForm" runat="server"> </li><li
class="alt"> <table> </li><li class=""> <tr> </li><li class="alt"> <td colspan="2"> </li><li class=""> 是否验证密码：<input type="radio" name="CheckPwd" value="1" />是 </li><li class="alt"> <input type="radio" name="CheckPwd" value="0" />否 </li><li class=""> </td> </li><li
class="alt"> </tr> </li><li class=""> <tr> </li><li class="alt"> <td>用户名：</td> </li><li
class=""> <td> </li><li class="alt"> <input type="text" id="loginName" name="loginName"/></td> </li><li class=""> </tr> </li><li
class="alt"> <tr> </li><li class=""> <td>密码：</td> </li><li
class="alt"> <td> </li><li class=""> <input type="password" id="loginPwd" name="loginPwd"/></td> </li><li class="alt"> </tr> </li><li
class=""> <tr> </li><li class="alt"> <td colspan="2"> </li><li class=""> <input type="radio" name="sex" value="1" />男 </li><li class="alt"> <input type="radio" name="sex" value="0" />女 </li><li class=""> </td> </li><li
class="alt"> </tr> </li><li class=""> <tr> </li><li class="alt"> <td colspan="2"> </li><li class=""> <input type="checkbox" name="LoginType" value="0" />用户名 </li><li class="alt"> <input type="checkbox" name="LoginType" value="1" />密码 </li><li class=""> <input type="checkbox" name="LoginType" value="2" />测试1 </li><li class="alt"> <input type="checkbox" name="LoginType" value="3" />测试2 </li><li class=""> </td> </li><li
class="alt"> </tr> </li><li class=""> <tr> </li><li class="alt"> <td colspan="2"> </li><li class=""> <select name="LoginSele"> </li><li
class="alt"> <option>--请选择--</option> </li><li class=""> <option value="0">0000</option> </li><li class="alt"> <option value="1">1111</option> </li><li class=""> <option value="2">2222</option> </li><li class="alt"> <option value="3">3333</option> </li><li class=""> </select> </li><li
class="alt"> </td> </li><li class=""> </tr> </li><li
class="alt"> <tr> </li><li class=""> <td colspan="2"> </li><li class="alt"> <input type="button" id="BtnNewObj" value="实例化验证框架" /> </li><li class=""> <input type="button" id="BtnOK" value="登录" /></td> </li><li class="alt"> </tr> </li><li
class=""> </table> </li><li class="alt"> </form> </li><li class=""></body> </li><li class="alt"></html> </li></ol></div><pre
name="code" class="javascript" style="display: none;"><html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<script src="../../jQuery/jquery-1.8.3.min.js"></script>

<script src="../../jQuery/jquery-validation-1.13.1/dist/jquery.validate.min.js"></script>

<script src="../../jQuery/jquery-validation-1.13.1/dist/additional-methods.js"></script>

<script src="../../jQuery/layer-v1.8.5/layer/layer.min.js"></script>

<script type="text/javascript">

var validator;

$(function () {

$("#BtnOK").click(function () {

validator.form();

})

$("#BtnNewObj").click(function () {

validator = $("#loginForm").validate({

rules: {

"loginPwd": {

"minlength": 6,

"maxlength": 15

},

"loginName": {

"email": true,

"minlength": 6,

"required": function () {

var check = $("input[name='CheckPwd']:checked").val();

return check;

}

},

"sex": "required",

"LoginType": {

"required": true,

"rangelength": [1, 3]

},

"LoginSele": "required"

},

messages: {

"loginPwd": {

"minlength": "密码最小6位",

"maxlength": "密码最大15位"

},

"loginName": {

"email": "登录名格式错误",

"minlength": "登录名最小6个字符"

},

"sex": "请选择用户性别",

"LoginType": {

"required": "请选择",

"rangelength": "选择1-3个项目"

},

"LoginSele": "必选"

},

showErrors: function (errorMap, errorList) {

if (errorList.length > 0) {

layer.tips(errorList[0].message, errorList[0].element, {

time: 2,

closeBtn: [0, true],

style: ['background-color:#F26C4F; color:#fff;border:1px solid #FFF3EE;', '#F26C4F'],

maxWidth: 200

});

}

}

})

});

})

</script>

</head>

<body>

<form id="loginForm" runat="server">

<table>

<tr>

<td colspan="2">

是否验证密码：<input type="radio" name="CheckPwd" value="1" />是

<input type="radio" name="CheckPwd" value="0" />否

</td>

</tr>

<tr>

<td>用户名：</td>

<td>

<input type="text" id="loginName" name="loginName"/></td>

</tr>

<tr>

<td>密码：</td>

<td>

<input type="password" id="loginPwd" name="loginPwd"/></td>

</tr>

<tr>

<td colspan="2">

<input type="radio" name="sex" value="1" />男

<input type="radio" name="sex" value="0" />女

</td>

</tr>

<tr>

<td colspan="2">

<input type="checkbox" name="LoginType" value="0" />用户名

<input type="checkbox" name="LoginType" value="1" />密码

<input type="checkbox" name="LoginType" value="2" />测试1

<input type="checkbox" name="LoginType" value="3" />测试2

</td>

</tr>

<tr>

<td colspan="2">

<select name="LoginSele">

<option>--请选择--</option>

<option value="0">0000</option>

<option value="1">1111</option>

<option value="2">2222</option>

<option value="3">3333</option>

</select>

</td>

</tr>

<tr>

<td colspan="2">

<input type="button" id="BtnNewObj" value="实例化验证框架" />

<input type="button" id="BtnOK" value="登录" /></td>

</tr>

</table>

</form>

</body>

</html>

</pre> 

 

Query.validate 中文 API

默认校验规则：

<table>

<tbody>

<tr>

<td valign="top" style="background:rgb(85,85,85)">

序号

</td>

<td valign="top" style="background:rgb(85,85,85)">

规则

</td>

<td valign="top" style="background:rgb(85,85,85)">

描述

</td>

</tr>

<tr>

<td valign="top">

1

</td>

<td valign="top">

required:true

</td>

<td valign="top">

必须输入的字段。

</td>

</tr>

<tr>

<td valign="top" style="background:rgb(246,244,240)">

2

</td>

<td valign="top" style="background:rgb(246,244,240)">

remote:"check.php"

</td>

<td valign="top" style="background:rgb(246,244,240)">

使用 ajax 方法调用 check.php 验证输入值。

</td>

</tr>

<tr>

<td valign="top">

3

</td>

<td valign="top">

email:true

</td>

<td valign="top">

必须输入正确格式的电子邮件。

</td>

</tr>

<tr>

<td valign="top" style="background:rgb(246,244,240)">

4

</td>

<td valign="top" style="background:rgb(246,244,240)">

url:true

</td>

<td valign="top" style="background:rgb(246,244,240)">

必须输入正确格式的网址。

</td>

</tr>

<tr>

<td valign="top">

5

</td>

<td valign="top">

date:true

</td>

<td valign="top">

必须输入正确格式的日期。日期校验 ie6 出错，慎用。

</td>

</tr>

<tr>

<td valign="top" style="background:rgb(246,244,240)">

6

</td>

<td valign="top" style="background:rgb(246,244,240)">

dateISO:true

</td>

<td valign="top" style="background:rgb(246,244,240)">

必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。

</td>

</tr>

<tr>

<td valign="top">

7

</td>

<td valign="top">

number:true

</td>

<td valign="top">

必须输入合法的数字（负数，小数）。

</td>

</tr>

<tr>

<td valign="top" style="background:rgb(246,244,240)">

8

</td>

<td valign="top" style="background:rgb(246,244,240)">

digits:true

</td>

<td valign="top" style="background:rgb(246,244,240)">

必须输入整数。

</td>

</tr>

<tr>

<td valign="top">

9

</td>

<td valign="top">

creditcard:

</td>

<td valign="top">

必须输入合法的信用卡号。

</td>

</tr>

<tr>

<td valign="top" style="background:rgb(246,244,240)">

10

</td>

<td valign="top" style="background:rgb(246,244,240)">

equalTo:"#field"

</td>

<td valign="top" style="background:rgb(246,244,240)">

输入值必须和 #field 相同。

</td>

</tr>

<tr>

<td valign="top">

11

</td>

<td valign="top">

accept:

</td>

<td valign="top">

输入拥有合法后缀名的字符串（上传文件的后缀）。

</td>

</tr>

<tr>

<td valign="top" style="background:rgb(246,244,240)">

12

</td>

<td valign="top" style="background:rgb(246,244,240)">

maxlength:5

</td>

<td valign="top" style="background:rgb(246,244,240)">

输入长度最多是 5 的字符串（汉字算一个字符）。

</td>

</tr>

<tr>

<td valign="top">

13

</td>

<td valign="top">

minlength:10

</td>

<td valign="top">

输入长度最小是 10 的字符串（汉字算一个字符）。

</td>

</tr>

<tr>

<td valign="top" style="background:rgb(246,244,240)">

14

</td>

<td valign="top" style="background:rgb(246,244,240)">

rangelength:[5,10]

</td>

<td valign="top" style="background:rgb(246,244,240)">

输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。

</td>

</tr>

<tr>

<td valign="top">

15

</td>

<td valign="top">

range:[5,10]

</td>

<td valign="top">

输入值必须介于 5 和 10 之间。

</td>

</tr>

<tr>

<td valign="top" style="background:rgb(246,244,240)">

16

</td>

<td valign="top" style="background:rgb(246,244,240)">

max:5

</td>

<td valign="top" style="background:rgb(246,244,240)">

输入值不能大于 5。

</td>

</tr>

<tr>

<td valign="top">

17

</td>

<td valign="top">

min:10

</td>

<td valign="top">

输入值不能小于 10。

</td>

</tr>

</tbody>

</table>

 

 

<table>

<tbody>

<tr>

<td valign="top" style="background:rgb(85,85,85)">

名称

</td>

<td valign="top" style="background:rgb(85,85,85)">

返回类型

</td>

<td valign="top" style="background:rgb(85,85,85)">

描述

</td>

</tr>

<tr>

<td valign="top">

validate(options)

</td>

<td valign="top">

Validator

</td>

<td valign="top">

验证所选的 FORM。

</td>

</tr>

<tr>

<td valign="top" style="background:rgb(246,244,240)">

valid()

</td>

<td valign="top" style="background:rgb(246,244,240)">

Boolean

</td>

<td valign="top" style="background:rgb(246,244,240)">

检查是否验证通过。

</td>

</tr>

<tr>

<td valign="top">

rules()

</td>

<td valign="top">

Options

</td>

<td valign="top">

返回元素的验证规则。

</td>

</tr>

<tr>

<td valign="top" style="background:rgb(246,244,240)">

rules("add",rules)

</td>

<td valign="top" style="background:rgb(246,244,240)">

Options

</td>

<td valign="top" style="background:rgb(246,244,240)">

增加验证规则。

</td>

</tr>

<tr>

<td valign="top">

rules("remove",rules)

</td>

<td valign="top">

Options

</td>

<td valign="top">

删除验证规则。

</td>

</tr>

<tr>

<td valign="top" style="background:rgb(246,244,240)">

removeAttrs(attributes)

</td>

<td valign="top" style="background:rgb(246,244,240)">

Options

</td>

<td valign="top" style="background:rgb(246,244,240)">

删除特殊属性并且返回它们。

</td>

</tr>

<tr>

<td width="648" valign="top" colspan="3">

自定义选择器

</td>

</tr>

<tr>

<td valign="top" style="background:rgb(246,244,240)">

:blank

</td>

<td valign="top" style="background:rgb(246,244,240)">

Validator

</td>

<td valign="top" style="background:rgb(246,244,240)">

没有值的筛选器。

</td>

</tr>

<tr>

<td valign="top">

:filled

</td>

<td valign="top">

Array <Element>

</td>

<td valign="top">

有值的筛选器。

</td>

</tr>

<tr>

<td valign="top" style="background:rgb(246,244,240)">

:unchecked

</td>

<td valign="top" style="background:rgb(246,244,240)">

Array <Element>

</td>

<td valign="top" style="background:rgb(246,244,240)">

没选择的元素的筛选器。

</td>

</tr>

<tr>

<td width="648" valign="top" colspan="3">

实用工具

</td>

</tr>

<tr>

<td valign="top" style="background:rgb(246,244,240)">

jQuery.format(template,argument,argumentN...)

</td>

<td valign="top" style="background:rgb(246,244,240)">

String

</td>

<td valign="top" style="background:rgb(246,244,240)">

用参数代替模板中的 {n}。

</td>

</tr>

</tbody>

</table>

<h3><a name="t9"></a>Validator</h3>

validate 方法返回一个 Validator 对象。Validator 对象有很多方法可以用来引发校验程序或者改变 form 的内容，下面列出几个常用的方法。

<table>

<tbody>

<tr>

<td valign="top" style="background:rgb(85,85,85)">

名称

</td>

<td valign="top" style="background:rgb(85,85,85)">

返回类型

</td>

<td valign="top" style="background:rgb(85,85,85)">

描述

</td>

</tr>

<tr>

<td valign="top">

form()

</td>

<td valign="top">

Boolean

</td>

<td valign="top">

验证 form 返回成功还是失败。

</td>

</tr>

<tr>

<td valign="top" style="background:rgb(246,244,240)">

element(element)

</td>

<td valign="top" style="background:rgb(246,244,240)">

Boolean

</td>

<td valign="top" style="background:rgb(246,244,240)">

验证单个元素是成功还是失败。

</td>

</tr>

<tr>

<td valign="top">

resetForm()

</td>

<td valign="top">

undefined

</td>

<td valign="top">

把前面验证的 FORM 恢复到验证前原来的状态。

</td>

</tr>

<tr>

<td valign="top" style="background:rgb(246,244,240)">

showErrors(errors)

</td>

<td valign="top" style="background:rgb(246,244,240)">

undefined

</td>

<td valign="top" style="background:rgb(246,244,240)">

显示特定的错误信息。

</td>

</tr>

<tr>

<td width="640" valign="top" colspan="3">

Validator 函数

</td>

</tr>

<tr>

<td valign="top" style="background:rgb(246,244,240)">

setDefaults(defaults)

</td>

<td valign="top" style="background:rgb(246,244,240)">

undefined

</td>

<td valign="top" style="background:rgb(246,244,240)">

改变默认的设置。

</td>

</tr>

<tr>

<td valign="top">

addMethod(name,method,message)

</td>

<td valign="top">

undefined

</td>

<td valign="top">

添加一个新的验证方法。必须包括一个独一无二的名字，一个 JAVASCRIPT 的方法和一个默认的信息。

</td>

</tr>

<tr>

<td valign="top" style="background:rgb(246,244,240)">

addClassRules(name,rules)

</td>

<td valign="top" style="background:rgb(246,244,240)">

undefined

</td>

<td valign="top" style="background:rgb(246,244,240)">

增加组合验证类型，在一个类里面用多种验证方法时比较有用。

</td>

</tr>

<tr>

<td valign="top">

addClassRules(rules)

</td>

<td valign="top">

undefined

</td>

<td valign="top">

增加组合验证类型，在一个类里面用多种验证方法时比较有用。这个是同时加多个验证方法。

</td>

</tr>

</tbody>

</table>

<h3><a name="t10"></a>内置验证方式</h3>

<table>

<tbody>

<tr>

<td valign="top" style="background:rgb(85,85,85)">

名称

</td>

<td valign="top" style="background:rgb(85,85,85)">

返回类型

</td>

<td valign="top" style="background:rgb(85,85,85)">

描述

</td>

</tr>

<tr>

<td valign="top">

required()

</td>

<td valign="top">

Boolean

</td>

<td valign="top">

必填验证元素。

</td>

</tr>

<tr>

<td valign="top" style="background:rgb(246,244,240)">

required(dependency-expression)

</td>

<td valign="top" style="background:rgb(246,244,240)">

Boolean

</td>

<td valign="top" style="background:rgb(246,244,240)">

必填元素依赖于表达式的结果。

</td>

</tr>

<tr>

<td valign="top">

required(dependency-callback)

</td>

<td valign="top">

Boolean

</td>

<td valign="top">

必填元素依赖于回调函数的结果。

</td>

</tr>

<tr>

<td valign="top" style="background:rgb(246,244,240)">

remote(url)

</td>

<td valign="top" style="background:rgb(246,244,240)">

Boolean

</td>

<td valign="top" style="background:rgb(246,244,240)">

请求远程校验。url 通常是一个远程调用方法。

</td>

</tr>

<tr>

<td valign="top">

minlength(length)

</td>

<td valign="top">

Boolean

</td>

<td valign="top">

设置最小长度。

</td>

</tr>

<tr>

<td valign="top" style="background:rgb(246,244,240)">

maxlength(length)

</td>

<td valign="top" style="background:rgb(246,244,240)">

Boolean

</td>

<td valign="top" style="background:rgb(246,244,240)">

设置最大长度。

</td>

</tr>

<tr>

<td valign="top">

rangelength(range)

</td>

<td valign="top">

Boolean

</td>

<td valign="top">

设置一个长度范围 [min,max]。

</td>

</tr>

<tr>

<td valign="top" style="background:rgb(246,244,240)">

min(value)

</td>

<td valign="top" style="background:rgb(246,244,240)">

Boolean

</td>

<td valign="top" style="background:rgb(246,244,240)">

设置最小值。

</td>

</tr>

<tr>

<td valign="top">

max(value)

</td>

<td valign="top">

Boolean

</td>

<td valign="top">

设置最大值。

</td>

</tr>

<tr>

<td valign="top" style="background:rgb(246,244,240)">

email()

</td>

<td valign="top" style="background:rgb(246,244,240)">

Boolean

</td>

<td valign="top" style="background:rgb(246,244,240)">

验证电子邮箱格式。

</td>

</tr>

<tr>

<td valign="top">

range(range)

</td>

<td valign="top">

Boolean

</td>

<td valign="top">

设置值的范围。

</td>

</tr>

<tr>

<td valign="top" style="background:rgb(246,244,240)">

url()

</td>

<td valign="top" style="background:rgb(246,244,240)">

Boolean

</td>

<td valign="top" style="background:rgb(246,244,240)">

验证 URL 格式。

</td>

</tr>

<tr>

<td valign="top">

date()

</td>

<td valign="top">

Boolean

</td>

<td valign="top">

验证日期格式（类似 30/30/2008 的格式，不验证日期准确性只验证格式）。

</td>

</tr>

<tr>

<td valign="top" style="background:rgb(246,244,240)">

dateISO()

</td>

<td valign="top" style="background:rgb(246,244,240)">

Boolean

</td>

<td valign="top" style="background:rgb(246,244,240)">

验证 ISO 类型的日期格式。

</td>

</tr>

<tr>

<td valign="top">

dateDE()

</td>

<td valign="top">

Boolean

</td>

<td valign="top">

验证德式的日期格式（29.04.1994 或 1.1.2006）。

</td>

</tr>

<tr>

<td valign="top" style="background:rgb(246,244,240)">

number()

</td>

<td valign="top" style="background:rgb(246,244,240)">

Boolean

</td>

<td valign="top" style="background:rgb(246,244,240)">

验证十进制数字（包括小数的）。

</td>

</tr>

<tr>

<td valign="top">

digits()

</td>

<td valign="top">

Boolean

</td>

<td valign="top">

验证整数。

</td>

</tr>

<tr>

<td valign="top" style="background:rgb(246,244,240)">

creditcard()

</td>

<td valign="top" style="background:rgb(246,244,240)">

Boolean

</td>

<td valign="top" style="background:rgb(246,244,240)">

验证信用卡号。

</td>

</tr>

<tr>

<td valign="top">

accept(extension)

</td>

<td valign="top">

Boolean

</td>

<td valign="top">

验证相同后缀名的字符串。

</td>

</tr>

<tr>

<td valign="top" style="background:rgb(246,244,240)">

equalTo(other)

</td>

<td valign="top" style="background:rgb(246,244,240)">

Boolean

</td>

<td valign="top" style="background:rgb(246,244,240)">

验证两个输入框的内容是否相同。

</td>

</tr>

<tr>

<td valign="top">

phoneUS()

</td>

<td valign="top">

Boolean

</td>

<td valign="top">

验证美式的电话号码。

</td>

</tr>

</tbody>

</table>

<h3><a name="t11"></a>validate ()的可选项</h3>

<table>

<tbody>

<tr>

<td valign="top" style="background:rgb(85,85,85)">

描述

</td>

<td valign="top" style="background:rgb(85,85,85)">

代码

</td>

</tr>

<tr>

<td valign="top">

debug：进行调试模式（表单不提交）。

</td>

<td valign="top">

$(".selector").validate({ debug:true})

</td>

</tr>

<tr>

<td valign="top" style="background:rgb(246,244,240)">

把调试设置为默认。

</td>

<td valign="top" style="background:rgb(246,244,240)">

$.validator.setDefaults({ debug:true})

</td>

</tr>

<tr>

<td valign="top">

submitHandler：通过验证后运行的函数，里面要加上表单提交的函数，否则表单不会提交。

</td>

<td valign="top">

$(".selector").validate({ submitHandler:function(form) { $(form).ajaxSubmit(); }})

</td>

</tr>

<tr>

<td valign="top" style="background:rgb(246,244,240)">

ignore：对某些元素不进行验证。

</td>

<td valign="top" style="background:rgb(246,244,240)">

$("#myform").validate({ ignore:".ignore"})

</td>

</tr>

<tr>

<td valign="top">

rules：自定义规则，key:value 的形式，key 是要验证的元素，value 可以是字符串或对象。

</td>

<td valign="top">

$(".selector").validate({ rules:{ name:"required", email:{ required:true, email:true } }})

</td>

</tr>

<tr>

<td valign="top" style="background:rgb(246,244,240)">

messages：自定义的提示信息，key:value 的形式，key 是要验证的元素，value 可以是字符串或函数。

</td>

<td valign="top" style="background:rgb(246,244,240)">

$(".selector").validate({ rules:{ name:"required", email:{ required:true, email:true } }, messages:{ name:"Name不能为空", email:{ required:"E-mail不能为空", email:"E-mail地址不正确" } }})

</td>

</tr>

<tr>

<td valign="top">

groups：对一组元素的验证，用一个错误提示，用 errorPlacement 控制把出错信息放在哪里。

</td>

<td valign="top">

$("#myform").validate({ groups:{ username:"fname lname" }, errorPlacement:function(error,element) { if (element.attr("name") == "fname" || element.attr("name") == "lname")
error.insertAfter("#lastname"); else error.insertAfter(element);

}, debug:true})

</td>

</tr>

<tr>

<td valign="top" style="background:rgb(246,244,240)">

Onubmit：类型 Boolean，默认 true，指定是否提交时验证。

</td>

<td valign="top" style="background:rgb(246,244,240)">

$(".selector").validate({ onsubmit:false})

</td>

</tr>

<tr>

<td valign="top">

onfocusout：类型 Boolean，默认 true，指定是否在获取焦点时验证。

</td>

<td valign="top">

$(".selector").validate({ onfocusout:false})

</td>

</tr>

<tr>

<td valign="top" style="background:rgb(246,244,240)">

onkeyup：类型 Boolean，默认 true，指定是否在敲击键盘时验证。

</td>

<td valign="top" style="background:rgb(246,244,240)">

$(".selector").validate({ onkeyup:false})

</td>

</tr>

<tr>

<td valign="top">

onclick：类型 Boolean，默认 true，指定是否在鼠标点击时验证（一般验证 checkbox、radiobox）。

</td>

<td valign="top">

$(".selector").validate({ onclick:false})

</td>

</tr>

<tr>

<td valign="top" style="background:rgb(246,244,240)">

focusInvalid：类型 Boolean，默认 true。提交表单后，未通过验证的表单（第一个或提交之前获得焦点的未通过验证的表单）会获得焦点。

</td>

<td valign="top" style="background:rgb(246,244,240)">

$(".selector").validate({ focusInvalid:false})

</td>

</tr>

<tr>

<td valign="top">

focusCleanup：类型 Boolean，默认 false。当未通过验证的元素获得焦点时，移除错误提示（避免和 focusInvalid 一起使用）。

</td>

<td valign="top">

$(".selector").validate({ focusCleanup:true})

</td>

</tr>

<tr>

<td valign="top" style="background:rgb(246,244,240)">

errorClass：类型 String，默认 "error"。指定错误提示的 css 类名，可以自定义错误提示的样式。

</td>

<td valign="top" style="background:rgb(246,244,240)">

$(".selector").validate({ errorClass:"invalid"})

</td>

</tr>

<tr>

<td valign="top">

errorElement：类型 String，默认 "label"。指定使用什么标签标记错误。

</td>

<td valign="top">

$(".selector").validate errorElement:"em"})

</td>

</tr>

<tr>

<td valign="top" style="background:rgb(246,244,240)">

wrapper：类型 String，指定使用什么标签再把上边的 errorELement 包起来。

</td>

<td valign="top" style="background:rgb(246,244,240)">

$(".selector").validate({ wrapper:"li"})

</td>

</tr>

<tr>

<td valign="top">

errorLabelContainer：类型 Selector，把错误信息统一放在一个容器里面。

</td>

<td valign="top">

$("#myform").validate({ errorLabelContainer:"#messageBox", wrapper:"li", submitHandler:function() { alert("Submitted!") }})

</td>

</tr>

<tr>

<td valign="top" style="background:rgb(246,244,240)">

showErrors：跟一个函数，可以显示总共有多少个未通过验证的元素。

</td>

<td valign="top" style="background:rgb(246,244,240)">

$(".selector").validate({ showErrors:function(errorMap,errorList) { $("#summary").html("Your form contains " + this.numberOfInvalids() + " errors,see details below.");
this.defaultShowErrors(); }})

</td>

</tr>

<tr>

<td valign="top">

errorPlacement：跟一个函数，可以自定义错误放到哪里。

</td>

<td valign="top">

$("#myform").validate({ rrorPlacement:function(error,element) { error.appendTo(element.parent("td").next("td")); }, debug:true})

</td>

</tr>

<tr>

<td valign="top" style="background:rgb(246,244,240)">

success：要验证的元素通过验证后的动作，如果跟一个字符串，会当作一个 css 类，也可跟一个函数。

</td>

<td valign="top" style="background:rgb(246,244,240)">

$("#myform").validate({ success:"valid", submitHandler:function() { alert("Submitted!") }})

</td>

</tr>

<tr>

<td valign="top">

highlight：可以给未通过验证的元素加效果、闪烁等。

</td>

<td valign="top">

 

</td>

</tr>

</tbody>

</table>

<h3><a name="t12"></a> </h3>

 

 

 

 

<div style="padding-top:20px">

版权声明：本文为博主原创文章，未经博主允许不得转载。

</div>

</div>



<div class="bdsharebuttonbox bdshare-button-style0-16" style="float: right;" data-bd-bind="1439448135725">

<a href="#" class="bds_more" data-cmd="more" style="background-position:0 0 !important; background-image: url(http://bdimg.share.baidu.com/static/api/img/share/icons_0_16.png?v=d754dcc0.png) !important"></a>

<a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间" style="background-position:0 -52px !important"></a>

<a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博" style="background-position:0 -104px !important"></a>

<a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博" style="background-position:0 -260px !important"></a>

<a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网" style="background-position:0 -208px !important"></a>

<a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信" style="background-position:0 -1612px !important"></a>

</div>

<script>window._bd_share_config = { "common": { "bdSnsKey": {}, "bdText": "", "bdMini": "1", "bdMiniList": false, "bdPic": "", "bdStyle": "0", "bdSize": "16" }, "share": {} }; with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src
= 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];</script>



<link rel="stylesheet" href="http://static.blog.csdn.net/css/blog_detail.css">



<ul class="article_next_prev">

<li class="prev_article">上一篇<a href="/luxin8/article/details/41347893" onclick="_gaq.push(['_trackEvent','function',
'onclick', 'blog_articles_shangyipian'])">Jquery Web 前端验证框架插件，jquery-validate资料，validation</a></li>

<li class="next_article">下一篇<a href="/luxin8/article/details/41941289" onclick="_gaq.push(['_trackEvent','function',
'onclick', 'blog_articles_xiayipian'])">Excel操作——使用Com操作和NPOI操作</a></li>

</ul>



<script type="text/javascript" id="bdshare_js" data="type=tools&uid=1536434" src="http://bdimg.share.baidu.com/static/js/bds_s_v2.js?cdnversion=399847"></script>

<script type="text/javascript">

document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000)

</script>



</div>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航