第八章表單驗(yàn)證和表單提交方式

1、2012 Inspur Group Inspur Education 表單驗(yàn)證和表單提交方式表單驗(yàn)證和表單提交方式 Inspur Education 2012 Inspur Group 本節(jié)目標(biāo)本節(jié)目標(biāo) u掌握表單驗(yàn)證常用方式掌握表單驗(yàn)證常用方式 u掌握掌握PostPost和和GetGet的不同的不同 Inspur Education 2012 Inspur Group 為什么需要表單驗(yàn)證為什么需要表單驗(yàn)證 3 服務(wù)器 IE 腳本在客戶端執(zhí)行，減輕服務(wù)器端的壓力腳本在客戶端執(zhí)行，減輕服務(wù)器端的壓力 客戶端客戶端 用戶輸入用戶輸入 客戶端客戶端 用戶輸入用戶輸入 客戶端客戶端 用戶輸入用戶輸入

2、發(fā)送請(qǐng)求發(fā)送請(qǐng)求 返回響應(yīng)返回響應(yīng) 發(fā)送請(qǐng)求發(fā)送請(qǐng)求 返回響應(yīng)返回響應(yīng) 發(fā)送請(qǐng)求發(fā)送請(qǐng)求 返回響應(yīng)返回響應(yīng) Inspur Education 2012 Inspur Group 表單驗(yàn)證的內(nèi)容表單驗(yàn)證的內(nèi)容-1-1 4 不能為空且不能為空且 不能有數(shù)字不能有數(shù)字 不能為空且不能為空且 不能有數(shù)字不能有數(shù)字 不能為空，且只不能為空，且只 能包括字母、數(shù)能包括字母、數(shù) 字和下劃線字符字和下劃線字符 密碼不能為空并且最密碼不能為空并且最 少為少為6位，還要求兩位，還要求兩 次輸入的密碼要一致次輸入的密碼要一致 Inspur Education 2012 Inspur Group 表單驗(yàn)證的內(nèi)容表單驗(yàn)

3、證的內(nèi)容-2-2 5 不能為空且包含不能為空且包含 字符字符和和. 只能二選一只能二選一 年月日不能年月日不能 為空，且不為空，且不 能超出其要能超出其要 求的范圍求的范圍 Inspur Education 2012 Inspur Group 表單驗(yàn)證的思路表單驗(yàn)證的思路-1-1 如何編寫(xiě)腳本驗(yàn)證表單？如何編寫(xiě)腳本驗(yàn)證表單？ 6 1、獲取表單元素的值（、獲取表單元素的值（String類(lèi)型），然后進(jìn)行判斷類(lèi)型），然后進(jìn)行判斷 2、觸發(fā)、觸發(fā)表單表單（FORM）的提交事件的提交事件（onSubmit） Inspur Education 2012 Inspur Group 表單驗(yàn)證的思路表單驗(yàn)證的思

4、路-2-2 u常用的常用的StringString對(duì)象對(duì)象 使用 var 語(yǔ)句 var newstr = 這是我的字符串 創(chuàng)建 String 對(duì)象 var newstr = new String(這是我的字符串 “) 調(diào)用方法和屬性 字符串對(duì)象.屬性名 字符串對(duì)象.方法名( ) 7 Inspur Education 2012 Inspur Group 表單驗(yàn)證的思路表單驗(yàn)證的思路-3-3 名 稱(chēng)說(shuō) 明 屬性 length獲取字符串字符的個(gè) 數(shù) 方法indexOf(“子字符串”，起始 位置) 查找子字符串的位置 charAt(index) 獲取位于指定索引位 置的字符 substring(ind

5、ex1,index2 ) 求子串 toLowerCase( )將字符串轉(zhuǎn)換成小寫(xiě) toUpperCase( )將字符串轉(zhuǎn)換成大寫(xiě) 8 nString對(duì)象常用的屬性和方法 語(yǔ)法：語(yǔ)法： indexOf(“查找的子字符串查找的子字符串”，查找的起始位置，查找的起始位置) 返回子字符串所在的位置；如果沒(méi)找到，返回返回子字符串所在的位置；如果沒(méi)找到，返回 1 例如：例如： var x var y=“abcdefg”; x=y.indexOf(“c” , 0 ); /返回結(jié)果為返回結(jié)果為2，起始位置是，起始位置是0 Inspur Education 2012 Inspur Group 表單驗(yàn)證的思路表單

