1、基本的表單驗(yàn)證技術(shù)第五章回顧簡(jiǎn)述制作樣式特效的大致步驟。簡(jiǎn)述制作改變按鈕背景圖片特效的大致步驟。簡(jiǎn)述層的顯示/隱藏特效的實(shí)現(xiàn)思路。簡(jiǎn)述圖片的顯示/隱藏特效的的實(shí)現(xiàn)思路。預(yù)習(xí)檢查表單驗(yàn)證一般包括哪些方面內(nèi)容？String對(duì)象有哪些常用的屬性和方法？文本框?qū)ο笥心男┏Ｓ玫膶傩?、方法和事件？本章任?wù)演示示例1：具有驗(yàn)證功能的登錄頁(yè)面演示示例2：具有驗(yàn)證功能的注冊(cè)頁(yè)面 制作具有驗(yàn)證功能的登錄頁(yè)面 制作具有驗(yàn)證功能的注冊(cè)頁(yè)面會(huì)使用DOM模型的層次關(guān)系訪問(wèn)元素會(huì)使用表單事件和腳本函數(shù)實(shí)現(xiàn)表單驗(yàn)證會(huì)使用String對(duì)象和文本框控件常用屬性和方法實(shí)現(xiàn)客戶(hù)端驗(yàn)證本章目標(biāo)為什么需要表單驗(yàn)證服務(wù)器IE腳本在客戶(hù)端執(zhí)

2、行，減輕服務(wù)器端的壓力客戶(hù)端用戶(hù)輸入客戶(hù)端用戶(hù)輸入客戶(hù)端用戶(hù)輸入發(fā)送請(qǐng)求返回響應(yīng)發(fā)送請(qǐng)求返回響應(yīng)發(fā)送請(qǐng)求返回響應(yīng)表單驗(yàn)證的內(nèi)容-1不能為空且不能有數(shù)字不能為空且不能有數(shù)字不能為空，且只能包括字母、數(shù)字和下劃線字符密碼不能為空并且最少為6位，還要求兩次輸入的密碼要一致表單驗(yàn)證的內(nèi)容-2不能為空且包含字符和.只能二選一年月日不能為空，且不能超出其要求的范圍表單驗(yàn)證的思路-1 如何編寫(xiě)腳本驗(yàn)證表單？1、獲取表單元素的值（String類(lèi)型），然后進(jìn)行判斷2、觸發(fā)表單（FORM）的提交事件（onSubmit）表單驗(yàn)證的思路-2常用的String對(duì)象使用 var 語(yǔ)句 var newstr = 這是我的字

3、符串創(chuàng)建 String 對(duì)象 var newstr = new String(這是我的字符串“)調(diào)用方法和屬性 字符串對(duì)象.屬性名 字符串對(duì)象.方法名( )表單驗(yàn)證的思路-3名 稱(chēng)說(shuō) 明屬性length獲取字符串字符的個(gè)數(shù)方法indexOf(“子字符串”，起始位置) 查找子字符串的位置charAt(index)獲取位于指定索引位置的字符substring(index1,index2 )求子串toLowerCase( )將字符串轉(zhuǎn)換成小寫(xiě) toUpperCase( )將字符串轉(zhuǎn)換成大寫(xiě) String對(duì)象常用的屬性和方法語(yǔ)法：indexOf(“查找的子字符串”，查找的起始位置)返回子字符串所在的位

4、置；如果沒(méi)找到，返回 1例如：var xvar y=“abcdefg”;x=y.indexOf(“c” , 0 ); /返回結(jié)果為2，起始位置是0表單驗(yàn)證的思路-4查看完整代碼檢查電子郵件email是否包含“”和”.” function checkEmail( ) var strEmail=document.myform.txtEmail.value; if (strEmail.length=0) alert(電子郵件不能為空!); return false; if (strEmail.indexOf(,0)=-1) alert(電子郵件格式不正確n必須包含符號(hào)！); return false

