JS第06章 表單驗(yàn)證的相關(guān)事件

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

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

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

4、否為空檢驗(yàn)是否為空單擊事件，調(diào)用單擊事件，調(diào)用表單驗(yàn)證函數(shù)表單驗(yàn)證函數(shù)如何使用圖片代替提交按鈕如何使用圖片代替提交按鈕8能進(jìn)行表單驗(yàn)證，但即使是正確填寫(xiě)了表單，也能進(jìn)行表單驗(yàn)證，但即使是正確填寫(xiě)了表單，也不能提交頁(yè)面（點(diǎn)擊不能提交頁(yè)面（點(diǎn)擊“注冊(cè)注冊(cè)”沒(méi)反映）。沒(méi)反映）。如何使用圖片代替提交按鈕如何使用圖片代替提交按鈕9因?yàn)閳D片不具備因?yàn)閳D片不具備“提交提交”按鈕的提交功能，所以需按鈕的提交功能，所以需要人工調(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輸入完畢后回車，默認(rèn)會(huì)提交表單。輸入完畢后回車，默認(rèn)會(huì)提交表單。 頁(yè)面效果頁(yè)面效果如何制作回車如何制作回車Tab切換效果？切換效果？ 頁(yè)面效果頁(yè)面效果制作回車切換輸入的效果制作回車切換輸入的效果111、 使用鍵盤(pán)輸入事件使用鍵盤(pán)輸入事件onKeyDown事件事件 2、 檢查輸入

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

7、作回車切換輸入的效果制作回車切換輸入的效果13通過(guò)給通過(guò)給document對(duì)象添加鍵盤(pán)事件。對(duì)象添加鍵盤(pán)事件。 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)門(mén)ab切換切換document對(duì)象的對(duì)象

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

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

10、nError （即沒(méi)有樣式的（即沒(méi)有樣式的DIV層）層）2、修改源代碼，設(shè)置、修改源代碼，設(shè)置DIV的顯示方式為的顯示方式為inline，即和文本框在同一行，即和文本框在同一行 演示示例演示示例4 4：演示素材演示素材制作即時(shí)提示錯(cuò)誤的特效制作即時(shí)提示錯(cuò)誤的特效18演示實(shí)現(xiàn)步驟：演示實(shí)現(xiàn)步驟：3、添加文本框失去焦點(diǎn)的事件函數(shù)、添加文本框失去焦點(diǎn)的事件函數(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進(jìn)行錯(cuò)誤進(jìn)行錯(cuò)誤提示，提示，innerText只能寫(xiě)文本信息只能寫(xiě)文本信息獲取插入的獲取插入的DIV對(duì)象對(duì)象小結(jié)小結(jié)219完善完善”密碼密碼“和和”電子郵件電子郵件“的錯(cuò)誤提示功能。的錯(cuò)誤提示功能。提示：提示：1、密碼和電子郵件文本框后各添加一個(gè)、密碼和電子郵件文本框后各添加一個(gè)DIV標(biāo)簽標(biāo)簽2、修改、修改DIV的顯

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

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

14、ent.getElementById(DIV1).style.display=none; 演示實(shí)現(xiàn)步驟：演示實(shí)現(xiàn)步驟：2、添加函數(shù)，初始化、添加函數(shù)，初始化DIV1不顯示，默認(rèn)按貸款總額計(jì)算：不顯示，默認(rèn)按貸款總額計(jì)算：隱藏隱藏DIV1頁(yè)面加載時(shí)調(diào)用頁(yè)面加載時(shí)調(diào)用查看源代碼查看源代碼制作內(nèi)容動(dòng)態(tài)改變的層特效制作內(nèi)容動(dòng)態(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ù)“計(jì)算方式計(jì)算方式”的選擇，隱藏的選擇，隱藏/顯示對(duì)