1、表單驗證的相關事件表單驗證的相關事件回顧回顧n 表單驗證一般包括那些內(nèi)容表單驗證一般包括那些內(nèi)容?n 表單驗證的實現(xiàn)步驟。表單驗證的實現(xiàn)步驟。n 文本框控件有哪些常用的屬性、方法、事件？文本框控件有哪些常用的屬性、方法、事件？2預習檢查預習檢查n 鍵盤輸入對應的事件名稱。鍵盤輸入對應的事件名稱。n 回車鍵和回車鍵和Tab鍵分別對應的鍵盤代碼。鍵分別對應的鍵盤代碼。n 舉例說明：什么是失去焦點或獲得焦點？舉例說明：什么是失去焦點或獲得焦點？3本章任務本章任務4演示示例演示示例1：回車切換輸入的效果回車切換輸入的效果演示示例演示示例2：即時提示錯誤的輸入框即時提示錯誤的輸入框演示示例演示示例3：內(nèi)

2、容動態(tài)顯示的層特效內(nèi)容動態(tài)顯示的層特效 制作回車切換輸入的效果制作回車切換輸入的效果制作內(nèi)容動態(tài)顯示的層特效制作內(nèi)容動態(tài)顯示的層特效制作即時提示錯誤的輸入框制作即時提示錯誤的輸入框本章目標本章目標n 會使用圖片代替提交按鈕會使用圖片代替提交按鈕n 會使用會使用onKeyDown事件事件檢查用戶輸入的特殊字符檢查用戶輸入的特殊字符n 會使用會使用DIV的的innerHTML或或innerText動態(tài)顯示內(nèi)容動態(tài)顯示內(nèi)容n 會使用多個會使用多個DIV動態(tài)隱藏或顯示內(nèi)容動態(tài)隱藏或顯示內(nèi)容5如何使用圖片代替提交按鈕如何使用圖片代替提交按鈕6為了美觀，現(xiàn)把提交按鈕變成圖片，但仍然保持為了美觀，現(xiàn)把提交按

3、鈕變成圖片，但仍然保持表單的驗證功能？如何實現(xiàn)？表單的驗證功能？如何實現(xiàn)？頁面效果頁面效果使用圖片的單擊事件。使用圖片的單擊事件。onClick=checkForm( )如何使用圖片代替提交按鈕如何使用圖片代替提交按鈕7根據(jù)上述分析和提供的素材頁面來實現(xiàn)表單驗證。根據(jù)上述分析和提供的素材頁面來實現(xiàn)表單驗證。素材頁面素材頁面 function checkForm( ) if ( document.myform.txtUserName.value.length=0) alert(用戶名不能為空！用戶名不能為空！); document.myform.txtUserName.focus( ); 檢驗是

4、否為空檢驗是否為空單擊事件，調(diào)用單擊事件，調(diào)用表單驗證函數(shù)表單驗證函數(shù)如何使用圖片代替提交按鈕如何使用圖片代替提交按鈕8能進行表單驗證，但即使是正確填寫了表單，也能進行表單驗證，但即使是正確填寫了表單，也不能提交頁面（點擊不能提交頁面（點擊“注冊注冊”沒反映）。沒反映）。如何使用圖片代替提交按鈕如何使用圖片代替提交按鈕9因為圖片不具備因為圖片不具備“提交提交”按鈕的提交功能，所以需按鈕的提交功能，所以需要人工調(diào)用提交方法要人工調(diào)用提交方法 submit( ) 。 function checkForm( ) if ( document.myform.txtUserName.value.lengt

5、h=0) alert(用戶名不能為空！用戶名不能為空！); document.myform.txtUserName.focus( );else document.myform.submit( ); 查看源代碼查看源代碼如果表單輸入合法，則提交表單如果表單輸入合法，則提交表單制作回車切換輸入的效果制作回車切換輸入的效果10輸入完畢后回車，默認會提交表單。輸入完畢后回車，默認會提交表單。 頁面效果頁面效果如何制作回車如何制作回車Tab切換效果？切換效果？ 頁面效果頁面效果制作回車切換輸入的效果制作回車切換輸入的效果111、 使用鍵盤輸入事件使用鍵盤輸入事件onKeyDown事件事件 2、 檢查輸入