6、驗(yàn)證的思路-4-4 9 檢查電子郵件檢查電子郵件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)！符號(hào)！); return false; if (strEmail.indexOf(.,0)=-1) alert(電子

7、郵件格式不正確電子郵件格式不正確n必須包含必須包含.符號(hào)！符號(hào)！); return false; return true; 返回結(jié)果返回結(jié)果-1表示表示 沒(méi)找到?jīng)]找到“”字符字符 獲取表單元素的值獲取表單元素的值 表單的提交事件表單的提交事件 Inspur Education 2012 Inspur Group 表單驗(yàn)證的思路表單驗(yàn)證的思路-5-1-5-1 10 Inspur Education 2012 Inspur Group 表單驗(yàn)證的思路表單驗(yàn)證的思路-5-2-5-2 11 function checkUserName() /驗(yàn)證用戶名驗(yàn)證用戶名 var fname = documen

8、t.myform.txtUser.value; if(fname.length != 0) for(i=0;ifname.length;i+) var ftext = fname.substring(i,i+1); if(ftext 0) alert(名字中包含數(shù)字名字中包含數(shù)字 n+請(qǐng)刪除名字中的數(shù)字和特殊字符請(qǐng)刪除名字中的數(shù)字和特殊字符); return false else alert(請(qǐng)輸入請(qǐng)輸入“名字名字”文本框文本框); document.myform.txtUser.focus(); return false return true; 驗(yàn)證用戶名不驗(yàn)證用戶名不 能包含數(shù)字能包含數(shù)

9、字 獲取表單元素的值獲取表單元素的值 Inspur Education 2012 Inspur Group 表單驗(yàn)證的思路表單驗(yàn)證的思路-5-3-5-3 12 function passCheck() /驗(yàn)證密碼驗(yàn)證密碼 var userpass = document.myform.txtPassword.value; if(userpass = ) alert(未輸入密碼未輸入密碼 n + 請(qǐng)輸入密碼請(qǐng)輸入密碼); document.myform.txtPassword.focus(); return false; if(userpass.length 6) alert(密碼必須多于或等于密

10、碼必須多于或等于 6 個(gè)字符。個(gè)字符。n); return false; return true; 驗(yàn)證密碼不少于驗(yàn)證密碼不少于6位位 獲取表單元素的值獲取表單元素的值 Inspur Education 2012 Inspur Group 表單驗(yàn)證的思路表單驗(yàn)證的思路-5-4-5-4 13 function validateform() if(checkUserName() else return false; 同時(shí)調(diào)用驗(yàn)證用戶同時(shí)調(diào)用驗(yàn)證用戶 名和驗(yàn)證密碼方法名和驗(yàn)證密碼方法 表單的提交事件表單的提交事件 觸發(fā)表單提交事件觸發(fā)表單提交事件 Inspur Education 2012 Insp

11、ur Group 小結(jié)小結(jié) 1 1 編寫(xiě)如下圖所示，實(shí)現(xiàn)登錄表單的驗(yàn)證功能編寫(xiě)如下圖所示，實(shí)現(xiàn)登錄表單的驗(yàn)證功能 14 Inspur Education 2012 Inspur Group 文本框控件文本框控件-1-1 如何實(shí)現(xiàn)如下圖所示，完善電子郵件的例子。如何實(shí)現(xiàn)如下圖所示，完善電子郵件的例子。 15 用戶單擊時(shí)用戶單擊時(shí),郵郵 箱的提示信息箱的提示信息 自動(dòng)清除自動(dòng)清除 提示電子郵提示電子郵 件格式不對(duì)件格式不對(duì) 輸入的信息輸入的信息 自動(dòng)被選中自動(dòng)被選中 并高亮顯示并高亮顯示 Inspur Education 2012 Inspur Group 文本框控件文本框控件-2-2 u文本框?qū)?/p>

