服務熱線
153 8323 9821
本系列文章將帶您進入jQuery的精彩世界, 其中有很多作者具體的使用經驗和解決方案, 即使你會使用jQuery也能在閱讀中發現些許秘籍.
本文是介紹兩個最常用的jQuery插件. 分別用于表單驗證和自動完成提示(類似google suggest).
研究別人的作品真是一件花時間而且痛苦的過程. 當然也和本人英文不好有關. 總覺得控件作者寫了很多文檔但是都不夠系統, 需要深入研究很多的實例后才能了解作者的思路.所以學習和研究一個插件需要很高成本, 如果發現了Bug并修復需要的成本也是未知數(本次我花了較少的時間解決了自動完成提示插件的一個中文bug, 但是如果復雜的bug就不會這么簡單了.).
對于簡單應用我首先推薦上文中的jQuery UI. 但是jQuery UI解決的問題有限. 使用jQuery插件是我們最后的一個好辦法---還算是好辦法, 起碼比自己開發要好吧?
很多jQuery的插件編碼異常優美, 看一看藝龍首頁現在的城市輸入框控件, 除了需要為輸入框手工添加很多很多屬性(onkeyup, onkeydown等等), 而且還不夠通用, 占用服務器資源和網絡資源.但是當初也是花費了很久的時間完成的作品.
站在巨人的肩膀上, 讓我感覺寫腳本和寫設計C#程序一樣, 都有高度和深度可以挖掘. 除了使用作者開發好的功能, 還可以學習如何開發和封裝javascript控件. 看過優秀的jQuery插件作者的代碼和設計思想后, 常常自嘆設計水平差距居然如此之大, 增加自認為腳本高手, 比較過后就是C#程序員和架構師之間的差距.
希望大家通過本章節介紹的兩個插件, 除了學會如何使用, 還能夠略微領悟到如何封裝和設計javascript控件.
在提交表單前常要對用戶輸入進行校驗.ASP.NET的驗證控件就是用于此目的, 可以同時進行客戶端和服務器端驗證. 但是驗證控件并沒有被所有項目采用. 而且在MVC項目中經常使用自己的客戶端驗證框架.
在比較了若干表單驗證插件后, 決定采用validate插件. 因為其使用簡單并且靈活.
插件首頁:
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 - 表單驗證插件實例 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; } /* 出錯樣式 */ 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>表單驗證</legend> <p><label for="cname" class="slabel"><em class="textred">*</em> 姓名:</label> <input id="cname" name="name" size="25"
