《基于新信息技術(shù)的JavaScript程序設(shè)計(jì)基礎(chǔ)》課件-第6章

項(xiàng)目6表單驗(yàn)證任務(wù)1先導(dǎo)知識(shí)：String對(duì)象、表單驗(yàn)證任務(wù)2電子郵箱的驗(yàn)證

任務(wù)1先導(dǎo)知識(shí)：String對(duì)象、表單驗(yàn)證

6.1.1JavaScript的String對(duì)象String對(duì)象是和原始字符串?dāng)?shù)據(jù)類型相對(duì)應(yīng)的JavaScript內(nèi)置對(duì)象，屬于JavaScript核心對(duì)象之一，主要提供諸多方法實(shí)現(xiàn)字符串檢查、抽取子串、字符串連接、字符串分隔等字符串相關(guān)操作。String對(duì)象擁有多個(gè)屬性和方法，其常用屬性和方法如表6.1所示。

6.1.2使用String對(duì)象方法操作字符串

使用String對(duì)象的方法來(lái)操作目標(biāo)對(duì)象并不操作對(duì)象本身，而只是返回包含操作結(jié)果的字符串。例如要設(shè)置改變某個(gè)字符串的值，必須要定義該字符串等于將對(duì)象實(shí)施某種操作的結(jié)果。

運(yùn)行程序，運(yùn)行的結(jié)果如圖6.1所示。

圖6.1計(jì)算字符串長(zhǎng)度程序運(yùn)行的結(jié)果

注意：String對(duì)象的toLowerCase()方法與toUpperCase()方法的語(yǔ)法相同、作用類似，不同點(diǎn)在于前者將目標(biāo)串中所有字符轉(zhuǎn)換為小寫(xiě)狀態(tài)并返回結(jié)果給新的字符串。在表單數(shù)據(jù)驗(yàn)證時(shí)，如果文本域不考慮字符的大小寫(xiě)，可先將其全部字符轉(zhuǎn)換為小寫(xiě)(當(dāng)然也可大寫(xiě))狀態(tài)再進(jìn)行相關(guān)驗(yàn)證操作。

6.1.3獲取目標(biāo)字符串長(zhǎng)度

字符串的長(zhǎng)度length作為String對(duì)象的唯一屬性，且為只讀屬性，它返回目標(biāo)字符串(包含字符串里面的空格)所包含的字符數(shù)。

運(yùn)行程序，運(yùn)行的結(jié)果如圖6.2所示。

圖6.2獲取目標(biāo)字符串的長(zhǎng)度

6.1.4查找字符串

在String對(duì)象中，可以通過(guò)indexOf()方法和lastIndexOf()方法查找一個(gè)子串在另一個(gè)字符串中的位置，返回的是從0開(kāi)始的下標(biāo)，如果不存在，則返回-1。這兩個(gè)方法的用法類似，不同的是indexOf()方法從前向后查找，查找第一個(gè)匹配的子串，而lastIndexOf()則相反，從后向前查找第一個(gè)匹配的子串所在下標(biāo)。

上述代碼定義了兩個(gè)字符串，在字符串str中查找指定字符出現(xiàn)的下標(biāo)，程序運(yùn)行的結(jié)果如圖6.3所示。

圖6.3查找子串運(yùn)行的結(jié)果

6.1.5截取字符串

在String對(duì)象中使用substring()方法可以進(jìn)行字符串的截取，其語(yǔ)法如下：

此方法代碼中，第一個(gè)參數(shù)為必填項(xiàng)，表示從當(dāng)前下標(biāo)位置開(kāi)始截取字符串，如果沒(méi)有第二個(gè)參數(shù)，則表示截取到字符串的末尾；如果有第二個(gè)參數(shù)，則第二個(gè)參數(shù)表示截取的結(jié)束下標(biāo)。str.substring(startIndex,endIndex)

6.1.6分隔字符串

String對(duì)象提供split()方法來(lái)進(jìn)行字符串的分隔操作。split()方法根據(jù)通過(guò)參數(shù)傳入的規(guī)則表達(dá)式或分隔符來(lái)分隔調(diào)用此方法的字符串。

