——選自《鋒利的jQuery》(第2版)第5章的例題
5.1.5 表單驗證
表單(form)作為 HTML 最重要的一個組成部分,幾乎在每個網頁上都有體現,例如用戶提交信息、用戶反饋信息和用戶查詢信息等,因此它是網站管理者與瀏覽者之間溝通的橋梁。在表單中,表單驗證的作用也是非常重要的,它能使表單更加靈活、美觀和豐富。
以一個簡單的用戶注冊為例。首先新建一個表單, HTML 代碼如下:
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>jQueryStudy</title> <style> .int{ height: 30px; text-align: left; width: 600px; } label{ width: 200px; margin-left: 20px; } .high{ color: red; } .msg{ font-size: 13px; } .onError{ color: red; } .onSuccess{ color: green; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <form method="post" action="#"> <div class="int"> <label for="name">姓名:</label> <input type="text" id="name" class="required" /> </div> <div class="int"> <label for="email">郵箱:</label> <input type="text" id="email" class="required" /> </div> <div class="int"> <label for="address">住址:</label> <input type="text" id="address" /> </div> <div class="int"> <input type="submit" value="提交" id="send" style="margin-left: 70px;" /> <input type="reset" value="重置" id="res" /> </div> </form> </body> </html>
顯示效果如圖 1 所示:
圖 1 表單初始化
在表單內 class 屬性為 “required” 的文本框是必須填寫的,因此需要將它與其他的非必須填寫的表單元素加以區別,即在文本框后面追加一個紅色的星號標識。可以使用 append() 方法來完成,代碼如下:
//為表單的必填文本框添加提示信息(選擇form中的所有后代input元素) $("form :input.required").each(function () { //通過jquery api:$("HTML字符串") 創建jquery對象 var $required = $("<strong class='high'>*</strong>"); //添加到this對象的父級對象下 $(this).parent().append($required); });
顯示效果如圖 2 所示:
圖 2 在必填元素后添加小紅星標記
用戶在“姓名”文本框中填寫完信息后,將光標的焦點從“姓名”文本框中移出時,需要即時判斷姓名是否符合驗證規則。當光標的焦點從“郵箱”文本框移出時,也需要即時判斷“郵箱”填寫是否正確,因此需要給表單元素添加失去焦點事件,即 blur 事件。 jQuery 代碼如下:
//為表單的元素添加失去焦點事件 $("form :input").blur(function () { // ...省略代碼 });
給表單里的必填元素添加驗證功能的步驟如下:
(1)判斷當前失去焦點的元素是“姓名”還是“郵箱”,然后分別處理。
(2)如果是“姓名”,判斷元素的值的長度是否小於 6 ,如果小於 6 ,則用紅色字體提醒用戶輸入不正確,反之,則用綠色提醒用戶輸入正確。
(3)如果是“郵箱”,判斷元素的值是否符合郵箱的格式,如果不符合,則用紅色字體提醒用戶輸入不正確,反之,則用綠色字體提醒用戶輸入正確。
(4)將提醒信息追加到當前元素的父元素下面。
【注】:為了使用方便,當 text 文本框中的內容格式錯誤時,程序應盡量把所有提示信息都顯示出來,而不是每次驗證一種格式后只顯示一個提示信息。 不過有時為了提高響應性,也會每次只顯示一個提示信息。如:檢查用戶名是否重復,需要訪問數據庫。
如何提示,需要依據具體的業務需求來確定。
根據以上分析,可以寫出如下 jQuery 代碼:
//為表單的必填文本框添加提示信息(選擇form中的所有后代input元素) $("form :input.required").each(function () { //通過jquery api:$("HTML字符串") 創建jquery對象 var $required = $("<strong class='high'>*</strong>"); //添加到this對象的父級對象下 $(this).parent().append($required); }); //為表單元素添加失去焦點事件 $("form :input").blur(function(){ var $parent = $(this).parent(); //驗證姓名 if($(this).is("#name")){ var nameVal = $.trim(this.value); //原生js去空格方式:this.replace(/(^\s*)|(\s*$)/g, "") var regName = /[~#^$@%&!*()<>:;'"{}【】 ]/; if(nameVal == "" || nameVal.length < 6 || regName.test(nameVal)){ var errorMsg = " 姓名非空,長度6位以上,不包含特殊字符!"; //class='msg onError' 中間的空格是層疊樣式的格式 $parent.append("<span class='msg onError'>" + errorMsg + "</span>"); } else{ var okMsg=" 輸入正確"; $parent.find(".high").remove(); $parent.append("<span class='msg onSuccess'>" + okMsg + "</span>"); } } //驗證郵箱 if($(this).is("#email")){ var emailVal = $.trim(this.value); var regEmail = /.+@.+\.[a-zA-Z]{2,4}$/; if(emailVal== "" || (emailVal != "" && !regEmail.test(emailVal))){ var errorMsg = " 請輸入正確的E-Mail住址!"; $parent.append("<span class='msg onError'>" + errorMsg + "</span>"); } else{ var okMsg=" 輸入正確"; $parent.find(".high").remove(); $parent.append("<span class='msg onSuccess'>" + okMsg + "</span>"); } } });
當連續幾次輸入錯誤的格式后,會出現如圖 3 所示的效果
圖 3 操作多次的提示效果
由於每次在元素失去焦點后,都會創建一個新的提醒元素,然后將它追加到文檔中,最后就出現了多次的提醒信息。因此,需要在創建提醒元素之前,將當前元素以前的提醒元素都刪除。可以使用 remove() 方法來完成,代碼如下:
//為表單元素添加失去焦點事件 $("form :input").blur(function(){ var $parent = $(this).parent(); $parent.find(".msg").remove(); //刪除以前的提醒元素(find():查找匹配元素集中元素的所有匹配元素) // ...省略代碼 });
顯示效果如圖 4 所示。
圖 4 正確的效果
當鼠標在表單元素中多次失去焦點時,都可以提醒用戶填寫是否正確。但是,如果用戶無視錯誤提醒,執意要單擊“提交”按鈕時,為了使表單填寫准確,在表單提交之前,需要對表單的必須填寫元素進行一次整體的驗證。可以直接用 trigger() 方法來觸發blur事件,從而達到驗證效果。如果填寫錯誤,就會以紅色提醒用戶;如果姓名和郵箱都不符合規則,那么就有兩處錯誤,即有兩個 class 為 “onError” 的元素,因此可以根據 class 為 “onError” 元素的長度來判斷是否可以提交。如果長度為 0 ,即 true ,說明已經可以提交了;如果長度大於0,即 false ,說明有錯誤,需要阻止表單提交。阻止表單提交可以直接用 “return false” 語句。
根據上面的分析,可以在提交事件中寫出如下jQuery代碼:
//點擊重置按鈕時,通過trigger()來觸發文本框的失去焦點事件 $("#send").click(function(){ //trigger 事件執行完后,瀏覽器會為submit按鈕獲得焦點 $("form .required:input").trigger("blur"); var numError = $("form .onError").length; if(numError){ return false; } alert("注冊成功!"); });
顯示效果如圖 5 所示。
圖 5 驗證通過
用戶也許會提出:為什么每次都要等字段元素失去焦點后,才提醒是否正確?如果輸入時就可以提醒,這樣就可以更加即時了。
為了達到用戶提出的需求,需要給表單元素綁定 keyup 事件和 focus 事件,keyup 事件能在用戶每次松開按鍵時觸發,實現即時提醒;focus 事件能在元素得到焦點的時候觸發,也可以實現即時提醒。
代碼如下:
$("form :input").blur(function(){ //失去焦點處理函數 //代碼省略... }).keyup(function(){ //triggerHandler 防止事件執行完后,瀏覽器自動為標簽獲得焦點 $(this).triggerHandler("blur"); }).focus(function(){ $(this).triggerHandler("blur"); });
這樣當用戶將光標定位到文本框上和改變文本框的值時,表單就會即時提醒用戶填寫是否正確,從而符合了用戶的需求。
在前面的章節已經提過,trigger(“blur”)不僅會觸發為元素綁定的blur事件,也會觸發瀏覽器默認的 blur 事件,即不能講光標定位到文本框上。而 triggerHandler(“blur”)只會觸發為元素綁定的 blur 事件,而不觸發瀏覽器默認的 blur 事件。
至此,表單驗證過程就全部完成。讀者可以根據自己的實際需求修改驗證規則。
【注】:客戶端的驗證僅用於提升用戶的操作體驗,而服務器仍需對用戶輸入的數據的合法性進行校驗。對於禁用了腳本的用戶和用戶自制的網頁提交操作,必須在服務器端驗證。
完整代碼:
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>jQueryStudy</title> <style> .int{ height: 30px; text-align: left; width: 600px; } label{ width: 200px; margin-left: 20px; } .high{ color: red; } .msg{ font-size: 13px; } .onError{ color: red; } .onSuccess{ color: green; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <form method="post" action="#"> <div class="int"> <label for="name">姓名:</label> <input type="text" id="name" class="required" /> </div> <div class="int"> <label for="email">郵箱:</label> <input type="text" id="email" class="required" /> </div> <div class="int"> <label for="address">住址:</label> <input type="text" id="address" /> </div> <div class="int"> <input type="submit" value="提交" id="send" style="margin-left: 70px;" /> <input type="reset" value="重置" id="res" /> </div> </form> <script> //為表單的必填文本框添加提示信息(選擇form中的所有后代input元素) $("form :input.required").each(function () { //通過jquery api:$("HTML字符串") 創建jquery對象 var $required = $("<strong class='high'>*</strong>"); //添加到this對象的父級對象下 $(this).parent().append($required); }); //為表單元素添加失去焦點事件 $("form :input").blur(function(){ var $parent = $(this).parent(); $parent.find(".msg").remove(); //刪除以前的提醒元素(find():查找匹配元素集中元素的所有匹配元素) //驗證姓名 if($(this).is("#name")){ var nameVal = $.trim(this.value); //原生js去空格方式:this.replace(/(^\s*)|(\s*$)/g, "") var regName = /[~#^$@%&!*()<>:;'"{}【】 ]/; if(nameVal == "" || nameVal.length < 6 || regName.test(nameVal)){ var errorMsg = " 姓名非空,長度6位以上,不包含特殊字符!"; //class='msg onError' 中間的空格是層疊樣式的格式 $parent.append("<span class='msg onError'>" + errorMsg + "</span>"); } else{ var okMsg=" 輸入正確"; $parent.find(".high").remove(); $parent.append("<span class='msg onSuccess'>" + okMsg + "</span>"); } } //驗證郵箱 if($(this).is("#email")){ var emailVal = $.trim(this.value); var regEmail = /.+@.+\.[a-zA-Z]{2,4}$/; if(emailVal== "" || (emailVal != "" && !regEmail.test(emailVal))){ var errorMsg = " 請輸入正確的E-Mail住址!"; $parent.append("<span class='msg onError'>" + errorMsg + "</span>"); } else{ var okMsg=" 輸入正確"; $parent.find(".high").remove(); $parent.append("<span class='msg onSuccess'>" + okMsg + "</span>"); } } }).keyup(function(){ //triggerHandler 防止事件執行完后,瀏覽器自動為標簽獲得焦點 $(this).triggerHandler("blur"); }).focus(function(){ $(this).triggerHandler("blur"); }); //點擊重置按鈕時,通過trigger()來觸發文本框的失去焦點事件 $("#send").click(function(){ //trigger 事件執行完后,瀏覽器會為submit按鈕獲得焦點 $("form .required:input").trigger("blur"); var numError = $("form .onError").length; if(numError){ return false; } alert("注冊成功!"); }); </script> </body> </html>
更多資源:
jQuery 官方 API 地址: http://api.jquery.com/
在線引用 jQuery:http://code.jquery.com/