|
|
系列文章導(dǎo)航：
從零開始學(xué)習(xí)jQuery (一) 開天辟地入門篇
從零開始學(xué)習(xí)jQuery (二) 萬能的選擇器
從零開始學(xué)習(xí)jQuery (三) 管理jQuery包裝集
從零開始學(xué)習(xí)jQuery (四) 使用jQuery操作元素的屬性與樣式
從零開始學(xué)習(xí)jQuery (五) 事件與事件對象
從零開始學(xué)習(xí)jQuery (六) AJAX快餐
從零開始學(xué)習(xí)jQuery (七) jQuery動畫-讓頁面動起來!
從零開始學(xué)習(xí)jQuery (九) jQuery工具函數(shù)
從零開始學(xué)習(xí)jQuery (十) jQueryUI常用功能實戰(zhàn)
從零開始學(xué)習(xí)jQuery (十一) 實戰(zhàn)表單驗證與自動完成提示插件
一.摘要
本系列文章將帶您進(jìn)入jQuery的精彩世界, 其中有很多作者具體的使用經(jīng)驗和解決方案, 即使你會使用jQuery也能在閱讀中發(fā)現(xiàn)些許秘籍.
本文是介紹兩個最常用的jQuery插件. 分別用于表單驗證和自動完成提示(類似google suggest).
二.前言
研究別人的作品真是一件花時間而且痛苦的過程. 當(dāng)然也和本人英文不好有關(guān). 總覺得控件作者寫了很多文檔但是都不夠系統(tǒng), 需要深入研究很多的實例后才能了解作者的思路.所以學(xué)習(xí)和研究一個插件需要很高成本, 如果發(fā)現(xiàn)了Bug并修復(fù)需要的成本也是未知數(shù)(本次我花了較少的時間解決了自動完成提示插件的一個中文bug, 但是如果復(fù)雜的bug就不會這么簡單了.).
對于簡單應(yīng)用我首先推薦上文中的jQuery UI. 但是jQuery UI解決的問題有限. 使用jQuery插件是我們最后的一個好辦法---還算是好辦法, 起碼比自己開發(fā)要好吧?
很多jQuery的插件編碼異常優(yōu)美, 看一看藝龍首頁現(xiàn)在的城市輸入框控件, 除了需要為輸入框手工添加很多很多屬性(onkeyup, onkeydown等等), 而且還不夠通用, 占用服務(wù)器資源和網(wǎng)絡(luò)資源.但是當(dāng)初也是花費了很久的時間完成的作品.
站在巨人的肩膀上, 讓我感覺寫腳本和寫設(shè)計C#程序一樣, 都有高度和深度可以挖掘. 除了使用作者開發(fā)好的功能, 還可以學(xué)習(xí)如何開發(fā)和封裝Javascript控件. 看過優(yōu)秀的jQuery插件作者的代碼和設(shè)計思想后, 常常自嘆設(shè)計水平差距居然如此之大, 增加自認(rèn)為腳本高手, 比較過后就是C#程序員和架構(gòu)師之間的差距.
希望大家通過本章節(jié)介紹的兩個插件, 除了學(xué)會如何使用, 還能夠略微領(lǐng)悟到如何封裝和設(shè)計Javascript控件.
三.表單驗證插件 validate
在提交表單前常要對用戶輸入進(jìn)行校驗.ASP.NET的驗證控件就是用于此目的, 可以同時進(jìn)行客戶端和服務(wù)器端驗證. 但是驗證控件并沒有被所有項目采用. 而且在MVC項目中經(jīng)常使用自己的客戶端驗證框架.
在比較了若干表單驗證插件后, 決定采用validate插件. 因為其使用簡單并且靈活.
插件首頁:
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
插件文檔:
http://docs.jquery.com/Plugins/Validation
配置說明:
http://docs.jquery.com/Plugins/Validation/validate#options
1.應(yīng)用實例
實例效果:
實例代碼:
<%@ 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/jque
ry-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" class="required" minlength="2" />
</p>
<p><label for="cemail" class="slabel"><em class="textred">*</em> E-Mail:</label>
<input id="cemail" name="email" size="25"/>
</p>
<p><label for="curl" class="slabel">網(wǎng)址:</label>
<input id="curl" name="url" size="25" class="url" value="" />
</p>
<p><label for="ccomment" class="slabel"><em class="textred">*</em> 內(nèi)容:</label>
<textarea rows="2" id="ccomment" name="comment" cols="20" class="required" styl
e="height:80px;"></textarea>
</p>
<p style="text-align:center;">
<input class="submit" type="submit" value="提交" />
</p>
</fieldset>
</form>
<script type="text/Javascript">
/*==========用戶自定義方法==========*/
/*==========事件綁定==========*/
$(function()
{
});
/*==========加載時執(zhí)行的語句==========*/
$(function()
{
$("#commentForm").validate(
{
errorClass: "error",
submitHandler: function(form)
{
//如果想提交表單, 需要使用form.submit()而不要使用$(form).submit()
alert("submitted!");
},
rules: {
//為name為email的控件添加兩個驗證方法:required()和email()
email: { required: true, email: true }
},
messages: {
//為name為email的控件的required()和email()驗證方法設(shè)置驗證失敗的消息內(nèi)容
email: {required:"需要輸入電子郵箱", email:"電子郵箱格式不正確"}
}
});
});
</script>
</body>
</html>
it知識庫：從零開始學(xué)習(xí)jQuery (十一) 實戰(zhàn)表單驗證與自動完成提示插件，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
