生命科學領域的專業信息解決方案！

化學結構搜索，化學信息學，生物信息學，實驗室信息學等。
以高科技的生物、化學信息技術實現生命科學領域中專業數據的計算和管理、提高研發能力、增強在科研和成本效率方面的國際競爭力，為生物、化學、醫藥和學術機構提供一流的解決方案和技術咨詢。

子曰：危邦不入，亂邦不居。天下有道則見，無道則隱。

BlogJava :: 首頁 :: 新隨筆 :: 聯系 :: 聚合

:: 管理

posts - 431, comments - 344, trackbacks - 0

公告

Don't Repeat Yourself
座右銘：you can lose your money, you can spent all of it, and if you work hard you get it all back. But if you waste your time, you're never gonna get it back.
公告：本博客在此聲明部分文章為轉摘，只做資料收集使用。

微信: szhourui
QQ：109450684
Email
：lsi.zhourui@gmail.com

<

2010年1月

>

日

一

二

三

四

五

六

27

28

29

30

31

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

6

留言簿(15)

隨筆分類(1019)

文章分類(3)

文章檔案(21)

收藏夾

Java
Struts

Link

DHTML 參考手冊
speedtest
UML軟件工程組織
手冊中心

好友博客

Andy Yao
Charlie Zhu
Seal's Blog
叉的博客
姜海英
肖西洋
bio & chem

搜索

積分與排名

積分 - 861268
排名 - 44

閱讀排行榜

jQuery的Validation插件[轉載]

原文地址: http://blog.csdn.net/ziwen00/archive/2009/09/14/4551346.aspx

jQuery的Validation插件

最新最全的jQuery插件可以從jQuery的官方網站上面獲得,jQuery下載驗證插件的地址是http://plugins.jquery.com/在打開頁面的左上角’Search’框中輸入validation就可以找到我們想要的驗證插件了,在http://plugins.jquery.com/project/validate下,我們找到了目前最新的版本(2009年6月17日)官方推出的1.5.5版的validate.js.

Validation插件式歷史悠久的jQuery插件之一,經過了全球各種項目的驗證,得到了很多WEB開發者的好評,作為一個表單驗證的解決方案,Validation有很多的優點,比如:內置的驗證規則,可以自定義驗證規則,簡單而且強大的驗證信息提示,實時進行驗證的功能.都可以令前臺開發變得非常的簡單.Validation具有內置的必填,數字,Email,URL等多種驗證規則.實時驗證方面,通過blur和keyup時間來觸發驗證規則,可以達到實時驗證的目的.

下面是一個簡單的例子,HTML和jQuery代碼如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>jQuery之驗證插件</title>

*{font-family:Verdana;font-size:96%;}

label.error{float:none;color:red;padding-left:.5em;vertical-align:top;}

p{clear:both;}

.submit{margin-left:12em;}

em{font-weight:bold;vertical-align:top;}

</style>

$(document).ready(function(){

//確定哪一個表單需要進行驗證

$('#commentForm').validate();

});

</script>

</head>

<body>

<legend>一個簡單的帶有提示的評論例子</legend>

<p>

</p>

<p>

</p>

<p>

</p>

<p>

</p>

<p>

</p>

</fieldset>

</form>

</body>

</html>

上面的代碼實現了如下的驗證:

1) 對”姓名”的必填和長度至少為2為的驗證

2) 對”電子郵件”的驗證和是否為E-mail格式的驗證

3) 對”網址”是否為url的驗證

4) 對”你的評論”的必填驗證

5) 提供了在用戶輸入的時候對長度的實時驗證

只需要完成如下幾步,就可以將一個普通的表單變成一個可以進行驗證的表單:

1) 引入jQuery庫和Validation插件

view plaincopy to clipboardprint?
<mce:script type='text/javascript' src="jquery-1.3.2.js" mce_src="jquery-1.3.2.js"></mce:script>



<mce:script type='text/javascript' src="jquery.validate.js" mce_src="jquery.validate.js"></mce:script>
<mce:script type='text/javascript' src="jquery-1.3.2.js" mce_src="jquery-1.3.2.js"></mce:script>

<mce:script type='text/javascript' src="jquery.validate.js" mce_src="jquery.validate.js"></mce:script>

2) 確定是哪一個表單需要被驗

view plaincopy to clipboardprint?
$(document).ready(function(){

//確定哪一個表單需要進行驗證

$('#commentForm').validate();

});
$(document).ready(function(){

//確定哪一個表單需要進行驗證

$('#commentForm').validate();

});