5、; if (strEmail.indexOf(.,0)=-1) alert(電子郵件格式不正確n必須包含.符號(hào)！); return false; return true; 返回結(jié)果-1表示沒(méi)找到“”字符獲取表單元素的值表單的提交事件表單驗(yàn)證的思路-5-1查看完整代碼表單驗(yàn)證的思路-5-2查看完整代碼function checkUserName() /驗(yàn)證用戶(hù)名 var fname = document.myform.txtUser.value; if(fname.length != 0) for(i=0;ifname.length;i+) var ftext = fname.substring

6、(i,i+1); if(ftext 0) alert(名字中包含數(shù)字 n+請(qǐng)刪除名字中的數(shù)字和特殊字符); return false else alert(請(qǐng)輸入“名字”文本框); document.myform.txtUser.focus(); return false return true; 驗(yàn)證用戶(hù)名不能包含數(shù)字獲取表單元素的值表單驗(yàn)證的思路-5-3查看完整代碼 function passCheck() /驗(yàn)證密碼var userpass = document.myform.txtPassword.value;if(userpass = )alert(未輸入密碼 n + 請(qǐng)輸入密碼);

7、document.myform.txtPassword.focus();return false; if(userpass.length 6)alert(密碼必須多于或等于 6 個(gè)字符。n);return false; return true; 驗(yàn)證密碼不少于6位獲取表單元素的值表單驗(yàn)證的思路-5-4查看完整代碼 function validateform() if(checkUserName()&passCheck( ) return true; else return false; 同時(shí)調(diào)用驗(yàn)證用戶(hù)名和驗(yàn)證密碼方法表單的提交事件觸發(fā)表單提交事件小結(jié) 1編寫(xiě)如下圖所示，實(shí)現(xiàn)登錄表單的驗(yàn)證功能

8、練習(xí)代碼練習(xí)答案文本框控件-1如何實(shí)現(xiàn)如下圖所示，完善電子郵件的例子。用戶(hù)單擊時(shí),郵箱的提示信息自動(dòng)清除提示電子郵件格式不對(duì)輸入的信息自動(dòng)被選中并高亮顯示文本框控件-2文本框?qū)ο蟮某Ｓ脤傩?、方法、事件使用文本框?qū)ο蟮南嚓P(guān)方法，實(shí)現(xiàn)選中效果名 稱(chēng)說(shuō) 明屬性value設(shè)置或獲取文本框的值方法focus( )獲得焦點(diǎn)select( )選中文本內(nèi)容，突出顯示輸入?yún)^(qū)域事件onFocus光標(biāo)進(jìn)入某個(gè)文本框腳本運(yùn)行onBlur文本框失去焦點(diǎn)腳本運(yùn)行onKeyPress當(dāng)一個(gè)鍵按下并釋放時(shí)去觸發(fā)一個(gè)事件文本框控件-3查看完整代碼 . function clearText( ) if (document.myf

9、orm.txtEmail.value=“請(qǐng)輸入真實(shí)的電子郵箱，我們將 發(fā)送激活密碼) document.myform.txtEmail.value= ; document.myform.txtEmail.style.color=red; *必填清空文本框的內(nèi)容修改文本框的顏色文本框獲得焦點(diǎn)就調(diào)用方法clearText( )小結(jié) 2編寫(xiě)如下圖所示，實(shí)現(xiàn)注冊(cè)表單的驗(yàn)證功能練習(xí)代碼練習(xí)答案每個(gè)文本框非空密碼和再次輸入的密碼必須相同年份必須是20打頭日期必須在1到31之間常見(jiàn)錯(cuò)誤-1function validateform( )if(sNameCheck() & passCheck()&bdaycheck() return true; else return false; 提交按鈕type=submit清空按鈕type=reset常見(jiàn)錯(cuò)誤-2function validateform( )if(sNameCheck() &