jQuery驗(yàn)證插件validate使用方法詳解
1. 寫在前面
我們知道，用戶在注冊的時(shí)候，會(huì)有個(gè)表單頁面，然后有些選項(xiàng)是必填的，有些要填的內(nèi)容是有規(guī)范的，這些都要在用戶提交之前進(jìn)行驗(yàn)證才行，如果不符合要求，需要在右邊顯示一個(gè)友好的提示，讓用戶修改。
記得以前在學(xué)習(xí)Servlet的時(shí)候，實(shí)現(xiàn)一個(gè)簡單的用戶注冊功能的驗(yàn)證是在后臺(tái)做的，有些用了正則表達(dá)式，有些沒用，但是都比較簡單。流程是這樣的，前臺(tái)提交表單數(shù)據(jù)后，servlet獲取數(shù)據(jù)先進(jìn)行驗(yàn)證，如果不符合要求，將提示信息放到一個(gè)List中，然后再把List存到session中，跳轉(zhuǎn)到一個(gè)新的頁面做回顯，把錯(cuò)誤信息也顯示出來，但是比較繁瑣。
前面做網(wǎng)上商城項(xiàng)目的時(shí)候，用EasyUI做后臺(tái)商品添加時(shí)，也做了驗(yàn)證的功能，EasyUI自帶了驗(yàn)證的功能，還是很強(qiáng)大的，效果也不錯(cuò)。感興趣的話不妨來看一下這篇文章。
但是前臺(tái)用戶注冊的頁面我們該如何做呢？這就是本文所要介紹的主要內(nèi)容了，我們可以使用jQuery的Validate插件來做注冊的驗(yàn)證功能，jQuery我也沒有系統(tǒng)的學(xué)習(xí)，只是用到什么學(xué)什么，用到什么了解什么，所以如有錯(cuò)誤之處，歡迎留言指正~下面我一步步通過代碼詳細(xì)介紹一下jQuery-Validate驗(yàn)證插件的使用步驟。
2. 效果展示
首先來看一下最后實(shí)現(xiàn)的效果，先有個(gè)直觀的感受，個(gè)人感覺還算可以的~能接受。
從圖中可以看出，包括輸入前的提示，輸入正確和錯(cuò)誤的提示的功能，都已經(jīng)完成。再看一下我的工程：
總共有6個(gè)jsp文件，之所以寫成6個(gè)是為了一步步解說做這個(gè)效果的步驟，最后terminal.jsp是最終版的。運(yùn)行的時(shí)候也只需要運(yùn)行這個(gè)terminal.jsp即可。 下面我詳細(xì)分析一下使用jQurey-Validate驗(yàn)證插件的過程。
3. Validate環(huán)境的搭建
環(huán)境搭建，肯定少不了jar包，我使用的是jQuery-validate-1.15，官方上給出了依賴的幾個(gè)版本的jQuery，我下了jQuery-1.11.1。所以將這兩個(gè)js文件放到工程中WebRoot/js中，并在jsp頁面中導(dǎo)入即可。
demo1.jsp很簡單，為了搭建環(huán)境而已，如果點(diǎn)擊提交，不會(huì)跳轉(zhuǎn)到指定頁面表示環(huán)境搭建成功。
4. Validate基本方法的使用
好了，環(huán)境搭建成功了，接下來我們開始使用Validate的基本方法了，這里還要導(dǎo)入一個(gè)js文件：additional-methods.js，新版本的jQuery-validate-1.15中沒有對(duì)文件后綴的驗(yàn)證，后來我在官網(wǎng)上查了一下，官網(wǎng)上說放到additional-methods.js中了，所以我去下了個(gè)，放到工程中了，而且方法名也和老版本不太一樣，下面再說?？匆幌耫emo2.jsp：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jquery validate驗(yàn)證</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/additional-methods.js"></script>
<script type="text/javascript">
$(function(){
//讓當(dāng)前表單調(diào)用validate方法，實(shí)現(xiàn)表單驗(yàn)證功能
$("#ff").validate({
debug:true, //調(diào)試模式，即使驗(yàn)證成功也不會(huì)跳轉(zhuǎn)到目標(biāo)頁面
rules:{ //配置驗(yàn)證規(guī)則，key就是被驗(yàn)證的dom對(duì)象，value就是調(diào)用驗(yàn)證的方法(也是json格式)
sname:{
required:true, //必填。如果驗(yàn)證方法不需要參數(shù)，則配置為true
rangelength:[6,12]
},
spass:{
required:true,
rangelength:[6,12]
},
spass2:{
required:true,
equalTo:'#spass' //表示和id="spass"的值相同
},
slike:{
required:true,
},
semail:{
required:true,
email:true
},
simage:{
required:true,
extension:'gif|jpe?g|png'
}
}
});
});
</script>
</head>
<body>
<!--
<ul>
<li>演示基本方法的使用</li>
<li>jquery.validate.js中260行有缺省的驗(yàn)證配置</li>
<li>jquery.validate.js中354行有驗(yàn)證方法出錯(cuò)的消息，即告訴我們都有哪些驗(yàn)證方法</li>
</ul>
-->
<form id="ff" action="http://www.hao123.com" method="post">
姓名：<input type="text" name="sname" /><br/>
密碼：<input type="password" name="spass" id="spass"/><br/>
確認(rèn)密碼：<input type="password" name="spass2" /><br/>
愛好：
上網(wǎng)：<input type="checkbox" name="slike" value="上網(wǎng)"/>
唱歌：<input type="checkbox" name="slike" value="唱歌"/>
編程：<input type="checkbox" name="slike" value="編程"/>
書法：<input type="checkbox" name="slike" value="書法"/><br/>
郵箱：<input type="text" name="semail" /><br/>
頭像：<input type="file" name="simage" /><br/>
<input type="submit" value="提交">
</form>
</body>
</html>
demo2中，我們寫了一些基本的表單了，并且在js中對(duì)其進(jìn)行了驗(yàn)證，validate中定義了一些缺省的驗(yàn)證，required表示必填字段，rangelength表示長度范圍，用數(shù)組表示范圍邊界，equalTo后面跟一個(gè)id，表示跟后面跟的id的元素內(nèi)容相同，這里說一下extension，表示后綴，以前版本叫accept，新版本中改為extension了，網(wǎng)上的搜索的關(guān)于后綴的驗(yàn)證都是accept，新版沒了，而且extension就是在新加的additional-methods.js中。我們看一下這個(gè)版本的效果：
有點(diǎn)丑……因?yàn)檫€沒做css， 但是我直接點(diǎn)擊提交，會(huì)出現(xiàn)一些驗(yàn)證信息了，這些都是默認(rèn)的信息，是源碼中提供的，說明一點(diǎn)，驗(yàn)證功能生效了，我們下面就改寫一下后面顯示的信息，這些默認(rèn)的顯然不太友好。
5. 實(shí)現(xiàn)錯(cuò)誤消息的本地化
我們可以指定messages消息的顯示內(nèi)容，也是json格式的，如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jquery validate驗(yàn)證</title>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript" src="additional-methods.js"></script>
<script type="text/javascript">
$(function(){
//讓當(dāng)前表單調(diào)用validate方法，實(shí)現(xiàn)表單驗(yàn)證功能
$("#ff").validate({
debug:true, //調(diào)試模式，即使驗(yàn)證成功也不會(huì)跳轉(zhuǎn)到目標(biāo)頁面
rules:{ //配置驗(yàn)證規(guī)則，key就是被驗(yàn)證的dom對(duì)象，value就是調(diào)用驗(yàn)證的方法(也是json格式)
sname:{
required:true, //必填。如果驗(yàn)證方法不需要參數(shù)，則配置為true
rangelength:[6,12]
},
spass:{
required:true,
rangelength:[6,12]
},
spass2:{
required:true,
equalTo:'#spass' //表示和id="spass"的值相同
},
saddress:{
required:true
},
semail:{
required:true,
email:true
},
simage:{
required:true,
extension:'gif|jpe?g|png'
}
},
messages:{
sname:{
required:"請輸入用戶名",
rangelength:$.validator.format("用戶名長度在必須為：{0}-{1}之間")
},
spass:{
required:"請輸入密碼",
rangelength:$.validator.format("字段長度必須為：{0}-{1}之間")
},
spass2:{
required:"請?jiān)俅屋斎朊艽a",
equalTo:"兩次密碼必須一致" //表示和id="spass"的值相同
},
saddress:{
required:"請選擇地址"
},
semail:{
required:"請?zhí)顚戉]件",
email:"郵箱格式不正確"
},
simage:{
required:"請選擇要上傳的頭像",
extension:"文件后綴名必須為jpg,jpeg,gif,png"
}
}
});
});
</script>
</head>
<body>
<!-- body中的內(nèi)容不變，省略不寫了 -->
</body>
</html>
相當(dāng)于覆寫了原來默認(rèn)的消息提示，來看下效果：
這就有點(diǎn)感覺了。繼續(xù)往下完善。
6. 實(shí)現(xiàn)遠(yuǎn)程驗(yàn)證
所謂遠(yuǎn)程驗(yàn)證，指的是當(dāng)用戶注冊時(shí)輸入用戶名時(shí)，系統(tǒng)得從數(shù)據(jù)庫中查詢是否已經(jīng)有該用戶名了，如果有則告訴用戶已經(jīng)有人注冊過了該名字了，但是我們不用去查數(shù)據(jù)庫，我們寫個(gè)Action模擬下即可，主要是實(shí)現(xiàn)validate插件和Action之間的通信。看demo4.jsp：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jquery validate驗(yàn)證</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/additional-methods.js"></script>
<script type="text/javascript">
$(function(){
//讓當(dāng)前表單調(diào)用validate方法，實(shí)現(xiàn)表單驗(yàn)證功能
$("#ff").validate({
debug:true, //調(diào)試模式，即使驗(yàn)證成功也不會(huì)跳轉(zhuǎn)到目標(biāo)頁面
onkeyup:null, //當(dāng)丟失焦點(diǎn)時(shí)才觸發(fā)驗(yàn)證請求
rules:{ //配置驗(yàn)證規(guī)則，key就是被驗(yàn)證的dom對(duì)象，value就是調(diào)用驗(yàn)證的方法(也是json格式)
sname:{
required:true, //必填。如果驗(yàn)證方法不需要參數(shù)，則配置為true
rangelength:[3,12],
remote:{
url:"ajax_check.action",
type:"post"
}
},
spass:{
required:true,
rangelength:[6,12]
},
spass2:{
required:true,
equalTo:'#spass' //表示和id="spass"的值相同
},
saddress:{
required:true
},
semail:{
required:true,
email:true
},
simage:{
required:true,
extension:'gif|jpe?g|png'
}
},
messages:{
sname:{
required:"請輸入用戶名",
rangelength:$.validator.format("用戶名長度在必須為：{0}-{1}之間"),
remote:"該用戶名已存在！"
},
spass:{
required:"請輸入密碼",
rangelength:$.validator.format("字段長度必須為：{0}-{1}之間")
},
spass2:{
required:"請?jiān)俅屋斎朊艽a",
equalTo:"兩次密碼必須一致" //表示和id="spass"的值相同
},
saddress:{
required:"請選擇地址"
},
semail:{
required:"請?zhí)顚戉]件",
email:"郵箱格式不正確"
},
simage:{
required:"請選擇要上傳的頭像",
extension:"文件后綴名必須為jpg,jpeg,gif,png"
}
}
});
});
</script>
</head>
<body>
<!-- body中的內(nèi)容不變，省略不寫了 -->
</body>
</html>
我們看到，在sname里面新加了個(gè)remote方法，這個(gè)是用來遠(yuǎn)程驗(yàn)證的，參數(shù)url是要發(fā)送的請求Action，所以我們后臺(tái)寫個(gè)AjaxAction，在AjaxAction中寫過check方法來，判斷用戶名是否為admin，如果是，則以流的形式返回false，前臺(tái)接收到false就會(huì)驗(yàn)證失敗，返回true則驗(yàn)證成功。失敗了則告訴用戶該用戶名已存在，后臺(tái)Action這里就不寫了，見我上傳的源碼即可。我們來看下效果：
7. 自定義驗(yàn)證方法
我們也可以自定義驗(yàn)證的方法，比如手機(jī)號(hào)，我們可以自己定義驗(yàn)證方法，自己定義的方法最好寫在擴(kuò)展js中，我們自己寫一個(gè)jquery.validate.extend.js放到j(luò)s文件夾中，在該文件中寫上：
//自定義方法，完成手機(jī)號(hào)碼的驗(yàn)證
//name:自定義方法的名稱，method：函數(shù)體, message:錯(cuò)誤消息
$.validator.addMethod("phone", function(value, element, param){
//方法中又有三個(gè)參數(shù):value:被驗(yàn)證的值， element:當(dāng)前驗(yàn)證的dom對(duì)象，param:參數(shù)(多個(gè)即是數(shù)組)
//alert(value + "," + $(element).val() + "," + param[0] + "," + param[1]);
return new RegExp(/^1[3458]\d{9}$/).test(value);
}, "手機(jī)號(hào)碼不正確");
addMethod表示新加的方法，第一個(gè)參數(shù)是方法名，第二個(gè)參數(shù)是函數(shù)體，第三個(gè)參數(shù)表示驗(yàn)證錯(cuò)誤消息。其中函數(shù)體中，又有三個(gè)參數(shù)，value表示驗(yàn)證的值，element表示當(dāng)前dom對(duì)象，param表示參數(shù)。我們使用正則表達(dá)式驗(yàn)證了手機(jī)號(hào)。這里就不測試了。最后我們來看一下終極的表單驗(yàn)證，終極驗(yàn)證表單需要加上CSS了，下面是完整的終極驗(yàn)證代碼。
8. 驗(yàn)證表單完整版
8.1 Html表單
為了讓表單結(jié)構(gòu)簡單而清晰，我們將表單的每個(gè)元素都包裹在一個(gè)div結(jié)構(gòu)中：用label標(biāo)簽用來標(biāo)記元素的名稱，接著便是表單元素本身?！咀⒚鳎?.使用label標(biāo)簽的好處是為鼠標(biāo)用戶改進(jìn)了可用性。當(dāng)在label元素內(nèi)點(diǎn)擊文本時(shí)，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和label相關(guān)的表單控件上。2.每個(gè)需要校驗(yàn)的表單元素都應(yīng)該設(shè)置id和name屬性，方便在使用插件時(shí)將元素綁定校驗(yàn)規(guī)則和校驗(yàn)信息。】
表單實(shí)現(xiàn)代碼如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jquery validate驗(yàn)證</title>
<link rel="stylesheet" href="css/form.css" />
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/additional-methods.js"></script>
<script type="text/javascript" src="js/jquery.validate.extend.js"></script>
<script type="text/javascript">
$(function(){
//讓當(dāng)前表單調(diào)用validate方法，實(shí)現(xiàn)表單驗(yàn)證功能
$("#ff").validate({
debug:true, //調(diào)試模式，即使驗(yàn)證成功也不會(huì)跳轉(zhuǎn)到目標(biāo)頁面
rules:{ //配置驗(yàn)證規(guī)則，key就是被驗(yàn)證的dom對(duì)象，value就是調(diào)用驗(yàn)證的方法(也是json格式)
sname:{
required:true, //必填。如果驗(yàn)證方法不需要參數(shù)，則配置為true
rangelength:[4,12],
remote:{
url:"ajax_check.action",
type:"post"
}
},
spass:{
required:true,
rangelength:[6,16]
},
spass2:{
required:true,
equalTo:'#password' //表示和id="spass"的值相同
},
saddress:{
required:true
},
sphone:{
required:true,
phone:true
},
slike:{
required:true,
},
semail:{
required:true,
email:true
},
simage:{
required:true,
extension:'gif|jpe?g|png'
}
},
messages:{
sname:{
required:"請輸入用戶名",
rangelength:$.validator.format("用戶名長度為{0}-{1}個(gè)字符"),
remote:"該用戶名已存在！"
},
spass:{
required:"請輸入密碼",
rangelength:$.validator.format("密碼長度為{0}-{1}個(gè)字符")
},
spass2:{
required:"請?jiān)俅屋斎朊艽a",
equalTo:"兩次密碼必須一致" //表示和id="spass"的值相同
},
sphone:{
required:"請輸入手機(jī)號(hào)"
},
saddress:{
required:"請選擇地址"
},
slike:{
required:"請選擇愛好",
},
semail:{
required:"請?zhí)顚戉]件",
email:"郵箱格式不正確"
},
simage:{
required:"請選擇要上傳的頭像",
extension:"文件后綴名必須為jpg,jpeg,gif,png"
}
}
});
});
</script>
</head>
<body>
<form action="http://www.hao123.com" method="post" id="ff">
<fieldset>
<legend>jQuery-Validate表單校驗(yàn)驗(yàn)證</legend>
<div class="item">
<label for="username" class="item-label">用戶名:</label>
<input type="text" id="username" name="sname" class="item-text" placeholder="設(shè)置用戶名"
autocomplete="off" tip="請輸入用戶名">
</div>
<div class="item">
<label for="password" class="item-label">密碼:</label>
<input type="password" id="password" name="spass" class="item-text"
placeholder="設(shè)置密碼" tip="長度為6-16個(gè)字符">
</div>
<div class="item">
<label for="password" class="item-label">確認(rèn)密碼:</label>
<input type="password" name="spass2" class="item-text" placeholder="設(shè)置確認(rèn)密碼">
</div>
<div class="item">
<label for="phone" class="item-label">手機(jī)號(hào)碼:</label>
<input type="text" id="phone" name="sphone" class="item-text" placeholder="輸入手機(jī)號(hào)碼" tip="請輸入手機(jī)號(hào)碼">
</div>
<div class="item">
<label for="saddress" class="item-label">所在地:</label>
<select name="saddress" class="item-select">
<option value="">---請選擇---</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="深圳">深圳</option>
</select>
</div>
<div class="item">
<label for="slike" class="item-label">愛好：</label>
上網(wǎng)：<input type="checkbox" name="slike" value="上網(wǎng)"/>
唱歌：<input type="checkbox" name="slike" value="唱歌"/>
編程：<input type="checkbox" name="slike" value="編程"/>
書法：<input type="checkbox" name="slike" value="書法"/><br/>
</div>
<div class="item">
<label for="semail" class="item-label">郵箱:</label>
<input type="text" id="semail" name="semail" class="item-text" placeholder="設(shè)置郵箱"
autocomplete="off" tip="請輸入郵箱">
</div>
<div class="item">
<label for="simage" class="item-label">頭像:</label>
<input type="file" name="simage" class="item-file">
</div>
<div class="item">
<input type="submit" value="提交" class="item-submit">
</div>
</fieldset>
</form>
</body>
</html>
8.2 表單驗(yàn)證js邏輯
接著我們通過js來實(shí)現(xiàn)對(duì)表單元素的校驗(yàn)。在校驗(yàn)之前，我對(duì)jquery validate插件進(jìn)行了功能擴(kuò)展，對(duì)默認(rèn)的選項(xiàng)進(jìn)行了重寫覆蓋。jquery validate插件默認(rèn)只提供了校驗(yàn)正確及錯(cuò)誤時(shí)的提示，缺少我們常見的幫助信息提示。為了解決這個(gè)問題，我研究了插件的源碼，發(fā)現(xiàn)插件本身提供了onfocusin（校驗(yàn)元素獲得焦點(diǎn)時(shí)調(diào)用）和onfocusout（校驗(yàn)元素失去焦點(diǎn)時(shí)調(diào)用）這兩個(gè)函數(shù)。通過修改默認(rèn)參數(shù)的這兩個(gè)接口，可以實(shí)現(xiàn)黨用戶鼠標(biāo)點(diǎn)擊或選擇元素時(shí)（即元素獲得焦點(diǎn)），提示幫助信息；在用戶鼠標(biāo)離開元素時(shí)（即元素失去焦點(diǎn)），移除幫助信息。
此外，jquery validate默認(rèn)提供表單元素輸入時(shí)的實(shí)時(shí)校驗(yàn)，因?yàn)槲覀円笤谳斎霑r(shí)只提示用戶幫助信息，故需要關(guān)閉輸入的實(shí)時(shí)校驗(yàn)，為此我們將默認(rèn)參數(shù)中的onkeyup設(shè)置為null。
具體的擴(kuò)展改進(jìn)代碼我放到了新增js腳本jquery.validate.extend.js中，代碼如下：
/*************************插件新功能-設(shè)置插件validator的默認(rèn)參數(shù)*****************************************/
$.validator.setDefaults({
/*關(guān)閉鍵盤輸入時(shí)的實(shí)時(shí)校驗(yàn)*/
onkeyup: null,
/*添加校驗(yàn)成功后的執(zhí)行函數(shù)--修改提示內(nèi)容，并為正確提示信息添加新的樣式(默認(rèn)是valid)*/
success: function(label){
/*label的默認(rèn)正確樣式為valid，需要通過validClass來重置，否則這里添加的其他樣式不能被清除*/
label.text('').addClass('valid');
},
/*重寫校驗(yàn)元素獲得焦點(diǎn)后的執(zhí)行函數(shù)--增加[1.光標(biāo)移入元素時(shí)的幫助提示,2.校驗(yàn)元素的高亮顯示]兩個(gè)功能點(diǎn)*/
onfocusin: function( element ) {
this.lastActive = element;
/*1.幫助提示功能*/
this.addWrapper(this.errorsFor(element)).hide();
var tip = $(element).attr('tip');
//alert(tip);
if(tip && $(element).parent().children(".tip").length === 0){
$(element).parent().append("<label class='tip'>" + tip + "</label>");
}
/*2.校驗(yàn)元素的高亮顯示*/
$(element).addClass('highlight');
// Hide error label and remove error class on focus if enabled
if ( this.settings.focusCleanup ) {
if ( this.settings.unhighlight ) {
this.settings.unhighlight.call( this, element, this.settings.errorClass, this.settings.validClass );
}
this.hideThese( this.errorsFor( element ) );
}
},
/*重寫校驗(yàn)元素焦點(diǎn)離開時(shí)的執(zhí)行函數(shù)--移除[1.添加的幫助提示,2.校驗(yàn)元素的高亮顯示]*/
onfocusout: function( element ) {
/*1.幫助提示信息移除*/
$(element).parent().children(".tip").remove();
/*2.校驗(yàn)元素高亮樣式移除*/
$(element).removeClass('highlight');
/*3.替換下面注釋的原始代碼，任何時(shí)候光標(biāo)離開元素都觸發(fā)校驗(yàn)功能*/
//this.element( element );
if ( !this.checkable( element ) && ( element.name in this.submitted || !this.optional( element ) ) ) {
this.element( element );
}
}
});
//自定義方法，完成手機(jī)號(hào)碼的驗(yàn)證
//name:自定義方法的名稱，method：函數(shù)體, message:錯(cuò)誤消息
$.validator.addMethod("phone", function(value, element, param){
//方法中又有三個(gè)參數(shù):value:被驗(yàn)證的值， element:當(dāng)前驗(yàn)證的dom對(duì)象，param:參數(shù)(多個(gè)即是數(shù)組)
//alert(value + "," + $(element).val() + "," + param[0] + "," + param[1]);
return new RegExp(/^1[3458]\d{9}$/).test(value);
}, "手機(jī)號(hào)碼不正確");
8.3 表單驗(yàn)證css樣式
最后還要為頁面元素添加css樣式。插件中有一系列默認(rèn)選項(xiàng)：其中默認(rèn)錯(cuò)誤顯示標(biāo)簽為label，錯(cuò)誤樣式為label.error。上面在jquery.validate.extend.js文件中，有一個(gè)success函數(shù)需要說明一下。這個(gè)函數(shù)是在校驗(yàn)成功的時(shí)候執(zhí)行的，我們在函數(shù)中為label提示標(biāo)簽添加了校驗(yàn)正確對(duì)應(yīng)的樣式label.valid。因此在css中如果要美化信息提示，需要對(duì)label相關(guān)樣式如error,valid樣式進(jìn)行設(shè)計(jì)。此外我們在擴(kuò)展插件功能中添加了一個(gè)class為tip的label標(biāo)簽，該標(biāo)簽僅在校驗(yàn)元素獲得焦點(diǎn)時(shí)生成。為此，還需要設(shè)置label的tip樣式。
完整的樣式文件內(nèi)容具體如下：
body{
font-family: Microsoft Yahei;
font-size: 15px;
}
fieldset{ width: 650px; }
legend{
text-align: center;
font-size: 20px;
}
.item{
height: 56px;
line-height: 30px;
margin: 10px;
}
.item .item-label{
float: left;
width: 80px;
text-align: right;
}
.item-text{
float: left;
width: 240px;
height: 30px;
padding: 9px 25px 9px 5px;
margin-left: 10px;
border: 1px solid #ccc;
overflow: hidden;
}
.item-select{
float: left;
height: 30px;
border: 1px solid #ccc;
margin-left: 10px;
font-size: 14px;
padding: 6px 0px;
}
.item-file{
float: left;
height: 30px;
margin-left: 10px;
font-size: 14px;
padding: 6px 0px;
}
.item-submit{
float: left;
height: 30px;
width: 50px;
margin-left: 90px;
font-size: 14px;
}
input.error{
border: 1px solid #E6594E;
}
input.highlight{
border: 1px solid #7abd54;
}
label.error{
float: left;
height: 30px;
line-height: 30px;
font-size: 14px;
text-align: left;
margin-left: 5px;
padding-left: 35px;
color: red;
background: url('../image/error.png') no-repeat left center;
}
label.tip{
float: left;
height: 30px;
line-height: 30px;
font-size: 14px;
text-align: left;
margin-left: 5px;
padding-left: 35px;
color: #aaa;
background: url('../image/tip.png') no-repeat left center;
padding-left: 35px;
}
label.valid{
background: url('../image/valid.png') no-repeat left center;
}
至此，表單驗(yàn)證就做好了，這里就不再展示了，看最前面即可。效果還可以，不過還可以更加完善，我對(duì)jQuery了解的也不太多，希望大家共同進(jìn)步！
源碼下載：驗(yàn)證插件validate
以上就是本文的全部內(nèi)容，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
- jquery validate 實(shí)現(xiàn)動(dòng)態(tài)增加/刪除驗(yàn)證規(guī)則操作示例
- jQuery Validate插件ajax方式驗(yàn)證輸入值的實(shí)例
- jQuery Validate 相關(guān)參數(shù)及常用的自定義驗(yàn)證規(guī)則
- JQuery validate 驗(yàn)證一個(gè)單獨(dú)的表單元素實(shí)例
- 詳解jquery validate實(shí)現(xiàn)表單驗(yàn)證 （正則表達(dá)式）
- jquery表單驗(yàn)證插件（jquery.validate.js）的3種使用方式
- jQuery validate(submitHandler函數(shù))驗(yàn)證通過發(fā)送Ajax(實(shí)例詳解)
相關(guān)文章
為jquery.ui.dialog 增加“自動(dòng)記住關(guān)閉時(shí)的位置”的功能
筆者在項(xiàng)目中使用 jquery.ui.dialog 1.7.2時(shí)，當(dāng)使用$("#d").dialog("open");時(shí)，dialog總是彈出在option中指定的位置；2009-11-11
jQuery實(shí)現(xiàn)文件上傳進(jìn)度條特效
帶進(jìn)度條的文件上傳特效，每個(gè)文件都有進(jìn)度條，都有上傳詳情介紹。效果非常不錯(cuò)，這里推薦給大家。2015-08-08
jquery.validate使用攻略 第五步 正則驗(yàn)證
一些常用的驗(yàn)證腳本2010-07-07
這篇文章與大家分享的是10款非常棒的 jQuery 幻燈片插件，使用這些插件可以幫助你在網(wǎng)站中加入非常吸引人的幻燈片效果，另外這些插件還有制作教程。2011-06-06
jQuery實(shí)現(xiàn)Tab菜單滾動(dòng)切換的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)Tab菜單滾動(dòng)切換的方法,實(shí)例分析了jQuery通過鼠標(biāo)事件動(dòng)態(tài)操作頁面元素切換的動(dòng)畫效果實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
jQuery html() in Firefox (uses .innerHTML) ignores DOM chang
Firefox doesn't update the value attribute of a DOM object based on user input, just its valueproperty - pretty quick work around exists.2010-03-03
jquery實(shí)現(xiàn)簡單的拖拽效果實(shí)例兼容所有主流瀏覽器
拖拽效果個(gè)人覺得是一種不錯(cuò)的用戶體驗(yàn)，抽空研究了一下，原理還蠻簡單的，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈2013-06-06
這是一個(gè)加了點(diǎn)淡入淡出效果的頂部tooltip控件，會(huì)自動(dòng)消失,小功能大家參考使用吧2013-12-12
jquery DIV撐大怎么讓滾動(dòng)條滾到最底部，類似問題想必大家都有遇到過吧，下面與大家分享下具體的處理代碼，感興趣的朋友可以了解下哈2013-06-06
Jquery uploadify 多余的Get請求(404錯(cuò)誤)的解決方法
下面小編就為大家?guī)硪黄狫query uploadify 多余的Get請求(404錯(cuò)誤)的解決方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-01-01