1. 寫在前面
我們知道，用戶在注冊的時候，會有個表單頁面，然后有些選項是必填的，有些要填的內容是有規范的，這些都要在用戶提交之前進行驗證才行，如果不符合要求，需要在右邊顯示一個友好的提示，讓用戶修改。
記得以前在學習Servlet的時候，實現一個簡單的用戶注冊功能的驗證是在后臺做的，有些用了正則表達式，有些沒用，但是都比較簡單。流程是這樣的，前臺提交表單數據后，servlet獲取數據先進行驗證，如果不符合要求，將提示信息放到一個List中，然后再把List存到session中，跳轉到一個新的頁面做回顯，把錯誤信息也顯示出來，但是比較繁瑣。
前面做網上商城項目的時候，用EasyUI做后臺商品添加時，也做了驗證的功能，EasyUI自帶了驗證的功能，還是很強大的，效果也不錯。感興趣的話不妨來看一下這篇文章。
但是前臺用戶注冊的頁面我們該如何做呢？這就是本文所要介紹的主要內容了，我們可以使用jQuery的Validate插件來做注冊的驗證功能，jQuery我也沒有系統的學習，只是用到什么學什么，用到什么了解什么，所以如有錯誤之處，歡迎留言指正~下面我一步步通過代碼詳細介紹一下jQuery-Validate驗證插件的使用步驟。
2. 效果展示
首先來看一下最后實現的效果，先有個直觀的感受，個人感覺還算可以的~能接受。
從圖中可以看出，包括輸入前的提示，輸入正確和錯誤的提示的功能，都已經完成。再看一下我的工程：
總共有6個jsp文件，之所以寫成6個是為了一步步解說做這個效果的步驟，最后terminal.jsp是最終版的。運行的時候也只需要運行這個terminal.jsp即可。 下面我詳細分析一下使用jQurey-Validate驗證插件的過程。
3. Validate環境的搭建
環境搭建，肯定少不了jar包，我使用的是jQuery-validate-1.15，官方上給出了依賴的幾個版本的jQuery，我下了jQuery-1.11.1。所以將這兩個js文件放到工程中WebRoot/js中，并在jsp頁面中導入即可。
demo1.jsp很簡單，為了搭建環境而已，如果點擊提交，不會跳轉到指定頁面表示環境搭建成功。
4. Validate基本方法的使用
好了，環境搭建成功了，接下來我們開始使用Validate的基本方法了，這里還要導入一個js文件：additional-methods.js，新版本的jQuery-validate-1.15中沒有對文件后綴的驗證，后來我在官網上查了一下，官網上說放到additional-methods.js中了，所以我去下了個，放到工程中了，而且方法名也和老版本不太一樣，下面再說。看一下demo2.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驗證</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(){ //讓當前表單調用validate方法，實現表單驗證功能 $("#ff").validate({ debug:true, //調試模式，即使驗證成功也不會跳轉到目標頁面 rules:{ //配置驗證規則，key就是被驗證的dom對象，value就是調用驗證的方法(也是json格式) sname:{ required:true, //必填。如果驗證方法不需要參數，則配置為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行有缺省的驗證配置</li> <li>jquery.validate.js中354行有驗證方法出錯的消息，即告訴我們都有哪些驗證方法</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/> 確認密碼：<input type="password" name="spass2" /><br/> 愛好： 上網：<input type="checkbox" name="slike" value="上網"/> 唱歌：<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中對其進行了驗證，validate中定義了一些缺省的驗證，required表示必填字段，rangelength表示長度范圍，用數組表示范圍邊界，equalTo后面跟一個id，表示跟后面跟的id的元素內容相同，這里說一下extension，表示后綴，以前版本叫accept，新版本中改為extension了，網上的搜索的關于后綴的驗證都是accept，新版沒了，而且extension就是在新加的additional-methods.js中。我們看一下這個版本的效果：
有點丑……因為還沒做css， 但是我直接點擊提交，會出現一些驗證信息了，這些都是默認的信息，是源碼中提供的，說明一點，驗證功能生效了，我們下面就改寫一下后面顯示的信息，這些默認的顯然不太友好。
5. 實現錯誤消息的本地化
我們可以指定messages消息的顯示內容，也是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驗證</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(){ //讓當前表單調用validate方法，實現表單驗證功能 $("#ff").validate({ debug:true, //調試模式，即使驗證成功也不會跳轉到目標頁面 rules:{ //配置驗證規則，key就是被驗證的dom對象，value就是調用驗證的方法(也是json格式) sname:{ required:true, //必填。如果驗證方法不需要參數，則配置為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:"請再次輸入密碼", equalTo:"兩次密碼必須一致" //表示和id="spass"的值相同 }, saddress:{ required:"請選擇地址" }, semail:{ required:"請填寫郵件", email:"郵箱格式不正確" }, simage:{ required:"請選擇要上傳的頭像", extension:"文件后綴名必須為jpg,jpeg,gif,png" } } }); }); </script> </head> <body> <!-- body中的內容不變，省略不寫了 --> </body></html> 相當于覆寫了原來默認的消息提示，來看下效果：
這就有點感覺了。繼續往下完善。
6. 實現遠程驗證
所謂遠程驗證，指的是當用戶注冊時輸入用戶名時，系統得從數據庫中查詢是否已經有該用戶名了，如果有則告訴用戶已經有人注冊過了該名字了，但是我們不用去查數據庫，我們寫個Action模擬下即可，主要是實現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驗證</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(){ //讓當前表單調用validate方法，實現表單驗證功能 $("#ff").validate({ debug:true, //調試模式，即使驗證成功也不會跳轉到目標頁面 onkeyup:null, //當丟失焦點時才觸發驗證請求 rules:{ //配置驗證規則，key就是被驗證的dom對象，value就是調用驗證的方法(也是json格式) sname:{ required:true, //必填。如果驗證方法不需要參數，則配置為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:"請再次輸入密碼", equalTo:"兩次密碼必須一致" //表示和id="spass"的值相同 }, saddress:{ required:"請選擇地址" }, semail:{ required:"請填寫郵件", email:"郵箱格式不正確" }, simage:{ required:"請選擇要上傳的頭像", extension:"文件后綴名必須為jpg,jpeg,gif,png" } } }); }); </script> </head> <body> <!-- body中的內容不變，省略不寫了 --> </body></html> 我們看到，在sname里面新加了個remote方法，這個是用來遠程驗證的，參數url是要發送的請求Action，所以我們后臺寫個AjaxAction，在AjaxAction中寫過check方法來，判斷用戶名是否為admin，如果是，則以流的形式返回false，前臺接收到false就會驗證失敗，返回true則驗證成功。失敗了則告訴用戶該用戶名已存在，后臺Action這里就不寫了，見我上傳的源碼即可。我們來看下效果：
7. 自定義驗證方法
我們也可以自定義驗證的方法，比如手機號，我們可以自己定義驗證方法，自己定義的方法最好寫在擴展js中，我們自己寫一個jquery.validate.extend.js放到js文件夾中，在該文件中寫上：
//自定義方法，完成手機號碼的驗證//name:自定義方法的名稱，method：函數體, message:錯誤消息$.validator.addMethod("phone", function(value, element, param){ //方法中又有三個參數:value:被驗證的值， element:當前驗證的dom對象，param:參數(多個即是數組) //alert(value + "," + $(element).val() + "," + param[0] + "," + param[1]); return new RegExp(/^1[3458]/d{9}$/).test(value);}, "手機號碼不正確");addMethod表示新加的方法，第一個參數是方法名，第二個參數是函數體，第三個參數表示驗證錯誤消息。其中函數體中，又有三個參數，value表示驗證的值，element表示當前dom對象，param表示參數。我們使用正則表達式驗證了手機號。這里就不測試了。最后我們來看一下終極的表單驗證，終極驗證表單需要加上CSS了，下面是完整的終極驗證代碼。
8. 驗證表單完整版
8.1 Html表單
為了讓表單結構簡單而清晰，我們將表單的每個元素都包裹在一個div結構中：用label標簽用來標記元素的名稱，接著便是表單元素本身。【注明：1.使用label標簽的好處是為鼠標用戶改進了可用性。當在label元素內點擊文本時，瀏覽器就會自動將焦點轉到和label相關的表單控件上。2.每個需要校驗的表單元素都應該設置id和name屬性，方便在使用插件時將元素綁定校驗規則和校驗信息。】
表單實現代碼如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>jquery validate驗證</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(){ //讓當前表單調用validate方法，實現表單驗證功能 $("#ff").validate({ debug:true, //調試模式，即使驗證成功也不會跳轉到目標頁面 rules:{ //配置驗證規則，key就是被驗證的dom對象，value就是調用驗證的方法(也是json格式) sname:{ required:true, //必填。如果驗證方法不需要參數，則配置為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}個字符"), remote:"該用戶名已存在！" }, spass:{ required:"請輸入密碼", rangelength:$.validator.format("密碼長度為{0}-{1}個字符") }, spass2:{ required:"請再次輸入密碼", equalTo:"兩次密碼必須一致" //表示和id="spass"的值相同 }, sphone:{ required:"請輸入手機號" }, saddress:{ required:"請選擇地址" }, slike:{ required:"請選擇愛好", }, semail:{ required:"請填寫郵件", 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表單校驗驗證</legend> <div class="item"> <label for="username" class="item-label">用戶名:</label> <input type="text" id="username" name="sname" class="item-text" placeholder="設置用戶名" 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="設置密碼" tip="長度為6-16個字符"> </div> <div class="item"> <label for="password" class="item-label">確認密碼:</label> <input type="password" name="spass2" class="item-text" placeholder="設置確認密碼"> </div> <div class="item"> <label for="phone" class="item-label">手機號碼:</label> <input type="text" id="phone" name="sphone" class="item-text" placeholder="輸入手機號碼" tip="請輸入手機號碼"> </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> 上網：<input type="checkbox" name="slike" value="上網"/> 唱歌：<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="設置郵箱" 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 表單驗證js邏輯
接著我們通過js來實現對表單元素的校驗。在校驗之前，我對jquery validate插件進行了功能擴展，對默認的選項進行了重寫覆蓋。jquery validate插件默認只提供了校驗正確及錯誤時的提示，缺少我們常見的幫助信息提示。為了解決這個問題，我研究了插件的源碼，發現插件本身提供了onfocusin（校驗元素獲得焦點時調用）和onfocusout（校驗元素失去焦點時調用）這兩個函數。通過修改默認參數的這兩個接口，可以實現黨用戶鼠標點擊或選擇元素時（即元素獲得焦點），提示幫助信息；在用戶鼠標離開元素時（即元素失去焦點），移除幫助信息。
此外，jquery validate默認提供表單元素輸入時的實時校驗，因為我們要求在輸入時只提示用戶幫助信息，故需要關閉輸入的實時校驗，為此我們將默認參數中的onkeyup設置為null。
具體的擴展改進代碼我放到了新增js腳本jquery.validate.extend.js中，代碼如下：
/*************************插件新功能-設置插件validator的默認參數*****************************************/$.validator.setDefaults({ /*關閉鍵盤輸入時的實時校驗*/ onkeyup: null, /*添加校驗成功后的執行函數--修改提示內容，并為正確提示信息添加新的樣式(默認是valid)*/ success: function(label){ /*label的默認正確樣式為valid，需要通過validClass來重置，否則這里添加的其他樣式不能被清除*/ label.text('').addClass('valid'); }, /*重寫校驗元素獲得焦點后的執行函數--增加[1.光標移入元素時的幫助提示,2.校驗元素的高亮顯示]兩個功能點*/ 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.校驗元素的高亮顯示*/ $(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 ) ); } }, /*重寫校驗元素焦點離開時的執行函數--移除[1.添加的幫助提示,2.校驗元素的高亮顯示]*/ onfocusout: function( element ) { /*1.幫助提示信息移除*/ $(element).parent().children(".tip").remove(); /*2.校驗元素高亮樣式移除*/ $(element).removeClass('highlight'); /*3.替換下面注釋的原始代碼，任何時候光標離開元素都觸發校驗功能*/ //this.element( element ); if ( !this.checkable( element ) && ( element.name in this.submitted || !this.optional( element ) ) ) { this.element( element ); } }});//自定義方法，完成手機號碼的驗證//name:自定義方法的名稱，method：函數體, message:錯誤消息$.validator.addMethod("phone", function(value, element, param){ //方法中又有三個參數:value:被驗證的值， element:當前驗證的dom對象，param:參數(多個即是數組) //alert(value + "," + $(element).val() + "," + param[0] + "," + param[1]); return new RegExp(/^1[3458]/d{9}$/).test(value);}, "手機號碼不正確");8.3 表單驗證css樣式
最后還要為頁面元素添加css樣式。插件中有一系列默認選項：其中默認錯誤顯示標簽為label，錯誤樣式為label.error。上面在jquery.validate.extend.js文件中，有一個success函數需要說明一下。這個函數是在校驗成功的時候執行的，我們在函數中為label提示標簽添加了校驗正確對應的樣式label.valid。因此在css中如果要美化信息提示，需要對label相關樣式如error,valid樣式進行設計。此外我們在擴展插件功能中添加了一個class為tip的label標簽，該標簽僅在校驗元素獲得焦點時生成。為此，還需要設置label的tip樣式。
完整的樣式文件內容具體如下：
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;}至此，表單驗證就做好了，這里就不再展示了，看最前面即可。效果還可以，不過還可以更加完善，我對jQuery了解的也不太多，希望大家共同進步！
源碼下載：驗證插件validate
原文地址：http://blog.csdn.net/eson_15/article/details/51497533
以上就是本文的全部內容，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
