教學(xué)電子課件使用javascript增強(qiáng)交互效果

1、表單基本驗(yàn)證技術(shù)第六章回顧與作業(yè)點(diǎn)評(píng)如何使用style屬性改變樣式屬性值？如何使用className屬性改變樣式屬性值？制作隨滾動(dòng)條滾動(dòng)的廣告圖片的關(guān)鍵步驟是什么？預(yù)習(xí)檢查為什么需要表單驗(yàn)證？使用什么方法驗(yàn)證Email文本框中必須輸入符號(hào)“”和“.”？使用什么事件可以實(shí)現(xiàn)文本輸入提示特效？本章任務(wù)驗(yàn)證休閑網(wǎng)登錄頁(yè)面數(shù)據(jù)輸入的有效性驗(yàn)證休閑網(wǎng)注冊(cè)頁(yè)面數(shù)據(jù)輸入的有效性本章目標(biāo)使用表單事件和腳本函數(shù)實(shí)現(xiàn)表單驗(yàn)證使用String對(duì)象和文本框控件常用屬性和方法實(shí)現(xiàn)客戶端驗(yàn)證什么需要表單驗(yàn)證減輕服務(wù)器的壓力保證輸入的數(shù)據(jù)符合要求表單驗(yàn)證的內(nèi)容日期是否有效或日期格式是否正確表單元素是否為空用戶名和密碼E-m

2、ail地址是否正確身份證號(hào)碼等是否是數(shù)字表單驗(yàn)證思路 當(dāng)輸入的表單數(shù)據(jù)不符合要求時(shí)，如何編寫(xiě)腳本來(lái)進(jìn)行提示？獲得表單元素值使用JavaScript的一些方法對(duì)數(shù)據(jù)進(jìn)行判斷當(dāng)表單提示時(shí)，觸發(fā) onsubmit事件，對(duì)獲取的數(shù)據(jù)進(jìn)行驗(yàn)證String對(duì)象字符串對(duì)象的屬性 字符串對(duì)象.lengthvar str=this is JavaScript;var strLength=str.length; 18String對(duì)象字符串對(duì)象的方法字符串對(duì)象.方法名( )方法描述toLowerCase()把字符串轉(zhuǎn)化為小寫(xiě)toUpperCase()把字符串轉(zhuǎn)化為大寫(xiě)charAt(index)返回在指定位置的字符i

3、ndexOf(字符串，index)查找某個(gè)指定的字符串值在字符串中首次出現(xiàn)的位置substring(index1,index2)返回位于指定索引index1和index2之間的字符串，并且包括索引index1對(duì)應(yīng)的字符，不包括索引index2對(duì)應(yīng)的字符var str=this is JavaScript;var selectFirst=str.indexOf(Java);var selectSecond=str.indexOf(Java,12);8-1驗(yàn)證休閑網(wǎng)登錄頁(yè)面驗(yàn)證休閑網(wǎng)登錄頁(yè)面的Email演示示例：電子郵件格式驗(yàn)證電子郵件格式驗(yàn)證思路分析使用getElementById()獲取Ema

4、il的值使用字符串方法indexOf( ) 判斷Email的值是否包含“”和“.”符號(hào)。根據(jù)函數(shù)返回值是true還是flase來(lái)決定是否提交表單var mail=document.getElementById(email).value;if(mail.indexOf()=-1) alert(Email格式不正確n必須包含); return false; 教師現(xiàn)場(chǎng)演示編碼過(guò)程練習(xí)-驗(yàn)證電子郵箱需求說(shuō)明電子郵箱不能為空電子郵箱中必須包含符號(hào)“”和“.”完成時(shí)間：20分鐘 查看完整代碼共性問(wèn)題集中講解常見(jiàn)調(diào)試問(wèn)題及解決辦法代碼規(guī)范問(wèn)題共性問(wèn)題集中講解文本框內(nèi)容驗(yàn)證-1姓名不能為空，并且姓名中不能有數(shù)

