Javascript經(jīng)典案例javascript表單驗證及事件（精）

第二講表單驗證及事件1.2.3.4.目錄String對象常用的String對象使用var語句varnewstr="這是我的字符串"創(chuàng)立String對象varnewstr=newString("這是我的字符串“)調(diào)用方法和屬性字符串對象.屬性名字符串對象.方法名()String對象名稱說明屬性length獲取字符串字符的個數(shù)方法indexOf(“子字符串”，起始位置)

查找子字符串的位置charAt(index)獲取位于指定索引位置的字符substring(index1,index2)截取兩個索引位置之間的字符串toLowerCase()將字符串轉(zhuǎn)換成小寫toUpperCase()將字符串轉(zhuǎn)換成大寫String對象常用的屬性和方法語法：indexOf(“查找的子字符串〞，查找的起始位置)返回子字符串所在的位置；如果沒找到，返回－1例如：varxvary=“abcdefg〞;x=y.indexOf(“c〞,0);//返回結(jié)果為2，起始位置是0數(shù)值判斷函數(shù)數(shù)值判斷函數(shù)功能：判斷變量的值是否為數(shù)值，“NaN〞代表“NotaNumber〞，假設(shè)返回值為true，那么表示自變量不是數(shù)值。語法：isNaN(測試值)數(shù)學(xué)(Math)對象數(shù)學(xué)(Math)對象方法：abs()返回某數(shù)的絕對值acos()返回某數(shù)的反余弦值(以弧度為單位)asin()返回某數(shù)的反正弦值(以弧度為單位)atan()返回某數(shù)的反正切值(以弧度為單位)ceil()返回大于或等于指定數(shù)的最小整數(shù)

floor()與ceil相反max()返回兩數(shù)間的較大值min()返回兩數(shù)間的較小值pow()返回m的n次方(其中,m為底,n為指數(shù))random()返回0和1之間的一個偽隨機數(shù)round()返回某數(shù)四舍五入之后的整數(shù)日期時間(Date)對象格式：

對象名=newDate([日期參數(shù)])舉例：today=newDate()//以當(dāng)日時間為對象初值。日期時間(Date)對象方法:getYear()返回年份值getMonth()返回月份值getDate()并返回日期getDay()返回星期幾getHours()返回小時數(shù)getMinutes()返回分鐘數(shù)getSeconds()返回秒數(shù)getTime()返回完整的時間setDate()改變Date對象的日期setHours()改變小時數(shù)setMinutes()改變分鐘數(shù)setMonth()改變月份setSeconds()改變秒數(shù)setTime()改變完整的時間setYear()改變年份setTimeout按照間隔時間(毫秒)來調(diào)用函數(shù)日期時間(Date)對象月份數(shù)為〔0---11〕日期數(shù)為〔1---31〕星期數(shù)為〔0----6〕小時數(shù)為〔0---23〕分鐘數(shù)為〔0---59〕秒數(shù)為〔0---59〕毫秒數(shù)為〔0---999〕Date對象做時鐘顯示<SCRIPTlanguage="javaScript">functiondisptime(){varnow=newDate();varhour=now.getHours();if(hour>=0&&hour<=12)document.write("<H2>上午好!</H2>")if(hour>12&&hour<=18)document.write("<H2>下午好!</H2>");if(hour>18&&hour<24)document.write("<H2>晚上好!</H2>");document.write("<H2>今天日期:"+now.getYear()+"年"+(now.getMonth()+1)+"月"+now.getDate()+"日</H2>");document.write("<H2>現(xiàn)在時間:"+now.getHours()+"點"+now.getMinutes()+"分</H2>");}</SCRIPT><BODYonload="disptime()">獲得當(dāng)前日期和時間獲得小時，即當(dāng)前是幾點月份數(shù)字0－11，注意＋1判斷上午、下午還是晚上Date對象做時鐘顯示上一頁PPT例如中時鐘不能動態(tài)改變，怎么辦？由于時間在不停地走，所以應(yīng)該每隔1秒調(diào)用顯示時間的方法。如何解決？使用setTimeout()方法每隔1秒調(diào)用顯示時間的方法setTimeout的用法：setTimeout〔“調(diào)用的函數(shù)〞,〞定時的時間〞〕例：varmyTime＝setTimeout(“disptime()〞,1000);每隔1000毫秒執(zhí)行函數(shù)disptime()一次Date對象做時鐘顯示<SCRIPTlanguage="JavaScript">functiondisptime(){vartime=newDate();//獲得當(dāng)前時間

varhour=time.getHours();//獲得小時、分鐘、秒

varminute=time.getMinutes();varsecond=time.getSeconds();=hour+":"+minute+":"+second+"";varmyTime=setTimeout("disptime()",1000);}</SCRIPT><BODYonLoad="disptime()"><FORMNAME="myform"><H2>當(dāng)前時間：

