很多時(shí)候在網(wǎng)站上注冊(cè)時(shí)，我們會(huì)發(fā)現(xiàn)，注冊(cè)表單通常需要檢查用戶名和電子郵件地址的可用性；從而確保用戶之間不擁有相同的用戶名和電子郵件地址；一些網(wǎng)站喜歡在用戶提交填寫的用戶信息時(shí)，做信息可用性的檢查，而一些網(wǎng)站會(huì)做實(shí)時(shí)的用戶名和電子郵件地址可用性檢查，例如：“用戶名”文本框失去焦點(diǎn)時(shí)；就用戶體驗(yàn)來說，實(shí)時(shí)的用戶信息檢查用戶體驗(yàn)效果更好，而不是在表單提交后，告訴用戶信息不符合系統(tǒng)要求。
下面截圖是新浪微博的注冊(cè)界面，它采用的是實(shí)時(shí)的用戶信息檢查，如：手機(jī)號(hào)碼和用戶名等信息。
圖1新浪微博注冊(cè)表單
1、正文
假設(shè)，現(xiàn)在要求我們實(shí)現(xiàn)一個(gè)注冊(cè)界面并且它采用實(shí)時(shí)方式檢查用戶信息是否符合系統(tǒng)的要求。
其中，注冊(cè)界面包含：用戶名，郵件地址，密碼和微博地址等信息；實(shí)時(shí)檢查：當(dāng)文本框失去焦點(diǎn)時(shí)對(duì)信息進(jìn)行實(shí)時(shí)檢查，例如：“用戶名”文本框失去焦點(diǎn)時(shí)，觸發(fā)頁面發(fā)送Ajax請(qǐng)求，到數(shù)據(jù)庫中用戶是否可用，接著把查詢結(jié)果返回到前端頁面中。
對(duì)于表單輸入檢查，我們將使用前一博文《自定義jQuery插件Step by Step》中，自定義表單信息檢查插件對(duì)輸入信息進(jìn)行檢查。
圖2注冊(cè)驗(yàn)證過程
注冊(cè)表單設(shè)計(jì)
現(xiàn)在，讓我們定義注冊(cè)表單，它包含：用戶名，郵件地址，密碼和微博地址等信息，由于時(shí)間的關(guān)系，我們已經(jīng)把注冊(cè)表單界面的定義好了，具體實(shí)現(xiàn)代碼如下：
<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>
新聞熱點(diǎn)
疑難解答
圖片精選
