服務(wù)熱線
153 8323 9821
咨詢熱線 ：
15383239821
本系列文章將帶您進(jìn)入jQuery的精彩世界, 其中有很多作者具體的使用經(jīng)驗(yàn)和解決方案, 即使你會(huì)使用jQuery也能在閱讀中發(fā)現(xiàn)些許秘籍.
本文是介紹兩個(gè)最常用的jQuery插件. 分別用于表單驗(yàn)證和自動(dòng)完成提示(類似google suggest).
研究別人的作品真是一件花時(shí)間而且痛苦的過程. 當(dāng)然也和本人英文不好有關(guān). 總覺得控件作者寫了很多文檔但是都不夠系統(tǒng), 需要深入研究很多的實(shí)例后才能了解作者的思路.所以學(xué)習(xí)和研究一個(gè)插件需要很高成本, 如果發(fā)現(xiàn)了Bug并修復(fù)需要的成本也是未知數(shù)(本次我花了較少的時(shí)間解決了自動(dòng)完成提示插件的一個(gè)中文bug, 但是如果復(fù)雜的bug就不會(huì)這么簡單了.).
對于簡單應(yīng)用我首先推薦上文中的jQuery UI. 但是jQuery UI解決的問題有限. 使用jQuery插件是我們最后的一個(gè)好辦法---還算是好辦法, 起碼比自己開發(fā)要好吧?
很多jQuery的插件編碼異常優(yōu)美, 看一看藝龍首頁現(xiàn)在的城市輸入框控件, 除了需要為輸入框手工添加很多很多屬性(onkeyup, onkeydown等等), 而且還不夠通用, 占用服務(wù)器資源和網(wǎng)絡(luò)資源.但是當(dāng)初也是花費(fèi)了很久的時(shí)間完成的作品.
站在巨人的肩膀上, 讓我感覺寫腳本和寫設(shè)計(jì)C#程序一樣, 都有高度和深度可以挖掘. 除了使用作者開發(fā)好的功能, 還可以學(xué)習(xí)如何開發(fā)和封裝javascript控件. 看過優(yōu)秀的jQuery插件作者的代碼和設(shè)計(jì)思想后, 常常自嘆設(shè)計(jì)水平差距居然如此之大, 增加自認(rèn)為腳本高手, 比較過后就是C#程序員和架構(gòu)師之間的差距.
希望大家通過本章節(jié)介紹的兩個(gè)插件, 除了學(xué)會(huì)如何使用, 還能夠略微領(lǐng)悟到如何封裝和設(shè)計(jì)javascript控件.
在提交表單前常要對用戶輸入進(jìn)行校驗(yàn).ASP.NET的驗(yàn)證控件就是用于此目的, 可以同時(shí)進(jìn)行客戶端和服務(wù)器端驗(yàn)證. 但是驗(yàn)證控件并沒有被所有項(xiàng)目采用. 而且在MVC項(xiàng)目中經(jīng)常使用自己的客戶端驗(yàn)證框架.
在比較了若干表單驗(yàn)證插件后, 決定采用validate插件. 因?yàn)槠涫褂煤唵尾⑶异`活.
插件首頁:
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
插件文檔:
http://docs.jquery.com/Plugins/Validation
配置說明:
http://docs.jquery.com/Plugins/Validation/validate#options
<%@ 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 - 表單驗(yàn)證插件實(shí)例 Validate </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"%>" /> <script type="text/javascript" src="<% =WebConfig.ResourceServer %>/JsLib/jquery/jquery-min-lastest.js"></script> <script type="text/javascript" src="<% =WebConfig.ResourceServer %>/JsLib/jquery/ui/jquery-ui-all-min-lastest.js"></script> <script type="text/javascript" src="<% =WebConfig.ResourceServer %>/JsLib/jquery/plugin/jquery.validate/jquery.validate.min.js"></script> <script type="text/javascript" src="<% =WebConfig.ResourceServer %>/JsLib/jquery/plugin/jquery.validate/localization/messages_cn.js"></script> <% if (false) {%><script src="~/js/jquery-vsdoc-lastest.js" type="text/javascript"></script> <% }%> <script type="text/javascript"> /*========== 必須放在頭部加載的語句塊. 盡量避免使用 ==========*/ </script> <style type="text/css"> body { font-size:12px; } /* form中顯示文字的label */ .slabel { width:100px; display: -moz-inline-box; line-height: 1.8; display: inline-block; text-align:right; } /* 出錯(cuò)樣式 */ input.error, textarea.error { border: solid 1px #CD0A0A; } label.error { color:#CD0A0A; margin-left:5px; } /* 深紅色文字 */ .textred { color:#CD0A0A; } </style> </head> <body> <form id="commentForm" method="get" action=""> <fieldset style="width:500px;"><legend>表單驗(yàn)證</legend> <p><label for="cname" class="slabel"><em class="textred">*</em> 姓名:</label> <input id="cname" name="name" size="25"
