域名注冊(cè)

中文域名
英文域名
通用網(wǎng)址
域名解析
域名轉(zhuǎn)入\轉(zhuǎn)出

虛擬主機(jī)

主機(jī)購(gòu)買
管理主機(jī)
FTP上傳
數(shù)據(jù)庫(kù)管理
主機(jī)續(xù)費(fèi)升級(jí)

網(wǎng)站建設(shè)

建站流程介紹
網(wǎng)站設(shè)計(jì)
網(wǎng)站改版
網(wǎng)站維護(hù)
網(wǎng)站推廣

企業(yè)郵局

郵箱使用
管理郵箱
郵箱續(xù)費(fèi)升級(jí)
全球郵局

網(wǎng)站優(yōu)化

seo優(yōu)化
seo技巧
收索引擎優(yōu)化
關(guān)鍵詞優(yōu)化

網(wǎng)站備案

備案流程指南
修改備案
備案資料下載
備案小技巧

服務(wù)器租用

服務(wù)器租用
服務(wù)器托管

其它服務(wù)

400電話
在線客服
財(cái)務(wù)常見(jiàn)問(wèn)題
會(huì)員常見(jiàn)問(wèn)題

您現(xiàn)在的位置：創(chuàng)新互聯(lián) >> 網(wǎng)站建設(shè) >> 網(wǎng)站建設(shè)常見(jiàn)問(wèn)題 >> jQuery實(shí)戰(zhàn)開(kāi)發(fā)表單驗(yàn)證與自動(dòng)完成提示插件

jQuery實(shí)戰(zhàn)開(kāi)發(fā)表單驗(yàn)證與自動(dòng)完成提示插件

作者：譚小姐文章來(lái)源：網(wǎng)站制作設(shè)計(jì)部點(diǎn)擊數(shù)：1612 更新時(shí)間：2009-9-14
本文是介紹兩個(gè)最常用的jQuery插件. 分別用于表單驗(yàn)證和自動(dòng)完成提示(類似google suggest).
研究別人的作品真是一件花時(shí)間而且痛苦的過(guò)程. 當(dāng)然也和本人英文不好有關(guān). 總覺(jué)得控件作者寫了很多文檔但是都不夠系統(tǒng), 需要深入研究很多的實(shí)例后才能了解作者的思路.所以學(xué)習(xí)和研究一個(gè)插件需要很高成本, 如果發(fā)現(xiàn)了Bug并修復(fù)需要的成本也是未知數(shù)(本次我花了較少的時(shí)間解決了自動(dòng)完成提示插件的一個(gè)中文bug, 但是如果復(fù)雜的bug就不會(huì)這么簡(jiǎn)單了.).
對(duì)于簡(jiǎn)單應(yīng)用我首先推薦上文中的jQuery UI. 但是jQuery UI解決的問(wèn)題有限. 使用jQuery插件是我們最后的一個(gè)好辦法---還算是好辦法, 起碼比自己開(kāi)發(fā)要好吧
很多jQuery的插件編碼異常優(yōu)美, 看一看藝龍首頁(yè)現(xiàn)在的城市輸入框控件, 除了需要為輸入框手工添加很多很多屬性(onkeyup, onkeydown等等), 而且還不夠通用, 占用服務(wù)器資源和網(wǎng)絡(luò)資源.但是當(dāng)初也是花費(fèi)了很久的時(shí)間完成的作品.
站在巨人的肩膀上, 讓我感覺(jué)寫腳本和寫設(shè)計(jì)C#程序一樣, 都有高度和深度可以挖掘. 除了使用作者開(kāi)發(fā)好的功能, 還可以學(xué)習(xí)如何開(kāi)發(fā)和封裝javascript控件. 看過(guò)優(yōu)秀的jQuery插件作者的代碼和設(shè)計(jì)思想后, 常常自嘆設(shè)計(jì)水平差距居然如此之大, 增加自認(rèn)為腳本高手, 比較過(guò)后就是C#程序員和架構(gòu)師之間的差距.
希望大家通過(guò)本章節(jié)介紹的兩個(gè)插件, 除了學(xué)會(huì)如何使用, 還能夠略微領(lǐng)悟到如何封裝和設(shè)計(jì)javascript控件.
一.表單驗(yàn)證插件 validate
在提交表單前常要對(duì)用戶輸入進(jìn)行校驗(yàn).ASP.NET的驗(yàn)證控件就是用于此目的, 可以同時(shí)進(jìn)行客戶端和服務(wù)器端驗(yàn)證. 但是驗(yàn)證控件并沒(méi)有被所有項(xiàng)目采用. 而且在MVC項(xiàng)目中經(jīng)常使用自己的客戶端驗(yàn)證框架.
在比較了若干表單驗(yàn)證插件后, 決定采用validate插件. 因?yàn)槠涫褂煤?jiǎn)單并且靈活.
插件首頁(yè):
實(shí)例代碼:
<%@PageLanguage="C#"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headid="Head1"runat="server">
<title>jQueryPlugIn-表單驗(yàn)證插件實(shí)例Validate</title>

