很多時候在網站上注冊時，我們會發現，注冊表單通常需要檢查用戶名和電子郵件地址的可用性；從而確保用戶之間不擁有相同的用戶名和電子郵件地址；一些網站喜歡在用戶提交填寫的用戶信息時，做信息可用性的檢查，而一些網站會做實時的用戶名和電子郵件地址可用性檢查，例如：“用戶名”文本框失去焦點時；就用戶體驗來說，實時的用戶信息檢查用戶體驗效果更好，而不是在表單提交后，告訴用戶信息不符合系統要求。
下面截圖是新浪微博的注冊界面，它采用的是實時的用戶信息檢查，如：手機號碼和用戶名等信息。
圖1新浪微博注冊表單
1、正文
假設，現在要求我們實現一個注冊界面并且它采用實時方式檢查用戶信息是否符合系統的要求。
其中，注冊界面包含：用戶名，郵件地址，密碼和微博地址等信息；實時檢查：當文本框失去焦點時對信息進行實時檢查，例如：“用戶名”文本框失去焦點時，觸發頁面發送Ajax請求，到數據庫中用戶是否可用，接著把查詢結果返回到前端頁面中。
對于表單輸入檢查，我們將使用前一博文《自定義jQuery插件Step by Step》中，自定義表單信息檢查插件對輸入信息進行檢查。
圖2注冊驗證過程
注冊表單設計
現在，讓我們定義注冊表單，它包含：用戶名，郵件地址，密碼和微博地址等信息，由于時間的關系，我們已經把注冊表單界面的定義好了，具體實現代碼如下：
<body> <div id="Div1"> <!-- Start Sign Up Form --> <form action="#signup-form" id="Form1"> <h2> Sign Up</h2> <fieldset> <div class="fieldgroup"> <label for="name"> Name</label> <input class="form_element" type="text" name="name" validation="required nameAvailable" /> <span class='availability_status'></span> </div> <div class="fieldgroup"> <label for="email"> Email</label> <input class="form_element" type="text" name="email" validation="email" /> <span></span> </div> <div class="fieldgroup"> <label for="password"> Password</label> <input class="form_element" type="password" name="password" validation="password" /> <span></span> </div> <div class="fieldgroup"> <label for="weibo"> Weibo</label> <input class="form_element" type="text" name="weibo" validation="url" /> <span></span> </div> <div class="fieldgroup"> <input type="submit" class="submit" value="Sign up"> <span></span> </div> </fieldset> <div class="fieldgroup"> <p> Already registered? <a >Sign in</a>.</p> </div> </form> <!-- End Sign Up Form --> </div></body>
新聞熱點
疑難解答
圖片精選
