Ajax注冊表單用戶名實時驗證.

Ajax注冊表單用戶名實時驗證

1.1.1 摘要

很多時候在網站上注冊時，我們會發現，注冊表單通常需要檢查用戶名和電子郵件地址的可用性；從而確保用戶之間不擁有相同的用戶名和電子郵件地址；一些網站喜歡在用戶提交填寫的用戶信息時，做信息可用性的檢查，而一些網站會做實時的用戶名和電子郵件地址可用性檢查，例如：“用戶名”文本框失去焦點時；就用戶體驗來說，實時的用戶信息檢查用戶體驗效果更好，而不是在表單提交后，告訴用戶信息不符合系統要求。

下面截圖是新浪微博的注冊界面，它采用的是實時的用戶信息檢查，如：手機號碼和用戶名等信息。

圖1新浪微博注冊表單

本文目錄

注冊表單設計

jQuery Validation插件

數據表設計

服務端設計

前端實現

1.1.2 正文

假設，現在要求我們實現一個注冊界面并且它采用實時方式檢查用戶信息是否符合系統的要求。

其中，注冊界面包含：用戶名，郵件地址，密碼和微博地址等信息；實時檢查：當文本框失去焦點時對信息進行實時檢查，例如：“用戶名”文本框失去焦點時，觸發頁面發送Ajax請求，到數據庫中用戶是否可用，接著把查詢結果返回到前端頁面中。

對于表單輸入檢查，我們將使用前一博文《自定義jQuery插件Step by Step》中，自定義表單信息檢查插件對輸入信息進行檢查。

圖2注冊驗證過程

注冊表單設計

現在，讓我們定義注冊表單，它包含：用戶名，郵件地址，密碼和微博地址等信息，由于時間的關系，我們已經把注冊表單界面的定義好了，具體實現代碼如下：

Sign Up

Name

Email

Password

Weibo

總結

以上是生活随笔為你收集整理的ajax注册表单用户名实时验证,Ajax注册表单用户名实时验证..doc的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。