<INPUTname="myclock"type="text"value=""size="10"></H2></FORM></BODY>設(shè)置文本框的內(nèi)容為當(dāng)前時間設(shè)置定時器每隔1秒(1000毫秒),調(diào)用函數(shù)disptime()執(zhí)行小結(jié)2編寫如左圖所示，具有在網(wǎng)頁中指定位置顯示動態(tài)時鐘效果的頁面。自動動態(tài)變化的時鐘為什么需要表單驗證效勞器IE腳本在客戶端執(zhí)行，減輕效勞器端的壓力客戶端用戶輸入客戶端用戶輸入……客戶端用戶輸入……發(fā)送請求返回響應(yīng)發(fā)送請求返回響應(yīng)發(fā)送請求返回響應(yīng)表單驗證的內(nèi)容-1不能為空且不能有數(shù)字不能為空且不能有數(shù)字不能為空，且只能包括字母、數(shù)字和下劃線字符密碼不能為空并且最少為6位，還要求兩次輸入的密碼要一致表單驗證的內(nèi)容-2不能為空且包含字符@和.只能二選一年月日不能為空，且不能超出其要求的范圍表單驗證的思路如何編寫腳本驗證表單？1、獲取表單元素的值〔String類型〕，然后進行判斷2、觸發(fā)表單〔FORM〕的提交事件〔onSubmit〕表單驗證的思路檢查電子郵件email是否包含“@〞和〞.〞<SCRIPTLANGUAGE="JavaScript">functioncheckEmail(){varstrEmail=;if(strEmail.length==0){alert("電子郵件不能為空!");returnfalse;}if(strEmail.indexOf("@",0)==-1){alert("電子郵件格式不正確\n必須包含@符號！");returnfalse;}if(strEmail.indexOf(".",0)==-1){alert("電子郵件格式不正確\n必須包含.符號！");returnfalse;}returntrue;}</SCRIPT>……<FORMname=“myform〞method=“post〞action=“reg_success.htm〞onSubmit=“returncheckEmail()〞>……<INPUTname="registerButton"type="submit"id="registerButton"value="注冊">……返回結(jié)果-1表示沒找到“@〞字符獲取表單元素的值表單的提交事件表單驗證的思路表單驗證的思路<SCRIPTlanguage="JavaScript">functioncheckUserName(){//驗證用戶名varfname=;if(fname.length!=0){for(i=0;i<fname.length;i++){varftext=fname.substring(i,i+1);if(ftext<9||ftext>0){alert("名字中包含數(shù)字\n"+"請刪除名字中的數(shù)字和特殊字符");returnfalse}}}else{alert("請輸入“名字〞文本框");();returnfalse}returntrue;}……驗證用戶名不能包含數(shù)字獲取表單元素的值表單驗證的思路<SCRIPTlanguage="JavaScript">……functionpassCheck(){//驗證密碼varuserpass=;if(userpass==""){alert("未輸入密碼\n"+"請輸入密碼");();returnfalse;}if(userpass.length<6){alert("密碼必須多于或等于6個字符。\n");returnfalse;}returntrue;}……</SCRIPT>……驗證密碼不少于6位獲取表單元素的值表單驗證的思路<SCRIPTlanguage="JavaScript">……functionvalidateform(){if(checkUserName()&&passCheck())returntrue;elsereturnfalse;}</SCRIPT>……<FORMname="myform"onSubmit="returnvalidateform()“

method="post"action="reg_success.htm">……<INPUTname="registerButton"type="submit"id="registerButton"value="登錄">……同時調(diào)用驗證用戶名和驗證密碼方法表單的提交事件觸發(fā)表單提交事件小結(jié)1編寫如以下圖所示，實現(xiàn)登錄表單的驗證功能文本框控件如何實現(xiàn)如以下圖所示，完善電子郵件的例子。用戶單擊時,郵箱的提示信息自動去除提示電子郵件格式不對輸入的信息自動被選中并高亮顯示文本框控件文本框?qū)ο蟮某Ｓ脤傩浴⒎椒?、事件使用文本框?qū)ο蟮南嚓P(guān)方法，實現(xiàn)選中效果名稱說明屬性value設(shè)置或獲取文本框的值方法focus()獲得焦點select()選中文本內(nèi)容，突出顯示輸入?yún)^(qū)域事件onFocus光標進入某個文本框腳本運行onBlur文本框失去焦點腳本運行onKeyPress當(dāng)一個鍵按下并釋放時去觸發(fā)一個事件文本框控件<SCRIPTLANGUAGE="JavaScript">….functionclearText(){if(==“請輸入真實的電子郵箱，我們將發(fā)送激活密碼"){="";="red"; } }</SCRIPT>……<TDcolspan="2"><INPUTname="txtEmail"type="text"class="textBorder"id="txtEmail"value="請輸入真實的電子郵箱，我們將發(fā)送激活密碼"size="40"onFocus="clearText()"style="color:#666666;">*必填</TD>……清空文本框的內(nèi)容修改文本框的顏色文本框獲得焦點就調(diào)用方法clearText()小結(jié)2編寫如以下圖所示，實現(xiàn)注冊表單的驗證功能每個文本框非空密碼和再次輸入的密碼必須相同年份必須是20打頭日期必須在1到31之間常見錯誤-1<SCRIPTlanguage="javascript">functionvalidateform(){ if(sNameCheck()&&passCheck()&&bdaycheck()) returntrue; else returnfalse;……}</SCRIPT>……<inputtype="button"name="Button"value="登錄"><inputtype="button"name="Reset"value="重填">……提交按鈕type="submit"清空按鈕type="reset"常見錯誤-2<SCRIPTlanguage="javascript">functionvalidateform(){ if(sNameCheck()&&passCheck()&&bdaycheck()) returntrue; else returnfalse;……}</SCRIPT>……<inputtype="button"name="Button"value="登錄"onsubmit="returnvalidateform()">……onsubmit不是登錄按鈕的事件常見的事件事件動作事件動作Abort中止正在加載的對象Unload關(guān)閉當(dāng)前網(wǎng)頁Blur失去焦點MouseDown按下鼠標左鍵Focus獲取焦點MouseMove移動鼠標指針Change改變對象的值MouseOut鼠標指針離開某對象Click在對象上單擊鼠標MouseOver鼠標指針懸停于某對象之上DblClick在對象上雙擊鼠標MouseUp放開鼠標左鍵DrogDrop拖拽對象Move窗口被移動時Error加載文件或圖形時發(fā)生錯誤Resize窗口大小被改變KeyDown按下鍵盤上的任意鍵的瞬間Select選擇某對象KeyPress按下鍵盤上的任意鍵時Submit單擊表單上的Submit按鈕KeyUp某鍵被按下后彈起來的瞬間Reset單擊表單上的Reset按鈕Load瀏覽器讀入文件時如何使用圖片代替提交按鈕為了美觀，現(xiàn)把提交按鈕變成圖片，但仍然保持表單的驗證功能？如何實現(xiàn)？使用圖片的單擊事件。onClick="checkForm()"如何使用圖片代替提交按鈕根據(jù)上述分析和提供的素材頁面來實現(xiàn)表單驗證。素材頁面……<SCRIPTlanguage="JavaScript">functioncheckForm(){if(==0){ alert("用戶名不能為空！");();}}</SCRIPT>……<IMGsrc="images/regquick.jpg"onClick="checkForm()">檢驗是否為空單擊事件，調(diào)用表單驗證函數(shù)如何使用圖片代替提交按鈕能進行表單驗證，但即使是正確填寫了表單，也不能提交頁面〔點擊“注冊〞沒反映〕。如何使用圖片代替提交按鈕因為圖片不具備“提交〞按鈕的提交功能，所以需要人工調(diào)用提交方法－submit()。<SCRIPTlanguage="JavaScript">functioncheckForm(){if(==0) { alert("用戶名不能為空！"); (); } else{

(); }}</SCRIPT>查看源代碼如果表單輸入合法，那么提交表單制作回車切換輸入的效果輸入完畢后回車，默認會提交表單。頁面效果如何制作回車Tab切換效果？頁面效果keyCode代碼代碼說明代碼說明8BackSpace34Next9Tab35End12Clear36Home13Enter37Left16Shift_L38Up17Control_L39Right18Alt_L40Down20Caps_Lock46Delete33Prior65aA48090zZ制作回車切換輸入的效果1、使用鍵盤輸入事件onKeyDown事件2、檢查輸入是否是回車鍵－ASCII碼13，假設(shè)是那么將輸入改為Tab鍵－ASCII碼9<scriptlanguage="javascript"type="text/javascript">functionchangeFocus(){if(event.keyCode==13)

event.keyCode=9;}</script>……<INPUTname="sname"type="text"class="borderBox"onKeyDown="changeFocus()">……鍵盤按下，調(diào)用實現(xiàn)Tab效果的函數(shù)修改回車鍵為Tab鍵Event事件對象包含輸入鍵信息制作回車切換輸入的效果上述注冊頁面中，需要給每個文本框添加鍵盤按下事件，有沒有更簡單的方法？……<INPUTname="sname"type="text"class="borderBox"onKeyDown="changeFocus()">……<INPUTname="pass"type="password"class="borderBox"id="pass"size="25"onKeyDown="changeFocus()"><INPUTname="email"type="text"class="borderBox"……id="email"size="24"onKeyDown="changeFocus()">keyCode：得到在鍵盤上按下的鍵srcElement：

