資源描述:
《《表單基本驗證技術》PPT課件》由會員上傳分享,免費在線閱讀,更多相關內容在教育資源-天天文庫。
1、表單基本驗證技術第六章回顧與作業(yè)點評如何使用style屬性改變樣式屬性值?HTML元素.style.樣式屬性="值"如何使用className屬性改變樣式屬性值?This.classname制作隨滾動條滾動的廣告圖片的關鍵步驟是什么?document.documentElement.scrollTop;document.documentElement.scrollLeft;預習檢查為什么需要表單驗證?使用什么方法驗證Email文本框中必須輸入符號“@”和“.”?使用getElementById()獲取
2、Email的值使用字符串方法indexOf()判斷Email的值是否包含“@”和“.”符號。根據函數返回值是true還是flase來決定是否提交表單使用什么事件可以實現文本輸入提示特效?onsubmit本章任務驗證休閑網登錄頁面數據輸入的有效性驗證休閑網注冊頁面數據輸入的有效性本章目標使用表單事件和腳本函數實現表單驗證使用String對象和文本框控件常用屬性和方法實現客戶端驗證什么需要表單驗證減輕服務器的壓力保證輸入的數據符合要求表單驗證的內容日期是否有效或日期格式是否正確表單元素是否為空用戶名和密碼
3、E-mail地址是否正確身份證號碼等是否是數字表單驗證思路當輸入的表單數據不符合要求時,如何編寫腳本來進行提示?獲得表單元素值使用JavaScript的一些方法對數據進行判斷當表單提示時,觸發(fā)onsubmit事件,對獲取的數據進行驗證String對象字符串對象的屬性字符串對象.lengthvarstr="thisisJavaScript";varstrLength=str.length;18String對象字符串對象的方法字符串對象.方法名()方法描述toLowerCase()把字符串轉化為小寫toU
4、pperCase()把字符串轉化為大寫charAt(index)返回在指定位置的字符indexOf(字符串,index)查找某個指定的字符串值在字符串中首次出現的位置substring(index1,index2)返回位于指定索引index1和index2之間的字符串,并且包括索引index1對應的字符,不包括索引index2對應的字符varstr="thisisJavaScript";varselectFirst=str.indexOf("Java");varselectSecond=str.ind
5、exOf("Java",12);8-1驗證休閑網登錄頁面驗證休閑網登錄頁面的Email演示示例:電子郵件格式驗證電子郵件格式驗證思路分析使用getElementById()獲取Email的值使用字符串方法indexOf()判斷Email的值是否包含“@”和“.”符號。根據函數返回值是true還是flase來決定是否提交表單varmail=document.getElementById("email").value;if(mail.indexOf("@")==-1){alert("Email格式不正確
6、n必須包含@");returnfalse;}教師現場演示編碼過程練習-驗證電子郵箱需求說明電子郵箱不能為空電子郵箱中必須包含符號“@”和“.”完成時間:20分鐘查看完整代碼共性問題集中講解常見調試問題及解決辦法代碼規(guī)范問題共性問題集中講解文本框內容驗證-1姓名不能為空,并且姓名中不能有數字密碼不能為空,并且密碼包含的字符不能少于6個兩次輸入的密碼必須一致文本框內容驗證-2使用String對象的length屬性驗證密碼的長度varpwd=document.getElementById("pwd").va
7、lue;if(pwd.length<6){alert("密碼必須等于或大于6個字符");returnfalse;}驗證兩次輸入密碼是否一致varrepwd=document.getElementById("repwd").value;if(pwd!=repwd){alert("兩次輸入的密碼不一致");returnfalse;}文本框內容驗證-3使用length屬性獲取文本長度,使用for循環(huán)和substring()方法依次截斷單個字符,判斷每個字符是否是數字varuser=document.getE
8、lementById("user").value;for(vari=0;i=0){alert("姓名中不能包含數字");}}教師現場演示編碼過程練習-驗證貴美網注冊頁面需求說明名字和姓氏不能為空,且名稱和姓氏中不能有數字,當名字中出現數字時,彈出提示信息密碼至少包含6個字符,并且兩次輸入的密碼必須一致完成時間:25分鐘查看完整代碼共性問題集中講解常見調試問題