5、字密碼不能為空，并且密碼包含的字符不能少于6個(gè)兩次輸入的密碼必須一致文本框內(nèi)容驗(yàn)證-2使用String對(duì)象的length屬性驗(yàn)證密碼的長(zhǎng)度var pwd=document.getElementById(pwd).value; if(pwd.length6) alert(密碼必須等于或大于6個(gè)字符); return false;驗(yàn)證兩次輸入密碼是否一致var repwd=document.getElementById(repwd).value;if(pwd!=repwd) alert(兩次輸入的密碼不一致); return false; 文本框內(nèi)容驗(yàn)證-3使用length屬性獲取文本長(zhǎng)度，使用f

6、or循環(huán)和substring()方法依次截?cái)鄦蝹€(gè)字符，判斷每個(gè)字符是否是數(shù)字var user=document.getElementById(user).value; for(var i=0;i=0) alert(姓名中不能包含數(shù)字); 教師現(xiàn)場(chǎng)演示編碼過(guò)程練習(xí)驗(yàn)證貴美網(wǎng)注冊(cè)頁(yè)面需求說(shuō)明名字和姓氏不能為空，且名稱和姓氏中不能有數(shù)字，當(dāng)名字中出現(xiàn)數(shù)字時(shí)，彈出提示信息密碼至少包含6個(gè)字符，并且兩次輸入的密碼必須一致完成時(shí)間：25分鐘 查看完整代碼共性問(wèn)題集中講解常見(jiàn)調(diào)試問(wèn)題及解決辦法代碼規(guī)范問(wèn)題共性問(wèn)題集中講解小結(jié)編寫(xiě)如下圖所示的注冊(cè)頁(yè)面，實(shí)現(xiàn)注冊(cè)表單的驗(yàn)證功能文本框效果如何實(shí)現(xiàn)如圖所示效果，完善

7、驗(yàn)證Email的例子使用文本框?qū)ο蟮南嚓P(guān)屬性、事件和方法實(shí)現(xiàn)此效果文本框?qū)ο笪谋究驅(qū)ο蟮膶傩浴⒎椒ê褪录悇e名稱描述事件onblur失去焦點(diǎn)，當(dāng)光標(biāo)離開(kāi)某個(gè)文本框時(shí)觸發(fā)onfocus獲得焦點(diǎn)，當(dāng)光標(biāo)進(jìn)入某個(gè)文本框時(shí)觸發(fā)onkeypress某個(gè)鍵盤(pán)按鍵被按下并松開(kāi)方法blur()從文本域中移開(kāi)焦點(diǎn)focus()在文本域中設(shè)置焦點(diǎn)，即獲得鼠標(biāo)光標(biāo)select()選取文本域中的內(nèi)容屬性id設(shè)置或返回文本域的idvalue設(shè)置或返回文本域的value屬性的值制作文本框效果-1清除文本框中初始內(nèi)容，并設(shè)置邊框?yàn)榧t色function clearText() var mail=document.getEle

8、mentById(email); if(mail.value=請(qǐng)輸入正確的電子郵箱)mail.value=;mail.style.borderColor=#ff0000; Email： 制作文本框效果-2當(dāng)用戶輸入無(wú)效的電子郵件地址，Email文本框中的內(nèi)容將被自動(dòng)選中并且高亮顯示，提示用戶重新輸入if(mail.indexOf()=-1 | mail.indexOf(.)=-1) alert(Email格式不正確n必須包含符號(hào)和.); document.getElementById(email).select(); return false;演示示例：動(dòng)態(tài)改變文本框效果文本提示特效如何實(shí)現(xiàn)如

9、圖所示的文本提示特效？文本框失去焦點(diǎn)事件onblur使用innerHTML屬性動(dòng)態(tài)改div添中內(nèi)容文本提示特效代碼提示Email不能為空f(shuō)unction checkEmail() var mail= document.getElementById (email); var divID= document.getElementById (DivEmail); divID.innerHTML=; if(mail.value=) divID.innerHTML=Email不能為空; return false;演示示例：制作文本輸入提示特效練習(xí)-文本輸入提示特效需求說(shuō)明名字和姓氏均不能為空，并且不能有數(shù)字密碼不能少于6位，兩次輸入的密碼必須相同電子郵箱不能為空，并且必須包含符號(hào)“”和“.”查看完整代碼完成時(shí)間：25分鐘