<linkrel="stylesheet"type="text/css"href="<%=WebConfig.ResourceServer+"/JsLib/jquery/themes/redmond
/style.css"%>"/>
<scripttype="text/javascript"src="<%=WebConfig.ResourceServer%>/JsLib/jquery/jquery-min-lastest.js"></script>
<scripttype="text/javascript"src="<%=WebConfig.ResourceServer%>/JsLib/jquery/ui/jquery-ui-all-min-lastest.js"></script>
<scripttype="text/javascript"src="<%=WebConfig.ResourceServer%>/JsLib/jquery/plugin/jquery.validate
/jquery.validate.min.js"></script>
<scripttype="text/javascript"src="<%=WebConfig.ResourceServer%>/JsLib/jquery/plugin/jquery.validate
/localization/messages_cn.js"></script>
<%if(false)
{%><scriptsrc="~/js/jquery-vsdoc-lastest.js"type="text/javascript"></script>
<%}%>
<scripttype="text/javascript">
/*==========必須放在頭部加載的語(yǔ)句塊.盡量避免使用==========*/
</script>
<styletype="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:solid1px#CD0A0A
}
label.error
{
color:#CD0A0A;
margin-left:5px;
}
/*深紅色文字*/
.textred
{
color:#CD0A0A;
}
</style>
</head>
<body>
<formid="commentForm"method="get"action="">
<fieldsetstyle="width:500px;"><legend>表單驗(yàn)證</legend>
<p><labelfor="cname"class="slabel"><emclass="textred">*</em>姓名:</label>
<inputid="cname"name="name"size="25"class="required"minlength="2"/>
</p>
<p><labelfor="cemail"class="slabel"><emclass="textred">*</em>E-Mail:</label>
<inputid="cemail"name="email"size="25"/>
</p>
<p><labelfor="curl"class="slabel">網(wǎng)址:</label>
<inputid="curl"name="url"size="25"class="url"value=""/>
</p>
<p><labelfor="ccomment"class="slabel"><emclass="textred">*</em>內(nèi)容:</label>
<textarearows="2"id="ccomment"name="comment"cols="20"class="required"style="height:80px;"></textarea>
</p>
<pstyle="text-align:center;">
<inputclass="submit"type="submit"value="提交"/>
</p>
</fieldset>
</form>
<scripttype="text/javascript">
/*==========用戶自定義方法==========*/
/*==========事件綁定==========*/
$(function()
{
});
/*==========加載時(shí)執(zhí)行的語(yǔ)句==========*/
$(function()
{
$("#commentForm").validate(
{
errorClass:"error",
submitHandler:function(form)
{
//如果想提交表單,需要使用form.submit()而不要使用$(form).submit()
alert("submitted!");
},
rules:{
//為name為email的控件添加兩個(gè)驗(yàn)證方法:required()和email()
email:{required:true,email:true}
},
messages:{
//為name為email的控件的required()和email()驗(yàn)證方法設(shè)置驗(yàn)證失敗的消息內(nèi)容
email:{required:"需要輸入電子郵箱",email:"電子郵箱格式不正確"}
}
});
});
</script>
</body>
</html>
上一篇文章：jQuery基本事件代碼優(yōu)化
下一篇文章：自己動(dòng)手開(kāi)發(fā)jQuery插件

分享到： QQ空間新浪微博騰訊微博人人網(wǎng) 開(kāi)心網(wǎng) 百度搜藏騰訊微博網(wǎng)易微博

国产又黄又粗又长又大的视频-色婷婷久久一区二区爽爽爽-欧美日本韩国国产在线观-尹人香蕉琪琪在现观看

域名注冊(cè)

虛擬主機(jī)

網(wǎng)站建設(shè)

企業(yè)郵局

網(wǎng)站優(yōu)化

網(wǎng)站備案

服務(wù)器租用

其它服務(wù)

jQuery實(shí)戰(zhàn)開(kāi)發(fā)表單驗(yàn)證與自動(dòng)完成提示插件