3) 針對不同的字段,進行驗證規則的編碼,設置字段相應的屬性

view plaincopy to clipboardprint?
<input id='cusername' name='username' size='25' class='required' minlength='2'/>

<input id='cemail' name='email' size='25' class='required email'/>

<textarea id='ccomment' name='comment' cols='25' class='required'/>
<input id='cusername' name='username' size='25' class='required' minlength='2'/>

將所有的驗證規則寫到class屬性里:

在實際的開發中,有的時候將驗證規則寫到class=’required email’有的時候寫到minlength=’2’里面,這樣非常的不方便,有沒有一種方式可以將所有的驗證規則放到一個地方去呢?這個答案是肯定的.jQuery充分考慮到了這一點,我們可以通過另外一個JavaScript庫來將所有的驗證規則放到一個class文件當中去.這樣就大大方面了對驗證規則的管理.

1) 在下載的\jquery-validate\lib文件夾下面找到jquery.metadata.js.放到項目當中,然后引入該jQuery插件.jquery.metadate.js是一個支持固定格式解析的jQuery插件,Validation插件將其很好的融合到驗證規則編碼當中.

view plaincopy to clipboardprint?
<mce:script type="text/javascript" src="jquery.metadata.js" mce_src="jquery.metadata.js"></mce:script>
<mce:script type="text/javascript" src="jquery.metadata.js" mce_src="jquery.metadata.js"></mce:script>

2) 改變調用的驗證方法

view plaincopy to clipboardprint?
<mce:script type='text/javascript'></mce:script>
<mce:script type='text/javascript'><!--
    $(document).ready(function(){

//確定那個表單進行驗證(改變調用的驗證方法)

$('#commentForm').validate({meta: "validate"});

});
// --></mce:script>

3) 將所有的驗證規則都通過類似{validate:{required:true,email:true}}的形式,寫到class屬性當中,詳細的HTML代碼如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>jQuery之驗證插件</title>

*{font-family:Verdana;font-size:96%;}

label.error{float:none;color:red;padding-left:.5em;vertical-align:top;}

p{clear:both;}

.submit{margin-left:12em;}

em{font-weight:bold;vertical-align:top;}

</style>

$(document).ready(function(){

//確定那個表單進行驗證(改變調用的驗證方法)

$('#commentForm').validate({meta: "validate"});

});

</script>

</head>

<body>

<legend>一個簡單的帶有提示的評論例子</legend>

<p>

</p>

<p>

</p>

<p>

</p>

<p>

</p>

<p>

</p>

</fieldset>

</form>

</body>

</html>

將驗證行為和HTML結構完全脫離的一種驗證寫法:

上面的兩種寫法,一種是通過給標簽添加屬性來完成驗證,一種是通過jquery.metadate.js的幫助將所有的驗證規則添加到class屬性中,都沒有符合jQuery提倡的”行為和操作分離”的一個原則,下面的方法就補足了這個缺陷,可以讓HTML結構和驗證規則很好的分離出來

HTML代碼如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>jQuery之驗證插件</title>

*{font-family:Verdana;font-size:96%;}

label.error{float:none;color:red;padding-left:.5em;vertical-align:top;}

p{clear:both;}

.submit{margin-left:12em;}

em{font-weight:bold;vertical-align:top;}

</style>

$(document).ready(function(){

$('#commentForm').validate({

rules:{

username:{

required:true,

minlength:3

},

email:{

required:true,

email:true

},

url:"url",

comment:"required"

}

})

});

</script>

</head>

<body>

<legend>一個簡單的帶有提示的評論例子</legend>

<p>

</p>

<p>

</p>

<p>

</p>

<p>

</p>

<p>

</p>

</fieldset>

</form>

</body>

</html>

在這種”HTML和驗證完全分離”的驗證規則寫法的步驟如下:

1) 在$(“#ccommentForm”).validate()方法中增加rules屬性

2) 通過每個字段的name屬性來匹配驗證規則

3) 定義驗證規則,比如required:true,email:true,minlength:2等等.

將默認的英文驗證信息變成中文:

validation插件默認的驗證信息是英文的,要想將validation驗證插件給出的驗證信息變成中文就可以到jquery-validate\localization文件夾下面找到messages_cn.js文件,這個就是中文的驗證信息庫,我們只需要在代碼中將這個文件導入就可以實現中文驗證信息的輸出了.在jquery-validate\localization這個文件夾下面,還有很多種語言,我們可以選擇適當的語言引入到我們的項目當中,實現提示信息的本地化.

