原文地址: http://blog.csdn.net/ziwen00/archive/2009/09/14/4551346.aspx
jQuery的Validation插件
最新最全的jQuery插件可以從jQuery的官方網(wǎng)站上面獲得,jQuery下載驗證插件的地址是http://plugins.jquery.com/在打開頁面的左上角’Search’框中輸入validation就可以找到我們想要的驗證插件了,在http://plugins.jquery.com/project/validate下,我們找到了目前最新的版本(2009年6月17日)官方推出的1.5.5版的validate.js.
Validation插件式歷史悠久的jQuery插件之一,經(jīng)過了全球各種項目的驗證,得到了很多WEB開發(fā)者的好評,作為一個表單驗證的解決方案,Validation有很多的優(yōu)點(diǎn),比如:內(nèi)置的驗證規(guī)則,可以自定義驗證規(guī)則,簡單而且強(qiáng)大的驗證信息提示,實時進(jìn)行驗證的功能.都可以令前臺開發(fā)變得非常的簡單.Validation具有內(nèi)置的必填,數(shù)字,Email,URL等多種驗證規(guī)則.實時驗證方面,通過blur和keyup時間來觸發(fā)驗證規(guī)則,可以達(dá)到實時驗證的目的.
下面是一個簡單的例子,HTML和jQuery代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery之驗證插件</title>
<script type='text/javascript' src='jquery-1.3.2.js'></script>
<!-- 引入了jQuery庫之后,繼續(xù)引入validation插件 -->
<script type='text/javascript' src='jquery.validate.js'></script>
<style type='text/css'>
*{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>
<script type='text/javascript'>
$(document).ready(function(){
//確定哪一個表單需要進(jìn)行驗證
$('#commentForm').validate();
});
</script>
</head>
<body>
<form class='cmxform' id='commentForm' method='get' action='#'>
<fieldset>
<legend>一個簡單的帶有提示的評論例子</legend>
<p>
<label for='cusername'>姓名</label><em>*</em>
<!-- 針對不同的字段,進(jìn)行驗證規(guī)則編碼,設(shè)置字段相應(yīng)的屬性 -->
<!-- class='required'來設(shè)置必填驗證,minlength='2'設(shè)置最小長度驗證 -->
<input id='cusername' name='username' size='25' class='required' minlength='2'/>
</p>
<p>
<label for='cemail'>電子郵件</label><em>*</em>
<!-- class='required,email'為必填內(nèi)容和email規(guī)則驗證 -->
<input id='cemail' name='email' size='25' class='required email'/>
</p>
<p>
<label for='curl'>網(wǎng)址</label><em>*</em>
<!-- class='url'設(shè)置url驗證 -->
<input id='curl' name='url' size='25' class='url' value=''/>
</p>
<p>
<label for='ccomment'>你的評論</label><em>*</em>
<!-- 對評論textarea進(jìn)行必填驗證 -->
<textarea id='ccomment' name='comment' cols='25' class='required'></textarea>
</p>
<p>
<input class='submit' type='submit' value='提交'>
</p>
</fieldset>
</form>
</body>
</html>
上面的代碼實現(xiàn)了如下的驗證:
1) 對”姓名”的必填和長度至少為2為的驗證
2) 對”電子郵件”的驗證和是否為E-mail格式的驗證
3) 對”網(wǎng)址”是否為url的驗證
4) 對”你的評論”的必填驗證
5) 提供了在用戶輸入的時候?qū)﹂L度的實時驗證
只需要完成如下幾步,就可以將一個普通的表單變成一個可以進(jìn)行驗證的表單:
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>
<!-- 引入了jQuery庫之后,繼續(xù)引入validation插件 -->
<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>
<!-- 引入了jQuery庫之后,繼續(xù)引入validation插件 -->
<mce:script type='text/javascript' src="jquery.validate.js" mce_src="jquery.validate.js"></mce:script>
2) 確定是哪一個表單需要被驗
view plaincopy to clipboardprint?
$(document).ready(function(){
//確定哪一個表單需要進(jìn)行驗證
$('#commentForm').validate();
});
$(document).ready(function(){
//確定哪一個表單需要進(jìn)行驗證
$('#commentForm').validate();
});
3) 針對不同的字段,進(jìn)行驗證規(guī)則的編碼,設(shè)置字段相應(yīng)的屬性
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'/>
<input id='cemail' name='email' size='25' class='required email'/>
<textarea id='ccomment' name='comment' cols='25' class='required'/>
將所有的驗證規(guī)則寫到class屬性里:
在實際的開發(fā)中,有的時候?qū)Ⅱ炞C規(guī)則寫到class=’required email’有的時候?qū)懙絤inlength=’2’里面,這樣非常的不方便,有沒有一種方式可以將所有的驗證規(guī)則放到一個地方去呢?這個答案是肯定的.jQuery充分考慮到了這一點(diǎn),我們可以通過另外一個JavaScript庫來將所有的驗證規(guī)則放到一個class文件當(dāng)中去.這樣就大大方面了對驗證規(guī)則的管理.
1) 在下載的\jquery-validate\lib文件夾下面找到j(luò)query.metadata.js.放到項目當(dāng)中,然后引入該jQuery插件.jquery.metadate.js是一個支持固定格式解析的jQuery插件,Validation插件將其很好的融合到驗證規(guī)則編碼當(dāng)中.
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) 改變調(diào)用的驗證方法
view plaincopy to clipboardprint?
<mce:script type='text/javascript'><!--
$(document).ready(function(){
//確定那個表單進(jìn)行驗證(改變調(diào)用的驗證方法)
$('#commentForm').validate({meta: "validate"});
});
// --></mce:script>
<mce:script type='text/javascript'><!--
$(document).ready(function(){
//確定那個表單進(jìn)行驗證(改變調(diào)用的驗證方法)
$('#commentForm').validate({meta: "validate"});
});
// --></mce:script>
3) 將所有的驗證規(guī)則都通過類似{validate:{required:true,email:true}}的形式,寫到class屬性當(dāng)中,詳細(xì)的HTML代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery之驗證插件</title>
<script type='text/javascript' src='jquery-1.3.2.js'></script>
<!-- 引入了jQuery庫之后,繼續(xù)引入validation插件 -->
<script type='text/javascript' src='jquery.validate.js'></script>
<!-- 引入一個新的jQuery插件 -->
<script type="text/javascript" src='jquery.metadata.js'></script>
<style type='text/css'>
*{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>
<script type='text/javascript'>
$(document).ready(function(){
//確定那個表單進(jìn)行驗證(改變調(diào)用的驗證方法)
$('#commentForm').validate({meta: "validate"});
});
</script>
</head>
<body>
<form class='cmxform' id='commentForm' method='get' action='#'>
<fieldset>
<legend>一個簡單的帶有提示的評論例子</legend>
<p>
<label for='cusername'>姓名</label><em>*</em>
<input id='cusername' name='username' size='25' class='{validate:{required:true,minlength:2}}'/>
</p>
<p>
<label for='cemail'>電子郵件</label><em>*</em>
<input id='cemail' name='email' size='25' class='{validate:{required:true,email:true}}'/>
</p>
<p>
<label for='curl'>網(wǎng)址</label><em>*</em>
<input id='curl' name='url' size='25' class='{validate:{url:true}}' value=''/>
</p>
<p>
<label for='ccomment'>你的評論</label><em>*</em>
<textarea id='ccomment' name='comment' cols='25' class='{validate:{required:true}}'></textarea>
</p>
<p>
<input class='submit' type='submit' value='提交'>
</p>
</fieldset>
</form>
</body>
</html>
將驗證行為和HTML結(jié)構(gòu)完全脫離的一種驗證寫法:
上面的兩種寫法,一種是通過給標(biāo)簽添加屬性來完成驗證,一種是通過jquery.metadate.js的幫助將所有的驗證規(guī)則添加到class屬性中,都沒有符合jQuery提倡的”行為和操作分離”的一個原則,下面的方法就補(bǔ)足了這個缺陷,可以讓HTML結(jié)構(gòu)和驗證規(guī)則很好的分離出來
HTML代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery之驗證插件</title>
<script type='text/javascript' src='jquery-1.3.2.js'></script>
<!-- 引入了jQuery庫之后,繼續(xù)引入validation插件 -->
<script type='text/javascript' src='jquery.validate.js'></script>
<style type='text/css'>
*{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>
<script type='text/javascript'>
$(document).ready(function(){
$('#commentForm').validate({
rules:{
username:{
required:true,
minlength:3
},
email:{
required:true,
email:true
},
url:"url",
comment:"required"
}
})
});
</script>
</head>
<body>
<form class='cmxform' id='commentForm' method='get' action='#'>
<fieldset>
<legend>一個簡單的帶有提示的評論例子</legend>
<p>
<label for='cusername'>姓名</label><em>*</em>
<input id='cusername' name='username' size='25' />
</p>
<p>
<label for='cemail'>電子郵件</label><em>*</em>
<input id='cemail' name='email' size='25' />
</p>
<p>
<label for='curl'>網(wǎng)址</label><em>*</em>
<input id='curl' name='url' size='25' value=''/>
</p>
<p>
<label for='ccomment'>你的評論</label><em>*</em>
<textarea id='ccomment' name='comment' cols='25'></textarea>
</p>
<p>
<input class='submit' type='submit' value='提交'>
</p>
</fieldset>
</form>
</body>
</html>
在這種”HTML和驗證完全分離”的驗證規(guī)則寫法的步驟如下:
1) 在$(“#ccommentForm”).validate()方法中增加rules屬性
2) 通過每個字段的name屬性來匹配驗證規(guī)則
3) 定義驗證規(guī)則,比如required:true,email:true,minlength:2等等.
將默認(rèn)的英文驗證信息變成中文:
validation插件默認(rèn)的驗證信息是英文的,要想將validation驗證插件給出的驗證信息變成中文就可以到j(luò)query-validate\localization文件夾下面找到messages_cn.js文件,這個就是中文的驗證信息庫,我們只需要在代碼中將這個文件導(dǎo)入就可以實現(xiàn)中文驗證信息的輸出了.在jquery-validate\localization這個文件夾下面,還有很多種語言,我們可以選擇適當(dāng)?shù)恼Z言引入到我們的項目當(dāng)中,實現(xiàn)提示信息的本地化.
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驗證插件可以非常方便的進(jìn)行自定義驗證規(guī)則,這樣可以用來代替千篇一律的驗證信息,具體修改好的HTML代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery之驗證插件</title>
<script type='text/javascript' src='jquery-1.3.2.js'></script>
<!-- 引入了jQuery庫之后,繼續(xù)引入validation插件 -->
<script type='text/javascript' src='jquery.validate.js'></script>
<!-- 引入中文驗證信息庫 -->
<script type='text/javascript' src='messages_cn.js'></script>
<!-- 要將所有的驗證規(guī)則放到css標(biāo)簽當(dāng)中去,就要引入metadate.js -->
<script type='text/javascript' src='jquery.metadata.js'></script>
<style type='text/css'>
*{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>
<script type='text/javascript'>
$(document).ready(function(){
$('#commentForm').validate({meta:"validate"});
});
</script>
</head>
<body>
<form class='cmxform' id='commentForm' method='get' action='#'>
<fieldset>
<legend>一個簡單的帶有提示的評論例子</legend>
<p>
<label for='cusername'>姓名</label><em>*</em>
<input id='cusername' name='username'
class="{validate:{required:true,minlength:2,messages:{
required:'姓名是必須要輸入的',
minlength:'請輸入不少于兩個字符的姓名'}}}"
size='25' />
</p>
<p>
<label for='cemail'>電子郵件</label><em>*</em>
<input id='cemail' name='email'
class="{validate:{required:true,email:true,messages:{
required:'郵箱是必須要輸入的',
email:'請輸入符合格式的Email地址'}}}"
size='25' />
</p>
<p>
<label for='curl'>網(wǎng)址</label><em>*</em>
<input id='curl' name='url'
class="{validate:{url:true,messages:{
url:'您的URL地址的輸入不符合要求'}}}"
size='25' value=''/>
</p>
<p>
<label for='ccomment'>你的評論</label><em>*</em>
<textarea id='ccomment' name='comment'
class="{validate:{
required:true,messages:{required:'多少也寫點(diǎn)評論哦'}}}"
cols='25'></textarea>
</p>
<p>
<input class='submit' type='submit' value='提交'>
</p>
</fieldset>
</form>
</body>
</html>
具體來說,上面的代碼就是在class的屬性中增加了類似messages:{required:’’,email:’’}形式的一塊代碼,這樣就可以顯示我們自定義的驗證信息了.
自己來定義表單驗證的業(yè)務(wù)規(guī)則:
通常在開發(fā)項目中,驗證規(guī)則與實際的業(yè)務(wù)邏輯是息息相關(guān)的,一個好的驗證插件必須要支持自定義驗證機(jī)制,當(dāng)然jQuery就提供了多種機(jī)制來滿足用戶的業(yè)務(wù)需要.
我們添加以下代碼到上面的HTML代碼中,方便進(jìn)行驗證碼的功能實現(xiàn).
view plaincopy to clipboardprint?
<p>
<label for='cvalcode'>驗證碼</label>
<input id='cvalcode' name='valcode' size='25' value=''/>=7+9
</p>
<p>
<label for='cvalcode'>驗證碼</label>
<input id='cvalcode' name='valcode' size='25' value=''/>=7+9
</p>
為了實現(xiàn)”驗證碼”的功能,我們需要以下幾個步驟:
1) 自定義一個驗證規(guī)則
view plaincopy to clipboardprint?
$.validator.addMethod(
"formula", //驗證方法的名稱
function(value,element,param){ //驗證規(guī)則
return value==eval(param);
},
'請輸入正確的結(jié)果' //提示驗證信息
);
$.validator.addMethod(
"formula", //驗證方法的名稱
function(value,element,param){ //驗證規(guī)則
return value==eval(param);
},
'請輸入正確的結(jié)果' //提示驗證信息
);
2) 在代碼中引用以上驗證規(guī)則
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博客，轉(zhuǎn)載請標(biāo)明出處：http://blog.csdn.net/ziwen00/archive/2009/09/14/4551346.aspx
posted on 2010-01-25 21:04
周銳 閱讀(1974)
評論(0) 編輯 收藏 所屬分類:
Ajax