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

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

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

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

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

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

7、驗證Email的例子使用文本框對象的相關屬性、事件和方法實現此效果文本框對象文本框對象的屬性、方法和事件類別名稱描述事件onblur失去焦點，當光標離開某個文本框時觸發onfocus獲得焦點，當光標進入某個文本框時觸發onkeypress某個鍵盤按鍵被按下并松開方法blur()從文本域中移開焦點focus()在文本域中設置焦點，即獲得鼠標光標select()選取文本域中的內容屬性id設置或返回文本域的idvalue設置或返回文本域的value屬性的值制作文本框效果-1清除文本框中初始內容，并設置邊框為紅色function clearText() var mail=document.getEle

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

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