用jquery實現簡單的表單驗證效果

2021-06-28 03:55:48 字數 2221 閱讀 6205

看了《鋒利的jquery》一書，練習了下期中的乙個用jquery寫表單驗證的例子。

效果如圖：

總結：

這是個比較簡單的表單驗證，主要驗證了表單中的使用者名稱和郵箱兩個必填選項。表單驗證其實質是個不斷往下過濾的過程。

主要思路：

（1）判斷當前失去焦點的元素是「使用者名稱」還是「郵箱」，然後分別處理。

（2）如果是「使用者名稱」，判斷元素的值的長度是否為空或小於6，如果是，則用紅色提醒使用者輸入不正確，反之，則用綠色提醒使用者輸入正確

（3）如果是「郵箱」，判斷元素的值是否為空且是否符合郵箱的格式，如果不符合，則用紅色提醒使用者輸入不正確，反之，則用綠色提醒使用者輸入正確。

（4）將提醒資訊追加到當前元素的父元素的最後

再來具體分析下**實現:

1。表單中必填欄位後都有個紅色的*號。這裡用到jquery的each()方法對表單中的元素進行遍歷。**如下

// 如果是必填的，則增加紅星標識


$("form :input.required").each(function() );
2.當使用者在「使用者名稱」和「郵箱」文字框中填寫完資訊後，將游標的焦點從中移出時，需要即時判斷「使用者名稱」或「郵箱」是否輸入正確，因此需要給表單元素新增失去焦點事件，即blur。**如下：

$('form :input').blur(function(event) ）
3.需要注意的是，由於每次在元素失去焦點後，都會建立乙個新的提醒元素，然後將它追加到文件中，最後就出現了多次的提醒資訊。因此，在建立新的提醒元素之前，將當前提醒元素之前的提醒元素都刪除，可以使用remove()的方法來實現，**如下：

$('form :input').blur(function(event) ）
4.如果使用者無視錯誤提醒，執意要提交，為了使表單填寫準確，在表單提交之前，需要對表單的必填元素進行一次整體性的驗證，可以直接用trigger()方法來觸發blur事件，從而達到驗證效果。如果填寫錯誤，就以紅色提醒使用者；如果使用者名稱和郵箱都不符合規則，那就有2處錯誤，既有兩個class為"onerror"的元素，因此可根據class為「onerror」元素額長度來判斷是否可以提交、如果長度為0，即true，說明已經可以提交;如果長度大於0，即false，說明有錯誤，需要阻止表單提交。阻止表單提交可以直接用"return false"語句。**如下：

//提交，最終驗證


$('#send').click(function(event) 


alert("註冊成功，密碼已發到你的郵箱，請查收.")


})；
5.額外增加的功能，即不需等元素失去焦點時，輸入時就可以提醒使用者。為此給表單繫結了keyup和focus事件，keyup事件能在每次使用者鬆開按鍵時觸發，實現即時提醒；focus事件能在元素得到焦點的時候觸發，也可以實現即時提醒**如下：

$('form :input').blur(function(event) ）.keyup(funciton()).focus(funciton())
這樣當使用者將游標定位到文字框上和改變文字框的值時，表單就會即時提醒使用者填寫是否正確。

這裡要注意的是，trigger('blur')不僅會觸發位元素繫結的blur事件，也會觸發瀏覽器預設的blur事件，即不能講游標定位到文字框上。而triggerhandler('blur')只會觸發為元素繫結的blur事件，而不觸發瀏覽器預設的blur事件。

留待解決的問題：

1.這裡郵箱驗證用了正規表示式

this.value!="" && !/.+@.+\.[a-za-z]$/.test(this.value)
是否還有更嚴謹細緻的寫法有待研究

2.客戶端的驗證僅用於提公升使用者操作體驗，而伺服器端仍需對使用者輸入的資料的合法性進行校驗，對於禁用了指令碼的使用者和使用者自製的網頁提交操作，必須在伺服器端驗證。

jquery用ajax提交表單

jquery ajax三種方式非同步提交表單 一 使用html5 formdata物件的方式ajax非同步提交資料和檔案 注意 jquery ajax的必須傳引數processdata false，contenttype false，否則會報錯 script ajax form text name ...

jquery實現智慧型表單

現在很多 的註冊模組都可以實現即時檢查格式是否正確，這樣極大的增強了使用者體驗，對開發非常有利。下面的 是利用jquery實現了對乙個表單字段格式的即時檢查 包括字段長度 郵箱格式 同時在提交時，再次出發檢查事件。注意這個檢查是keyup和focus上為主，利用這兩個事件來觸發blur 失去焦點 事...

Struts的ActionForm表單驗證

1.在actionform中新增 public if password null password equals returnerrors 2.在 jsp中新增 使用者名稱td td logic present name loginformbean html text property userna...