傳統網頁在注冊時檢測用戶名是否被占用,傳統的校驗顯然緩慢笨拙。
當ajax出現后,這種體驗有了很大的改觀,因為在用戶填寫表單時,簽名的表單項已經發送給了服務器,然后根據用戶填寫好的內容進行數據查詢。在查詢號無需頁面刷新就自動給了提示。類似這樣的應用大大的提高了用戶的體驗,本節簡單介紹自動校驗表單制作方法。從原理上分析ajax的作用。
1.搭建框架
首先為html框架
代碼如下:
<form name="register">
<p><label for = "User">輸用戶名<input type="text" name="User" id="User"></label><span id="UserResult"></span></p>
<p><label for = "passwd1">輸入密碼<input type="password" name="passwd1" id="passwd1"></label></p>
<p><label for = "passwd2">重復輸入<input type="password" name="passwd2" id="passwd2"></label></p>
<p><input type="submit" value="注冊"></p>
<p><input type="reset" value="重置"></p>
</form>
2.建立異步請求
當用戶輸完“用戶名”開始輸入別的表單時進行后臺校驗,代碼如下:
輸用戶名<input type="text" name="User" id="User" onblur="startCheck(this)">
在函數startCheck()中,直接發送this關鍵字,將文本框對象自己作為參數傳遞,而函數本身則首先判斷用戶是否輸入為空,如果為空,則直接返回,并聚焦用戶名文本框,給出相應的提示。
代碼如下:
function startCheck(oInput){
//判斷是否有輸入,沒有輸入則直接返回。
if(!oInput.value){
oInput.focus();//聚焦到用戶名文本框
document.getElementById("User").innerHTML="用戶名不能為空";
return;
}
//創建異步請求
新聞熱點
疑難解答
圖片精選