jQuery學習-表單驗證功能
阿新 • • 發佈:2019-01-02
已經完成了一個簡陋的圖書館管理系統,之所以說是簡陋,是因為不具備任何容錯功能,下一階段是通過學習jQuery來對系統進行完善。
任務一:完成後臺登入頁面的表單驗證功能。
需求:1、對於使用者名稱和密碼的空白輸入情況,要阻止其對後臺伺服器發起的連線。
功能分析:1、選擇兩個標籤input,並獲取其輸入的內容,然後進行一個驗證就可以了。
選擇標籤用$(‘標籤選擇器'),獲得值用。
- text() - 設定或返回所選元素的文字內容
- html() - 設定或返回所選元素的內容(包括 HTML 標記)
- val() - 設定或返回表單欄位的值
或者採用回撥函式形式,這個時候帶有兩個引數:被選元素列表中當前元素的下標、以及原始(舊的)值。然後以函式新值返回您希望使用的字串。
text只能改變文字元素。
html可以改變整個元素節點(包括文字元素和標籤元素)
val只能操作input裡的值
text 與html的區別具體體現在,text會忽略掉所有對文字起修飾作用的標籤,而只關注文字,而html會保留標籤。
比如<p>這是<em>加粗</em>的文字</p>。用text獲取p的原文字就只有這是加粗的文字了。
所以,我們可以通過val()的回撥函式來獲得input輸入的值。
然後將這個方法新增到提交表單的事件上去,然後通過呼叫方法來阻止提交。
可以新增到login.php裡去了,親測可用。$(document).ready(function(){ $('form').submit(function(e){ //呼叫submit方法,就是在提交時進行操作 $('input').val(function(i,value){ //直接獲取了所有input的值,使用者名稱和密碼,會檢驗兩次。 if(value ==''){ alert('使用者名稱與密碼不能為空!'); e.preventDefault(); //呼叫了preventDefault函式來阻止提交表單 } }); }); });