Javascript經(jīng)典案例javascript表單驗(yàn)證及事.ppt

《Javascript經(jīng)典案例javascript表單驗(yàn)證及事.ppt》由會員分享，可在線閱讀，更多相關(guān)《Javascript經(jīng)典案例javascript表單驗(yàn)證及事.ppt（65頁珍藏版）》請在裝配圖網(wǎng)上搜索。

第二講表單驗(yàn)證及事件 1 2 3 4 目錄 String對象 常用的String對象使用var語句varnewstr 這是我的字符串 創(chuàng)建String對象varnewstr newString 這是我的字符串 調(diào)用方法和屬性字符串對象 屬性名字符串對象 方法名 String對象 String對象常用的屬性和方法 語法 indexOf 查找的子字符串 查找的起始位置 返回子字符串所在的位置 如果沒找到 返回 1例如 varxvary abcdefg x y indexOf c 0 返回結(jié)果為2 起始位置是0 數(shù)值判斷函數(shù) 數(shù)值判斷函數(shù)功能 判斷變量的值是否為數(shù)值 NaN 代表 NotaNumber 若返回值為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之間的一個偽隨機(jī)數(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對象做時鐘顯示 functiondisptime varnow newDate varhour now getHours if hour 0 獲得當(dāng)前日期和時間 獲得小時 即當(dāng)前是幾點(diǎn) 月份數(shù)字0 11 注意 1 Date對象做時鐘顯示 上一頁P(yáng)PT示例中時鐘不能動態(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對象做時鐘顯示 functiondisptime vartime newDate 獲得當(dāng)前時間varhour time getHours 獲得小時 分鐘 秒varminute time getMinutes varsecond time getSeconds document myform myclock value hour minute second varmyTime setTimeout disptime 1000 當(dāng)前時間 設(shè)置文本框的內(nèi)容為當(dāng)前時間 設(shè)置定時器每隔1秒 1000毫秒 調(diào)用函數(shù)disptime 執(zhí)行 小結(jié)2 編寫如左圖所示 具有在網(wǎng)頁中指定位置顯示動態(tài)時鐘效果的頁面 自動動態(tài)變化的時鐘 為什么需要表單驗(yàn)證 服務(wù)器 IE 腳本在客戶端執(zhí)行 減輕服務(wù)器端的壓力 發(fā)送請求 返回響應(yīng) 發(fā)送請求 返回響應(yīng) 發(fā)送請求 返回響應(yīng) 表單驗(yàn)證的內(nèi)容 1 不能為空且不能有數(shù)字 不能為空且不能有數(shù)字 不能為空 且只能包括字母 數(shù)字和下劃線字符 表單驗(yàn)證的內(nèi)容 2 不能為空且包含字符 和 只能二選一 年月日不能為空 且不能超出其要求的范圍 表單驗(yàn)證的思路 如何編寫腳本驗(yàn)證表單 1 獲取表單元素的值 String類型 然后進(jìn)行判斷 2 觸發(fā)表單 FORM 的提交事件 onSubmit 表單驗(yàn)證的思路 檢查電子郵件email是否包含 和 functioncheckEmail varstrEmail document myform txtEmail value if strEmail length 0 alert 電子郵件不能為空 returnfalse if strEmail indexOf 0 1 alert 電子郵件格式不正確 n必須包含 符號 returnfalse if strEmail indexOf 0 1 alert 電子郵件格式不正確 n必須包含 符號 returnfalse returntrue 返回結(jié)果 1表示沒找到 字符 獲取表單元素的值 表單的提交事件 表單驗(yàn)證的思路 表單驗(yàn)證的思路 functioncheckUserName 驗(yàn)證用戶名varfname document myform txtUser value if fname length 0 for i 0 i0 alert 名字中包含數(shù)字 n 請刪除名字中的數(shù)字和特殊字符 returnfalse else alert 請輸入 名字 文本框 document myform txtUser focus returnfalse returntrue 驗(yàn)證用戶名不能包含數(shù)字 獲取表單元素的值 表單驗(yàn)證的思路 functionpassCheck 驗(yàn)證密碼varuserpass document myform txtPassword value if userpass alert 未輸入密碼 n 請輸入密碼 document myform txtPassword focus returnfalse if userpass length 驗(yàn)證密碼不少于6位 獲取表單元素的值 表單驗(yàn)證的思路 functionvalidateform if checkUserName 同時調(diào)用驗(yàn)證用戶名和驗(yàn)證密碼方法 表單的提交事件 觸發(fā)表單提交事件 小結(jié)1 編寫如下圖所示 實(shí)現(xiàn)登錄表單的驗(yàn)證功能 文本框控件 如何實(shí)現(xiàn)如下圖所示 完善電子郵件的例子 用戶單擊時 郵箱的提示信息自動清除 提示電子郵件格式不對 輸入的信息自動被選中并高亮顯示 文本框控件 文本框?qū)ο蟮某Ｓ脤傩?方法 事件 使用文本框?qū)ο蟮南嚓P(guān)方法 實(shí)現(xiàn)選中效果 文本框控件 functionclearText if document myform txtEmail value 請輸入真實(shí)的電子郵箱 我們將發(fā)送激活密碼 document myform txtEmail value document myform txtEmail style color red 必填 清空文本框的內(nèi)容 修改文本框的顏色 文本框獲得焦點(diǎn)就調(diào)用方法clearText 小結(jié)2 編寫如下圖所示 實(shí)現(xiàn)注冊表單的驗(yàn)證功能 年份必須是20打頭 日期必須在1到31之間 常見錯誤 1 functionvalidateform if sNameCheck 提交按鈕type submit 清空按鈕type reset 常見錯誤 2 functionvalidateform if sNameCheck onsubmit不是登錄按鈕的事件 常見的事件 如何使用圖片代替提交按鈕 為了美觀 現(xiàn)把提交按鈕變成圖片 但仍然保持表單的驗(yàn)證功能 如何實(shí)現(xiàn) 使用圖片的單擊事件 onClick checkForm 如何使用圖片代替提交按鈕 根據(jù)上述分析和提供的素材頁面來實(shí)現(xiàn)表單驗(yàn)證 素材頁面 functioncheckForm if document myform txtUserName value length 0 alert 用戶名不能為空 document myform txtUserName focus 檢驗(yàn)是否為空 單擊事件 調(diào)用表單驗(yàn)證函數(shù) 如何使用圖片代替提交按鈕 能進(jìn)行表單驗(yàn)證 但即使是正確填寫了表單 也不能提交頁面 點(diǎn)擊 注冊 沒反映 如何使用圖片代替提交按鈕 因?yàn)閳D片不具備 提交 按鈕的提交功能 所以需要人工調(diào)用提交方法 submit functioncheckForm if document myform txtUserName value length 0 alert 用戶名不能為空 document myform txtUserName focus else document myform submit 查看源代碼 如果表單輸入合法 則提交表單 制作回車切換輸入的效果 輸入完畢后回車 默認(rèn)會提交表單 頁面效果如何制作回車Tab切換效果 頁面效果 keyCode代碼 制作回車切換輸入的效果 1 使用鍵盤輸入事件onKeyDown事件2 檢查輸入是否是回車鍵 ASCII碼13 若是則將輸入改為Tab鍵 ASCII碼9 functionchangeFocus if event keyCode 13 event keyCode 9 鍵盤按下 調(diào)用實(shí)現(xiàn)Tab效果的函數(shù) 修改回車鍵為Tab鍵 Event事件對象包含輸入鍵信息 制作回車切換輸入的效果 上述注冊頁面中 需要給每個文本框添加鍵盤按下事件 有沒有更簡單的辦法 keyCode 得到在鍵盤上按下的鍵srcElement type得到標(biāo)簽類型 tagname得到標(biāo)簽名稱 event對象 制作回車切換輸入的效果 通過給document對象添加鍵盤事件 functionchangeFocus if event keyCode 13 調(diào)用表單的onKeyDown事件 如果按鍵是回車鍵 并且控件類型不是提交 重置按鈕等按鈕 則變?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)效果 會使用下拉列表框控件實(shí)現(xiàn)省市級聯(lián)功能會使用數(shù)組優(yōu)化省市級聯(lián)功能 本章目標(biāo) 下拉列表框 得到選擇項的索引 從0開始 表單名 列表名 selectedIndex 清空列表項表單名 列表名 options length 0 創(chuàng)建選項Option1 newOption 選項名 選項值 增加選項表單名 列表名 options add Option1 實(shí)現(xiàn)簡單的省市級聯(lián)功能 如何實(shí)現(xiàn)省市級聯(lián)的效果 頁面效果 1 利用省份下拉框的選項改變事件onChange2 根據(jù)用戶選擇的省份 動態(tài)添加城市下拉框的值 onChange選項 內(nèi)容改變事件 動態(tài)添加城市選項Option 實(shí)現(xiàn)簡單的省市級聯(lián)功能 演示實(shí)現(xiàn)步驟 1 添加省份 城市下拉框 演示素材 省份下拉框名稱selProvince 表單名稱myform 省份下拉框選項option 城市下拉框名稱selCity 實(shí)現(xiàn)簡單的省市級聯(lián)功能 演示實(shí)現(xiàn)步驟 2 查看生成的HTML代碼 請選擇開戶帳號的省份 四川省山東省湖北省 請選擇開戶帳號的城市 多個選項構(gòu)成選項數(shù)組options 選項Option 城市下拉框暫時沒有具體的城市選項 實(shí)現(xiàn)簡單的省市級聯(lián)功能 演示實(shí)現(xiàn)步驟 3 添加動態(tài)改變城市選項的changeCity 函數(shù) functionchangeCity varprovince document myform selProvince value 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 查看源代碼 實(shí)現(xiàn)簡單的省市級聯(lián)功能 演示實(shí)現(xiàn)步驟 4 選擇下拉框的onChange事件 調(diào)用事件函數(shù) 請選擇開戶帳號的省份 四川省山東省湖北省 當(dāng)用戶選擇不同的省份時 將調(diào)用函數(shù) 改變城市下拉框的選項 查看源代碼 實(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 實(shí)現(xiàn)學(xué)期 課程的級聯(lián) 學(xué)期第一學(xué)期第二學(xué)期第二學(xué)年 各學(xué)期對應(yīng)課程第一學(xué)期 HTML C 基礎(chǔ)第二學(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í)際上有很多城市 并且城市數(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ù)組用法 varemp newArray 3 emp 0 RyanDias emp 1 GrahamBrowne emp 2 DavidGreene emp sort document write 排序結(jié)果是 for variinemp document write emp i 1 創(chuàng)建數(shù)組對象newArray 大小 2 為數(shù)組賦值 數(shù)組中可存放任意數(shù)據(jù) 3 調(diào)用數(shù)組的方法sort 進(jìn)行排序 4 循環(huán)輸出 等同 for vari 0 i emp length i 使用數(shù)組優(yōu)化省市級聯(lián)功能 JavaScript中的數(shù)組用法 varcityList newArray cityList 0 成都 綿陽 德陽 自貢 瀘州 cityList 1 濟(jì)南 青島 威海 日照 cityList 2 武漢 宜昌 恩施 潛江 document write 四川省包括的城市是 for varjincityList 0 document write cityList 0 j 1 創(chuàng)建數(shù)組 可以不指定大小 2 為數(shù)組賦值 每個單元格可以是數(shù)組 JavaScript不支持二維數(shù)組 3 循環(huán)輸出 0 表示四川省的索引號 同理可以換為山東省 索引號1 使用數(shù)組優(yōu)化省市級聯(lián)功能 用數(shù)組優(yōu)化解決省市級聯(lián)問題 一維數(shù)組 cityList 數(shù)組索引號 1 下拉框索引號selectedIndex 1 用數(shù)組存放每個省份包含的城市 2 根據(jù)用戶選擇的省份索引號 找到對應(yīng)的數(shù)組索引號 3 根據(jù)對應(yīng)的數(shù)組內(nèi)容 添加城市選項到城市下拉框中 使用數(shù)組優(yōu)化省市級聯(lián)功能 用數(shù)組優(yōu)化解決省市級聯(lián)問題 functionchangeCity varcityList newArray cityList 0 成都 綿陽 德陽 自貢 瀘州 cityList 1 濟(jì)南 青島 日照 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基礎(chǔ) C 第二學(xué)期 JavaScript SqlServer高級 ASP Net第二學(xué)年 劉德華 李宇春 曾軼可 使用文字下標(biāo)的數(shù)組再次優(yōu)化 使用索引號必須要求省份的排列順序和數(shù)組編號相同 cityList 0 成都 瀘州 cityList 1 濟(jì)南 日照 cityList 2 武漢 潛江 cityList 3 合肥 亳州 cityList 4 東莞 珠海 cityList 5 桂林 賀州 cityList 6 貴陽 遵義 四川省山東省湖北省安徽省廣東省廣西省貴州省 當(dāng)30多個省份羅列在一起時容易搞錯對應(yīng)關(guān)系 有沒有更直觀的辦法 使用文字下標(biāo)的數(shù)組再次優(yōu)化 1 JavaScript中的數(shù)組下標(biāo)可以采用標(biāo)識符代替 例如 cityList 山東省 濟(jì)南 青島 淄博 棗莊 東營 煙臺 濰坊 濟(jì)寧 泰安 威海 日照 2 可以根據(jù)用戶選擇的value值 與數(shù)組下標(biāo)標(biāo)識進(jìn)行比較 從而找出該省包括的城市 用文字下標(biāo)的數(shù)組優(yōu)化省市級聯(lián)菜單 使用文字下標(biāo)的數(shù)組再次優(yōu)化 functionchangeCity varcityList newArray cityList 四川省 成都 綿陽 瀘州 cityList 山東省 濟(jì)南 青島 日照 cityList 湖北省 武漢 宜昌 潛江 varpIndex document myform selProvince value varnewOption1 document myform selCity options length 0 for varjincityList pIndex newOption1 newOption cityList pIndex j cityList pIndex j document myform selCity options add newOption1 數(shù)組下標(biāo)采用文字標(biāo)識符代替 根據(jù)省份下拉框的值 獲取對應(yīng)數(shù)組的索引標(biāo)識 數(shù)組的讀取和數(shù)字索引方式相同 常見錯誤 varBookinfo newArray 2 4 Bookinfo 0 0 6 5333 0575 3 Bookinfo 0 1 Ajax高級編程 Bookinfo 0 2 鐵手 Bookinfo 0 3 人民郵電出版社 Bookinfo 1 0 6 5333 0575 8 Bookinfo 2 1 精通正則表達(dá)式 Bookinfo 3 2 余晟 Bookinfo 4 3 電子工業(yè)出版社 JavaScript中沒有二維或二維以上數(shù)組 小結(jié)3 數(shù)組下標(biāo)采用文字標(biāo)識的方式 實(shí)現(xiàn)學(xué)期 課程的級聯(lián) 各學(xué)期對應(yīng)課程第一學(xué)期 HTML Java SqlServer基礎(chǔ) C 第二學(xué)期 JavaScript SqlServer高級 ASP Net第二學(xué)年 劉德華 李宇春 曾軼可 Thankyou