view plaincopy to clipboardprint?


<mce:script type='text/javascript' src="messages_cn.js" mce_src="messages_cn.js"></mce:script>

<mce:script type='text/javascript' src="messages_cn.js" mce_src="messages_cn.js"></mce:script>

改變千篇一律的驗證信息:

validaion驗證插件可以非常方便的進行自定義驗證規則,這樣可以用來代替千篇一律的驗證信息,具體修改好的HTML代碼如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>jQuery之驗證插件</title>

*{font-family:Verdana;font-size:96%;}

label.error{float:none;color:red;padding-left:.5em;vertical-align:top;}

p{clear:both;}

.submit{margin-left:12em;}

em{font-weight:bold;vertical-align:top;}

</style>

$(document).ready(function(){

$('#commentForm').validate({meta:"validate"});

});

</script>

</head>

<body>

<legend>一個簡單的帶有提示的評論例子</legend>

<p>

<input id='cusername' name='username'

class="{validate:{required:true,minlength:2,messages:{

required:'姓名是必須要輸入的',

minlength:'請輸入不少于兩個字符的姓名'}}}"

size='25' />

</p>

<p>

<input id='cemail' name='email'

class="{validate:{required:true,email:true,messages:{

required:'郵箱是必須要輸入的',

email:'請輸入符合格式的Email地址'}}}"

size='25' />

</p>

<p>

<input id='curl' name='url'

class="{validate:{url:true,messages:{

url:'您的URL地址的輸入不符合要求'}}}"

size='25' value=''/>

</p>

<p>

<textarea id='ccomment' name='comment'

class="{validate:{

required:true,messages:{required:'多少也寫點評論哦'}}}"

cols='25'></textarea>

</p>

<p>

</p>

</fieldset>

</form>

</body>

</html>

具體來說,上面的代碼就是在class的屬性中增加了類似messages:{required:’’,email:’’}形式的一塊代碼,這樣就可以顯示我們自定義的驗證信息了.

自己來定義表單驗證的業務規則:

通常在開發項目中,驗證規則與實際的業務邏輯是息息相關的,一個好的驗證插件必須要支持自定義驗證機制,當然jQuery就提供了多種機制來滿足用戶的業務需要.

我們添加以下代碼到上面的HTML代碼中,方便進行驗證碼的功能實現.

view plaincopy to clipboardprint?
<p>

<label for='cvalcode'>驗證碼</label>

<input id='cvalcode' name='valcode' size='25' value=''/>=7+9

</p>
<p>

<input id='cvalcode' name='valcode' size='25' value=''/>=7+9

</p>

為了實現”驗證碼”的功能,我們需要以下幾個步驟:

1) 自定義一個驗證規則

view plaincopy to clipboardprint?
$.validator.addMethod(

    "formula",                       //驗證方法的名稱

    function(value,element,param){   //驗證規則

       return value==eval(param);

       },

      '請輸入正確的結果'                //提示驗證信息

);
$.validator.addMethod(

"formula", //驗證方法的名稱

function(value,element,param){ //驗證規則

return value==eval(param);

},

'請輸入正確的結果' //提示驗證信息

);

2) 在代碼中引用以上驗證規則

view plaincopy to clipboardprint?
$('#commentForm').validate({

    rules:{

       username:{

           required:true,

           minlength:3

       },

       email:{

           required:true,

           email:true

       },

       url:"url",

       comment:"required",

       valcode:{formula:"7+9"}

    }

})

本文來自CSDN博客，轉載請標明出處：http://blog.csdn.net/ziwen00/archive/2009/09/14/4551346.aspx

posted on 2010-01-25 21:04 周銳閱讀(1977) 評論(0) 編輯收藏所屬分類: Ajax

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: 高性能網站建設-示例 jQuery獲取重名input的數組值 jQuery的Validation插件[轉載] Extjs－displayfield格式化日期 ExtJS的xtype列表 jquery 中對checkbox的一些操作 Jmesa中加入checkbox列和導出功能 ajax請求時的緩存的問題[轉載] 防止jQuery Load使用緩存的方法[轉載] Jmesa中處理Map的List對象

生命科學領域的專業信息解決方案！

留言簿(15)

隨筆分類(1019)

文章分類(3)

文章檔案(21)

收藏夾

Link

好友博客

最新隨筆

搜索

積分與排名

最新評論

閱讀排行榜