12、象的常用屬性、方法、事件文本框?qū)ο蟮某Ｓ脤傩?、方法、事?名 稱(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è)事件 16 使用文本框?qū)ο蟮南嚓P(guān)方法，實(shí)現(xiàn)選中效果使用文本框?qū)ο蟮南嚓P(guān)方法，實(shí)現(xiàn)選中效果 Inspur Education 2012 Inspur Group 文本框控件文本框控件-3-3 17 . function clearText( ) if (document.myfo

13、rm.txtEmail.value=“請(qǐng)輸入真實(shí)的電子郵箱，我們將請(qǐng)輸入真實(shí)的電子郵箱，我們將 發(fā)送激活密碼發(fā)送激活密碼) document.myform.txtEmail.value= ; document.myform.txtEmail.style.color=red; *必填必填 清空文本框的內(nèi)容清空文本框的內(nèi)容 修改文本框的顏色修改文本框的顏色 文本框獲得焦點(diǎn)就調(diào)文本框獲得焦點(diǎn)就調(diào) 用方法用方法clearText( ) Inspur Education 2012 Inspur Group 小結(jié)小結(jié) 2 2 編寫(xiě)如下圖所示，實(shí)現(xiàn)注冊(cè)表單的驗(yàn)證功能編寫(xiě)如下圖所示，實(shí)現(xiàn)注冊(cè)表單的驗(yàn)證功能 1

14、8 每個(gè)文本每個(gè)文本 框非空框非空 密碼和再次輸入密碼和再次輸入 的密碼必須相同的密碼必須相同 年份必須年份必須 是是20打頭打頭 日期必須在日期必須在 1到到31之間之間 Inspur Education 2012 Inspur Group 常見(jiàn)錯(cuò)誤常見(jiàn)錯(cuò)誤-1-1 19 function validateform( ) if(sNameCheck() else return false; 提交按鈕提交按鈕 type=submit 清空按鈕清空按鈕 type=reset Inspur Education 2012 Inspur Group 常見(jiàn)錯(cuò)誤常見(jiàn)錯(cuò)誤-2-2 20 function v

15、alidateform( ) if(sNameCheck() else return false; onsubmit不是提交不是提交 按鈕的事件按鈕的事件 Inspur Education 2012 Inspur Group POSTPOST和和GETGET的區(qū)別的區(qū)別 uGetGet請(qǐng)求發(fā)送的數(shù)據(jù)和請(qǐng)求發(fā)送的數(shù)據(jù)和URLURL在一起以明文發(fā)送，會(huì)被保留在一起以明文發(fā)送，會(huì)被保留 在歷史記錄里。在歷史記錄里。 uPostPost請(qǐng)求發(fā)送的數(shù)據(jù)和請(qǐng)求發(fā)送的數(shù)據(jù)和URLURL分離。分離。 uGetGet傳送的數(shù)據(jù)量較小，不能大于傳送的數(shù)據(jù)量較小，不能大于2KB2KB。 uPostPost傳送的數(shù)據(jù)量較大，一般被默認(rèn)為不受限制。但理傳送的數(shù)據(jù)量較大，一般被默認(rèn)為不受限制。但理 論上，因服務(wù)器的不同而異論上，因服務(wù)器的不同而異. . Inspur Education 2012 Inspur Group AjaxAjax中中PostPost實(shí)現(xiàn)方式實(shí)現(xiàn)方式 u我們?cè)谝郧暗恼n程中學(xué)習(xí)了我們?cè)谝郧暗恼n程中學(xué)習(xí)了XMLHttpRequestXMLHttpRequest的的 open open和和sendsend方法。前面我們使用的是方法。前面我們使用的是GetGet方式方式 提交。如果要使用提交。如果