6、是否是回車鍵檢查輸入是否是回車鍵鍵碼為鍵碼為13，若是則將，若是則將 輸入改為輸入改為Tab鍵鍵碼為鍵鍵碼為9 function changeFocus( ) if (event.keyCode=13) event.keyCode=9; 查看源代碼查看源代碼鍵盤按下，調(diào)用實鍵盤按下，調(diào)用實現(xiàn)現(xiàn)Tab效果的函數(shù)效果的函數(shù)修改回車鍵為修改回車鍵為Tab鍵鍵Event事件對象包含輸入鍵信息事件對象包含輸入鍵信息制作回車切換輸入的效果制作回車切換輸入的效果12上述注冊頁面中，需要給每個文本框添加鍵盤按上述注冊頁面中，需要給每個文本框添加鍵盤按下事件，有沒有更簡單的辦法？下事件，有沒有更簡單的辦法？ 制

7、作回車切換輸入的效果制作回車切換輸入的效果13通過給通過給document對象添加鍵盤事件。對象添加鍵盤事件。 function changeFocus( ) if (event.keyCode=13 & event.srcElement.type!=button & event.srcElement.type!=submit ) event.keyCode=9; document.onKeyDown= changeFocus ; 如果按鍵是回車鍵，并且控件如果按鍵是回車鍵，并且控件類型不是提交、重置按鈕等按類型不是提交、重置按鈕等按鈕，則變?yōu)殁o，則變?yōu)門ab切換切換document對象的對象

8、的onKeyDown事件事件，它將接收，它將接收頁面中所有的鍵盤事件頁面中所有的鍵盤事件查看源代碼查看源代碼小結(jié)小結(jié)114根據(jù)提供的素材頁面，實現(xiàn)游戲中的人物移動效果。根據(jù)提供的素材頁面，實現(xiàn)游戲中的人物移動效果。提示：提示：1、根據(jù)按下的方向鍵，改變層的、根據(jù)按下的方向鍵，改變層的Left或或Top坐標坐標 document.getElementById(man).style.pixelLeft document.getElementById(man).style.pixelTop2、方向鍵的、方向鍵的ASCII碼：碼： 向上鍵向上鍵38，向下箭向下箭40 向左鍵向左鍵37， 向右鍵向右鍵3

9、93、添加鍵盤事件：添加鍵盤事件：document.onKeyDown= move;練習答案練習答案 練習素材練習素材制作即時提示錯誤的特效制作即時提示錯誤的特效15如何制作即時提示錯誤的特效？如何制作即時提示錯誤的特效？頁面效果頁面效果制作即時提示錯誤的特效制作即時提示錯誤的特效16使用使用DIV層的內(nèi)容動態(tài)改變。層的內(nèi)容動態(tài)改變。 在每個輸入框后添加一個在每個輸入框后添加一個DIV層層, 根據(jù)用戶的輸入根據(jù)用戶的輸入, 動動態(tài)顯示錯誤信息態(tài)顯示錯誤信息制作即時提示錯誤的特效制作即時提示錯誤的特效17演示實現(xiàn)步驟：演示實現(xiàn)步驟：1、在登錄文本框后插入、在登錄文本框后插入DIV標簽標簽logi

10、nError （即沒有樣式的（即沒有樣式的DIV層）層）2、修改源代碼，設置、修改源代碼，設置DIV的顯示方式為的顯示方式為inline，即和文本框在同一行，即和文本框在同一行 演示示例演示示例4 4：演示素材演示素材制作即時提示錯誤的特效制作即時提示錯誤的特效18演示實現(xiàn)步驟：演示實現(xiàn)步驟：3、添加文本框失去焦點的事件函數(shù)、添加文本框失去焦點的事件函數(shù)： function checkLogin( ) var myDiv=document.getElementById(loginError); myDiv.innerHTML=; var strName=document.userfrm.log