.type得到標簽類型

.tagname得到標簽名稱event對象制作回車切換輸入的效果通過給document對象添加鍵盤事件。<scriptlanguage="javascript">functionchangeFocus(){if(event.keyCode==13&&!='button'&&!='submit'…) event.keyCode=9;}//調(diào)用表單的onKeyDown事件</script>如果按鍵是回車鍵，并且控件類型不是提交、重置按鈕等按鈕，那么變?yōu)門ab切換document對象的onKeyDown事件，它將接收頁面中所有的鍵盤事件數(shù)組與級聯(lián)列表框預(yù)習(xí)檢查什么是省市級聯(lián)特效？在JavaScript中，如何定義一維數(shù)組Array？在JavaScript中，是否支持二維數(shù)組？本章任務(wù)演示例如1：頁面效果演示例如2：頁面效果制作通用的省市級聯(lián)效果制作學(xué)期、課程級聯(lián)效果會使用下拉列表框控件實現(xiàn)省市級聯(lián)功能會使用數(shù)組優(yōu)化省市級聯(lián)功能本章目標下拉列表框得到選擇項的索引〔從0開始〕表單名.列表名.selectedIndex;清空列表項表單名.列表名.options.length=0;創(chuàng)立選項Option1=newOption(選項名,選項值);增加選項表單名.列表名.options.add(Option1);實現(xiàn)簡單的省市級聯(lián)功能如何實現(xiàn)省市級聯(lián)的效果？頁面效果1、利用省份下拉框的選項改變事件onChange2、根據(jù)用戶選擇的省份，動態(tài)添加城市下拉框的值onChange選項/內(nèi)容改變事件動態(tài)添加城市選項Option實現(xiàn)簡單的省市級聯(lián)功能演示實現(xiàn)步驟：1、添加省份、城市下拉框〔演示素材〕省份下拉框名稱selProvince表單名稱myform省份下拉框選項option城市下拉框名稱selCity實現(xiàn)簡單的省市級聯(lián)功能演示實現(xiàn)步驟：2、查看生成的HTML代碼<FORMname="myform">......<SELECTname="selProvince">

