本实例的"姓名"元素使用了CSS样式规则和元素属性规则:
<input id="cname" name="name" size="25" class="required" minlength="2" />class元素属性设置元素的CSS样式类, 因为样式类中添加了required类, 所以会和required()验证函数关联. 这种规则叫做CSS样式规则.
minlength元素属性也会自动和minlength()验证函数关联, 这种规则叫做元素属性规则.
另外还可以通过编程的方式进行关联:
rules: { //为name为email的控件添加两个验证方法:required()和email() email: { required: true, email: true } },上面的语句表名为email表单对象添加了required()和email()验证函数.
(4) 表单提交默认情况下, 当验证函数失败时表单不会提交.
但是可以通过添加class="cancel"的方式让提交按钮跳过验证:
<input type="submit" class="cancel" name="cancel" value="Cancel" />
当表单提交时, 会触发options中submitHandler属性设置的函数:
此函数的签名同上. 我们可以在这个函数中, 编写在表单提交前需要处理的业务逻辑.
需要注意当最后以编程的方式提交表单时, 一定不要使用jQuery对象的submit()方法, 因为此方法会触发表单验证,并且再次调用submitHandler设置的函数, 会导致递归调用.
此函数的参数form就是表单对象, 用途就是不进行验证提交表单:form.submit()
(5) DEBUG模式在开发阶段我们通常不希望表单被真正提交, 虽然可以通过本实例中重写submitHandler函数来实现, 但是还有更好的方式, 我们可以在submitHandler函数完成正式提交的逻辑, 然后通过设置options的debug属性, 来达到即使验证通过也不会提交表单的目的:
$(".selector").validate({ debug: true }) (6) 多表单验证有时会在一个页面上出现多个Form, 因为validate控件是针对form对象进行包装的, 所以我们可以控制哪些form对象需要验证.
同时为了方便一次设置页面上所有的应用了validate控件的form对象, 提供了 jQuery.validator.setDefaults 函数让我们可以一次设置所有的默认值:
jQuery.validator.setDefaults({ debug: true }); 四.自动完成插件 autocompleteautocomplete插件能帮助我们实现类似于Google Suggest的效果:
插件首页:
插件文档:
配置说明:
1.应用实例本实例演示的是使用autocomplete完成对输入城市的自动提示效果,如图:
实例代码:
<%@ Page Language="C#" %> <!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 id="Head1" runat="server"> <title>jQuery PlugIn - 自动完成插件实例 AutoComplete </title> <!--black-tie,blitzer,blitzer,dot-luv,excite-bike,hot-sneaks,humanity,mint-choc,redmond,smoothness,south-street,start,swanky-purse,trontastic,ui-darkness,ui-lightness,vader--> <link rel="stylesheet" type="text/css" href="<%=WebConfig.ResourceServer +"/JsLib/jquery/themes/redmond/style.css"%>" /> <link rel="stylesheet" type="text/css" href="<%=WebConfig.ResourceServer +"/JsLib/jquery/plugin/jquery.autocomplete/jquery.autocomplete.css"%>" /> <script type="text/javascript" src="<% =WebConfig.ResourceServer %>/JsLib/jquery/jquery-min-lastest.js"></script> <script type=https://www.jb51.net/article/"text/javascript" src=https://www.jb51.net/article/"<% =WebConfig.ResourceServer %>/JsLib/jquery/ui/jquery-ui-all-min-lastest.js"></script> <script type=https://www.jb51.net/article/"text/javascript" src=https://www.jb51.net/article/"<% =WebConfig.ResourceServer %>/JsLib/jquery/plugin/jquery.autocomplete/jquery.autocomplete.min.js"></script> <% if (false) {%><script src=https://www.jb51.net/article/"~/js/jquery-vsdoc-lastest.js" type=https://www.jb51.net/article/"text/javascript"></script> <% }%> <script type=https://www.jb51.net/article/"text/javascript"> /*========== 必须放在头部加载的语句块. 尽量避免使用 ==========*/ </script> <style type=https://www.jb51.net/article/"text/css"> body { font-size: 12px; } .formLabel{float: left; width: 150px; text-align:right;} .formInput{float: left;} </style> </head> <body> <!-- Demo. 应用AutoComplete插件 --> <div class=https://www.jb51.net/article/"ui-widget ui-widget-content ui-corner-all" style=https://www.jb51.net/article/"width: 700px; padding: 5px;"> <h3> Demo. 应用AutoComplete插件 </h3> <br style=https://www.jb51.net/article/"clear: both" /> <div class=https://www.jb51.net/article/"formLabel"> <label for=https://www.jb51.net/article/"inputCityName">请输入城市拼音和汉字:</label> </div> <div class=https://www.jb51.net/article/"formInput"> <input id=https://www.jb51.net/article/"inputCityName" name=https://www.jb51.net/article/"inputCityName" type=https://www.jb51.net/article/"text" /> </div> <br style=https://www.jb51.net/article/"clear:both" /> <br style=https://www.jb51.net/article/"clear: both" /> <div class=https://www.jb51.net/article/"formLabel"> <label for=https://www.jb51.net/article/"inputCityName">城市ID:</label></div> <div class=https://www.jb51.net/article/"formInput"> <input id=https://www.jb51.net/article/"inputCityId" name=https://www.jb51.net/article/"inputCityId" type=https://www.jb51.net/article/"text" /></div> <br style=https://www.jb51.net/article/"clear: both" /> <br style=https://www.jb51.net/article/"clear: both" /> </div> <script type=https://www.jb51.net/article/"text/javascript"> /*==========用户自定义方法==========*/ //城市数据 var cityList; //autocomplete选项 var options = { minChars: 1, max: 500, width: 250, matchContains: true, formatItem: function(row, i, max) { return i + "https://www.jb51.net/" + max + ": \"" + row.CityNameEn + "\" [" + row.CityName + "]"; }, formatMatch: function(row, i, max) { return row.CityNameEn + " " + row.CityName; }, formatResult: function(row) { return row.CityName; } }; //autocomplete初始化函数 function initAutoComplete(data) { cityList = data; $("#inputCityName").autocomplete(cityList, options); $("#inputCityName").result(function(event, data, formatted) { $("#inputCityId").val(data.ElongCityId); }); } /*==========事件绑定==========*/ $(function() { }); /*==========加载时执行的语句==========*/ $(function() { //加载城市数据, 并在回调函数中用返回的数据初始化autocomplete $.getJSON("cityinfo.htm", null, initAutoComplete) }); </script> </body> </html> 2. 实例讲解 (1)准备数据源首先要准备实现自动建议的数据源. 本实例是通过发送Ajax请求获取JSON对象. autocomplete()方法支持两个参数, 第一个是data, 第二个是options.
其中data参数可以使本实例中的一个数据变量, 也可以是一个url. 如果是url则会每次都调用Ajax请求获取数据.