1. 程式人生 > >jQuery學習-表單驗證功能

jQuery學習-表單驗證功能

已經完成了一個簡陋的圖書館管理系統,之所以說是簡陋,是因為不具備任何容錯功能,下一階段是通過學習jQuery來對系統進行完善。

任務一:完成後臺登入頁面的表單驗證功能。

需求:1、對於使用者名稱和密碼的空白輸入情況,要阻止其對後臺伺服器發起的連線。

功能分析:1、選擇兩個標籤input,並獲取其輸入的內容,然後進行一個驗證就可以了。

選擇標籤用$(‘標籤選擇器'),獲得值用。

  • text() - 設定或返回所選元素的文字內容
  • html() - 設定或返回所選元素的內容(包括 HTML 標記)
  • val() - 設定或返回表單欄位的值
括號裡的引數放的是想要修改成為的值。

或者採用回撥函式形式,這個時候帶有兩個引數:被選元素列表中當前元素的下標、以及原始(舊的)值。然後以函式新值返回您希望使用的字串。

text只能改變文字元素。

html可以改變整個元素節點(包括文字元素和標籤元素)

val只能操作input裡的值

text 與html的區別具體體現在,text會忽略掉所有對文字起修飾作用的標籤,而只關注文字,而html會保留標籤。

比如<p>這是<em>加粗</em>的文字</p>。用text獲取p的原文字就只有這是加粗的文字了。

所以,我們可以通過val()的回撥函式來獲得input輸入的值。

然後將這個方法新增到提交表單的事件上去,然後通過呼叫方法來阻止提交。

$(document).ready(function(){
        $('form').submit(function(e){ //呼叫submit方法,就是在提交時進行操作
	$('input').val(function(i,value){ //直接獲取了所有input的值,使用者名稱和密碼,會檢驗兩次。
		if(value ==''){
			alert('使用者名稱與密碼不能為空!');
			e.preventDefault();  //呼叫了preventDefault函式來阻止提交表單
		       }
		});
	});
});
可以新增到login.php裡去了,親測可用。