<OPTION>--請選擇開戶帳號的省份--</OPTION><OPTIONvalue="四川省">四川省</OPTION><OPTIONvalue="山東省">山東省</OPTION><OPTIONvalue="湖北省">湖北省</OPTION></SELECT>......<SELECTname="selCity"><OPTION>--請選擇開戶帳號的城市--</OPTION></SELECT>......</FORM>多個選項構(gòu)成選項數(shù)組options選項Option城市下拉框暫時沒有具體的城市選項實現(xiàn)簡單的省市級聯(lián)功能演示實現(xiàn)步驟：3、添加動態(tài)改變城市選項的changeCity()函數(shù)functionchangeCity(){varprovince=;varnewOption1,newOption2;switch(province){ case"四川省": newOption1=newOption("成都市","chengdu"); newOption2=newOption("瀘州市","luzhou"); break;case"湖北省":……}document.myform.selCity.options.length=0;document.myform.selCity.options.add(newOption1);document.myform.selCity.options.add(newOption2);}2、根據(jù)用戶選擇的省份，動態(tài)創(chuàng)立城市下拉框選項1、獲取用戶選擇的省份3、去除原有的選項4、將選項添加到選項數(shù)組options查看源代碼實現(xiàn)簡單的省市級聯(lián)功能演示實現(xiàn)步驟：4、選擇下拉框的onChange事件，調(diào)用事件函數(shù)……<SELECTname="selProvince"onChange="changeCity()"><OPTION>--請選擇開戶帳號的省份--</OPTION><OPTIONvalue="四川省">四川省</OPTION><OPTIONvalue="山東省">山東省</OPTION><OPTIONvalue="湖北省">湖北省</OPTION></SELECT>……當(dāng)用戶選擇不同的省份時，將調(diào)用函數(shù)，改變城市下拉框的選項查看源代碼實現(xiàn)簡單的省市級聯(lián)功能小結(jié)下拉框控件SELECT：常用屬性lengthvalueoptionsselectedIndex常用事件onChangeonBluronFocus選項數(shù)組1、每個選項Option可以動態(tài)創(chuàng)立newOption(〞顯示內(nèi)容〞，“值〞)2、動態(tài)添加選項selCity.options.add(newOption1〕3、去除選項selCity.options.length=0讀取或設(shè)置被選項的索引號，第一個為0，其他類推選項改變事件小結(jié)1實現(xiàn)學(xué)期、課程的級聯(lián)學(xué)期第一學(xué)期第二學(xué)期第二學(xué)年各學(xué)期對應(yīng)課程第一學(xué)期：HTML、C#根底第二學(xué)期：Sqlserver、Ado.Net第二學(xué)年：A、XML數(shù)組對象格式：對象名=newArray([元素個數(shù)])或?qū)ο竺?newArray([值1[,值2,…]])例如：fruit=newArray(2)聲明了有2個元素的數(shù)組fruit=newArray(“蘋果〞,〞橘子〞)聲明了有2個數(shù)組元素的數(shù)組，并賦值。屬性：index：數(shù)組元素的索引值length：數(shù)組長度(數(shù)組元素個數(shù))。方法：join()：將數(shù)組內(nèi)的所有值組合成一個字符串，并用特定符號分開。toString()：以字符串來表示數(shù)組和數(shù)組值。reverse()：將數(shù)組內(nèi)元素的索引次序翻轉(zhuǎn)過來使用數(shù)組優(yōu)化省市級聯(lián)功能每個省實際上有很多城市、并且城市數(shù)量不等，有沒有更簡單、通用的方法？varnewOption1,newOption2;switch(province){case"四川省": newOption1=newOption("成都市","chengdu"); newOption2=newOption("瀘州市","luzhou"); break;case"湖北省": newOption1=newOption("武漢市","wuhan"); newOption2=newOption("襄樊市","xiangfan"); break;case"山東省": newOption1=newOption("青島市","qingdao"); newOption2=newOption("煙臺市","yantai");}如果有很多城市，就需要定義很多變量，編寫很多重復(fù)的代碼解決方法：使用數(shù)組！使用數(shù)組優(yōu)化省市級聯(lián)功能JavaScript中的數(shù)組用法：<SCRIPTLANGUAGE="JavaScript">varemp=newArray(3);emp[0]="RyanDias";emp[1]="GrahamBrowne";emp[2]="DavidGreene";emp.sort();document.write("排序結(jié)果是：<HR>");for(variinemp){document.write(emp[i]+"<BR>");}</SCRIPT>1、創(chuàng)立數(shù)組對象newArray(大小)2、為數(shù)組賦值。數(shù)組中可存放任意數(shù)據(jù)

3、調(diào)用數(shù)組的方法sort()進行排序

4、循環(huán)輸出，等同：for(vari=0;i<emp.length;i++)使用數(shù)組優(yōu)化省市級聯(lián)功能JavaScript中的數(shù)組用法：<SCRIPTLANGUAGE="JavaScript">varcityList=newArray();cityList[0]=['成都','綿陽','德陽','自貢',…,'瀘州'];cityList[1]=['濟南','青島',…'威海','日照'];cityList[2]=['武漢','宜昌',…'恩施','潛江'];document.write("<BR>四川省包括的城市是：<HR>");for(varjincityList[0]){document.write(cityList[0][j]+"<BR>");}</SCRIPT>1、創(chuàng)立數(shù)組，可以不指定大小2、為數(shù)組賦值。每個單元格可以是數(shù)組。JavaScript不支持二維數(shù)組

3、循環(huán)輸出.0-表示四川省的索引號，同理可以換為山東省－索引號1使用數(shù)組優(yōu)化省市級聯(lián)功能用數(shù)組優(yōu)化解決省市級聯(lián)問題：012一維數(shù)組:cityList數(shù)組索引號1下拉框索引號selectedIndex01231、用數(shù)組存放每個省份包含的城市2、根據(jù)用戶選擇的省份索引號，找到對應(yīng)的數(shù)組索引號3、根據(jù)對應(yīng)的數(shù)組內(nèi)容，添加城市選項到城市下拉框中cityList[0]cityList[1]cityList[2]使用數(shù)組優(yōu)化省市級聯(lián)功能用數(shù)組優(yōu)化解決省市級聯(lián)問題：functionchangeCity(){varcityList=newArray();cityList[0]=['成都','綿陽','德陽','自貢',…'瀘州'];cityList[1]=['濟南','青島',‘…'日照'];cityList[2]=['武漢','宜昌',…'潛江'];varpIndex=document.myform.selProvince.selectedIndex-1;varnewOption1;document.myform.selCity.options.length=0;for(varjincityList[pIndex]){newOption1=newOption(cityList[pIndex][j],cityList[pIndex][j]);document.myform.selCity.options.add(newOption1);}1、創(chuàng)立數(shù)組，存放各省份對應(yīng)城市2、根據(jù)用戶選擇的省份索引號，獲取對應(yīng)數(shù)組索引號

4、根據(jù)數(shù)組內(nèi)容創(chuàng)立選項，并添加到城市下拉框3、清空原下拉框內(nèi)容

小結(jié)2用數(shù)組優(yōu)化學(xué)期、選修課程的級聯(lián)。各學(xué)期對應(yīng)課程第一學(xué)期：HTML、Java、SqlServer根底、C#第二學(xué)期：JavaScript、SqlServer高級、ASP.Net第二學(xué)年：劉德華、李宇春、曾軼可使用文字下標的數(shù)組再次優(yōu)化使用索引號必須要求省份的排列順序和數(shù)組編號相同?！璫ityList[0]=['成都',...'瀘州'];cityList[1]=['濟南',…'日照'];cityList[2]=['武漢',…'潛江'];cityList[3]=['合肥',…‘亳州'];cityList[4]=['東莞',…'珠海'];cityList[5]=['桂林',…'賀州'];cityList[6