11、inName.value; if (strName.length = 0) myDiv.innerHTML=用戶名不能為空用戶名不能為空; return; 查看源代碼查看源代碼如果輸入的信息不合法，則利用如果輸入的信息不合法，則利用DIV的的innerHTML或或innerText進行錯誤進行錯誤提示，提示，innerText只能寫文本信息只能寫文本信息獲取插入的獲取插入的DIV對象對象小結(jié)小結(jié)219完善完善”密碼密碼“和和”電子郵件電子郵件“的錯誤提示功能。的錯誤提示功能。提示：提示：1、密碼和電子郵件文本框后各添加一個、密碼和電子郵件文本框后各添加一個DIV標簽標簽2、修改、修改DIV的顯

12、示樣式為的顯示樣式為inline3、給各個文本框添加失去焦點、給各個文本框添加失去焦點onBlur的事件函數(shù)的事件函數(shù)練習答案練習答案 練習素材練習素材 制作內(nèi)容動態(tài)改變的層特效制作內(nèi)容動態(tài)改變的層特效20如何制作內(nèi)容動態(tài)改變的特效如何制作內(nèi)容動態(tài)改變的特效(選擇不同的計算方式選擇不同的計算方式)？頁面效果頁面效果制作內(nèi)容動態(tài)改變的層特效制作內(nèi)容動態(tài)改變的層特效n 方法方法1： 當動態(tài)顯示的內(nèi)容較少時，使用當動態(tài)顯示的內(nèi)容較少時，使用 myDiv.innerHTML=“HTML代碼代碼”;n 方法方法2： 當動態(tài)顯示的內(nèi)容較多，并相對固定時，則預先當動態(tài)顯示的內(nèi)容較多，并相對固定時，則預先制作

13、好制作好DIV內(nèi)容，內(nèi)容， 然后使用然后使用 myDiv.style.display=“none/block”;21有哪些方法可以實現(xiàn)動態(tài)改變頁面內(nèi)容？有哪些方法可以實現(xiàn)動態(tài)改變頁面內(nèi)容？制作內(nèi)容動態(tài)改變的層特效制作內(nèi)容動態(tài)改變的層特效22演示實現(xiàn)步驟：演示實現(xiàn)步驟：1、預先插入兩個、預先插入兩個DIV標簽，分別放置不同計算方式標簽，分別放置不同計算方式顯示的內(nèi)容：顯示的內(nèi)容：DIV1按面積計算按面積計算顯示的內(nèi)容顯示的內(nèi)容DIV2按貸款總額計按貸款總額計算顯示的內(nèi)容算顯示的內(nèi)容演示素材演示素材制作內(nèi)容動態(tài)改變的層特效制作內(nèi)容動態(tài)改變的層特效23function InitDIV( )docum

14、ent.getElementById(DIV1).style.display=none; 演示實現(xiàn)步驟：演示實現(xiàn)步驟：2、添加函數(shù)，初始化、添加函數(shù)，初始化DIV1不顯示，默認按貸款總額計算：不顯示，默認按貸款總額計算：隱藏隱藏DIV1頁面加載時調(diào)用頁面加載時調(diào)用查看源代碼查看源代碼制作內(nèi)容動態(tài)改變的層特效制作內(nèi)容動態(tài)改變的層特效24function displayDIV( ) if (document.myform. methodRadio0.checked=true) document.getElementById(DIV1).style.display=block; document.getElementById(DIV2).style.display=none; else document.getElementById(DIV2).style.display=block; document.getElementById(DIV1).style.display=none; 3、添加函數(shù)，根據(jù)、添加函數(shù)，根據(jù)“計算方式計算方式”的選擇，隱藏的選擇，隱藏/顯示對