如果傳入的是一個(gè)規(guī)則表達(dá)式regexpression，則該表達(dá)式由定義如何匹配的pattern和flags組成；如果傳入的是分隔符separator，則分隔符是一個(gè)字符串或字符，使用它將調(diào)用此方法的字符串分隔開(kāi)，num表示返回的子串?dāng)?shù)目，無(wú)此參數(shù)則默認(rèn)為返回所有子串。

6.1.7表單驗(yàn)證

無(wú)論是動(dòng)態(tài)網(wǎng)站，還是其他B/S結(jié)構(gòu)的系統(tǒng)都離不開(kāi)表單。表單作為客戶端向服務(wù)器端提交數(shù)據(jù)的主要載體，表單驗(yàn)證是避免提交的數(shù)據(jù)不合法的重要途徑。

客戶端驗(yàn)證實(shí)際是直接在已下載到本地的頁(yè)面中調(diào)用腳本來(lái)進(jìn)行驗(yàn)證，它不但能檢查用戶輸入的無(wú)效或者錯(cuò)誤數(shù)據(jù)，還能檢查用戶遺漏的必選項(xiàng)。

表單在提交的時(shí)候會(huì)觸發(fā)一個(gè)事件—submit事件，該事件會(huì)在提交的時(shí)候觸發(fā)，可以通過(guò)<form>標(biāo)簽的onsubmit屬性進(jìn)行綁定和設(shè)置，這樣在表單提交的時(shí)候可以執(zhí)行相關(guān)的事件函數(shù)，如圖6.4所示。

圖6.4表單驗(yàn)證

以常見(jiàn)的注冊(cè)表單為例，表單驗(yàn)證的內(nèi)容主要包括以下幾種類型：

(1)檢查表單元素是否為空(如登錄名不能為空)。

(2)驗(yàn)證是否為數(shù)字(如出生日期中的年月日必須為數(shù)字)。

(3)驗(yàn)證用戶輸入的電子郵箱地址是否有效(如電子郵箱地址中必須有“@”和“.”字符)。

(4)檢查用戶輸入的數(shù)據(jù)是否在某個(gè)范圍之內(nèi)(如出生日期的月份必須在1～12之間，日期必須在1～31之間)。

(5)驗(yàn)證用戶輸入的信息長(zhǎng)度是否足夠(如輸入的密碼必須大于等于6個(gè)字符)。

任務(wù)2電子郵箱的驗(yàn)證

6.2.1格式驗(yàn)證編寫(xiě)驗(yàn)證電子郵件的格式程序，其中電子郵箱不能為空，必須包含@符號(hào)和.符號(hào)。電子郵箱的格式效果圖如圖6.5所示。

圖6.5電子郵箱驗(yàn)證

驗(yàn)證電子郵件的格式程序進(jìn)行分析：

(1)獲取表單元素的值(String類型)，然后進(jìn)行判斷。

(2)表單FORM的提交事件onsubmit。

將上述的程序代碼保存為?.html文件并雙擊打開(kāi)，系統(tǒng)調(diào)用谷歌瀏覽器執(zhí)行，并輸入郵箱，當(dāng)郵箱格式錯(cuò)誤時(shí)，程序運(yùn)行的結(jié)果如圖6.6～圖6.8所示。圖6.6錯(cuò)誤提示1

圖6.7錯(cuò)誤提示2

圖6.8錯(cuò)誤提示3

6.2.2用戶名和密碼驗(yàn)證

編寫(xiě)程序?qū)τ脩裘兔艽a進(jìn)行驗(yàn)證，其中用戶名只能為數(shù)字或者字母，密碼為6～16位，如圖6.9所示。圖6.9用戶名和密碼驗(yàn)證

6.2.3多種表單控件驗(yàn)證

該表單中涵蓋了多種表單控件，程序運(yùn)行的結(jié)果如圖6.10所示。圖6.10多種表單控件驗(yàn)證

代碼中，對(duì)一個(gè)用戶注冊(cè)頁(yè)面進(jìn)行了表單數(shù)據(jù)提交的驗(yàn)證，在驗(yàn)證中，對(duì)用戶名，密碼以及重復(fù)密碼進(jìn)行了非空驗(yàn)證，