从零开始学习jQuery (十一) 实战表单验证与自动完(4)

本实例的"姓名"元素使用了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属性设置的函数:

submitHandler: function(form) { //如果想提交表单, 需要使用form.submit()而不要使用$(form).submit() alert("submitted!"); },

此函数的签名同上.  我们可以在这个函数中,  编写在表单提交前需要处理的业务逻辑.

需要注意当最后以编程的方式提交表单时, 一定不要使用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 }); 四.自动完成插件 autocomplete

autocomplete插件能帮助我们实现类似于Google Suggest的效果:

image

插件首页:

插件文档:

配置说明:

1.应用实例

本实例演示的是使用autocomplete完成对输入城市的自动提示效果,如图:

image

实例代码:

<%@ 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请求获取数据.

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdfjdx.html