使用 JQUERY 的 用戶認證和注冊技術
如果您對 jQuery 不是很熟悉，它本質上是一個 JavaScript 庫，使 JavaScript 開發變得很容易。它使所需的代碼量最小化，因為它有許多內置功能，這樣您就不再需要為這些功能編寫客戶端函數或對象了。更多信息和下載 jQuery 庫的鏈接，見 參考資料；或者，如您在所有代碼樣例中看到的那樣，可以直接嵌入 jQuery 庫的當前版本。
使用 JQUERY 進行表單提交
無需重載即可提交一個表單在很多場景中都是很有用的。 例如，有了它，您就可以在提交表單之前使用 JavaScript 代碼驗證表單字段，來在一個單頁面應用程序中提交表單或者 — 如本文所示— 確定是否用戶名已經注冊過。使用 jQuery 觸發一個表單提交有兩種方法：使用 submit 處理函數或 click 處理函數。清單 1 顯示了如何使用 submit 處理函數提交一個表單。
清單 1. 使用 jQuery 的 submit 處理函數提交表單
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#submitForm').submit(function(e) {
alert($('#sample').attr('value'));
return e.preventDefault();
});
});
</script>
<form id="submitForm" method="post">
<input type="text" name="sample" id="sample" value="Enter something" />
<input type="submit" id="submitBtn" value="Submit" />
</form>
清單 2 展示如何使用 click 處理函數提交表單。
清單 2. 使用 jQuery 的 click 處理函數提交表單
<script type="text/javascript"
src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#submitBtn').click(function(e) {
alert($('#sample').attr('value'));
return e.preventDefault();
});
});
</script>
<form id="submitForm" method="post">
<input type="text" name="sample" id="sample" value="Enter something" />
<input type="submit" id="submitBtn" value="Submit" />
</form>
這兩個清單基本上是一樣的：它們都是嵌入 jQuery 庫的，在訪問任何元素之前使用 ready 處理函數確認頁面被加載，處理函數包括相同的代碼。惟一的不同是處理函數和分配給處理函數的元素。submit 處理函數需要分配一個表單元素，而 click 處理函數，任何可點擊的元素即可 — 本例中是 Submit 按鈕。為了避免提交表單時刷新頁面，您必須使用preventDefault 函數。要訪問 preventDefault 函數，您必須傳遞處理函數（即使作為一個參數）或者使用它訪問該函數。
盡管以上兩種選擇都是有效的，但 submit 處理函數更為常用些。然而，有些情況下，您可能又不止一個 Submit 按鈕，這就需要每個按鈕一個 click 處理函數。清單 3 展示了這樣一個必須使用 click 處理函數的場景，因為兩個 Submit 按鈕都能觸發表單提交。
清單 3. 使用兩個 submit 按鈕提交表單
<script type="text/javascript"
src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="register.js"></script>
<div id="container">
<div id="message"></div>
<form method="post" id="mainform">
<label for="username">Username</label>
<input type="text" name="username" id="username" value="" />
<label for="password">Password</label>
<input type="password" name="password" value="" />
<input type="submit" name="action" id="login" value="Log in" />
<h2>Extra options (registration only)</h2>
<label for="firstname">First name</label>
<input type="text" name="firstname" value="" />
<label for="lastname">Last name</label>
<input type="text" name="lastname" value="" />
<label for="email">Email</label>
<input type="text" name="email" value="" />
<input type="submit" name="action" id="register" value="Register" />
</form>
</div>
注意，在本例中這個表單可以執行多個活動：現有用戶可以登錄，新用戶可以通過輸入附加賬戶信息進行注冊。使用表單上的 submit 處理函數在這種場景中不能運行，因為它不能確定哪個按鈕觸發表單提交。因此，清單 4 使用 click 處理函數來確定每個按鈕采取什么行動，便于您以后依此處理數據。
清單 4. register.js 中提交按鈕的 Click 處理函數
$(document).ready(function() {
$("#register, #login").click(function(e) {
var name = ($(event.target).attr('id') == 'register') ? 'Registration' : 'Login';
return e.preventDefault();
});
});
文檔準備好后，您需要為 Register 和 Login 按鈕分配 click 處理函數。click 處理函數接收一個參數，命名為 e（作為事件） 。此事件對象稍后用來預防默認表單提交。正如之前代碼所述。當 click 處理函數被調用時，當前被點擊的對象的 ID 被訪問，用來確定這是一個用戶登錄還是一個新用戶注冊。
穩定
產品高可用性高并發貼心
項目群及時溝通專業
產品經理1v1支持快速
MVP模式小步快跑承諾
我們選擇聲譽堅持
10年專注高端品質開發