表單效驗(yàn)的重要性：

　　　　使用JavaScript可以十分便捷地進(jìn)行表單驗(yàn)證，它不但能檢查用戶輸入的無(wú)效或錯(cuò)誤的數(shù)據(jù)，還能檢查用戶遺漏的必選項(xiàng)，從而減輕服務(wù)器的壓力，避免服務(wù)器端的信息出現(xiàn)錯(cuò)誤。

表單選擇器

　　:input：匹配所有input，textarea，select和button元素；

　　:text：匹配所有單行文本框；

　　:password：匹配所有密碼框；

　　:radio：匹配所有單項(xiàng)按鈕；

　　:checkbox：匹配所有復(fù)選框；

　　:submit：匹配所有提交按鈕；

　　:image：匹配所有圖像域；

　　:reset：匹配所有重置按鈕；

　　:button：匹配所有按鈕；

　　:file：匹配所有文件域；

　　:hidden：匹配所有不可見(jiàn)元素，或者type為hidden的元素

　　　　

表單屬性過(guò)濾器

　　:enabled：匹配所有可用元素；

　　:disabled：匹配所有不可用元素；

　　:checked：匹配所有被選中元素（復(fù)選框，單項(xiàng)按鈕，select中的option）；

　　:selected：匹配所欲選中的option元素；

表單驗(yàn)證事件的方法

　　事件：

　　　　onblur：失去焦點(diǎn)，當(dāng)光標(biāo)離開(kāi)某個(gè)文本框是觸發(fā)；

　　　　onfocus：獲得焦點(diǎn)，當(dāng)光標(biāo)進(jìn)入某個(gè)文本框時(shí)觸發(fā)；

　　方法：

　　　　blur()：從文本域中移開(kāi)焦點(diǎn)；

　　　　focus()：在文本域中設(shè)置焦點(diǎn)，即獲得光標(biāo)；

　　　　select()：選取文本域中的內(nèi)容，突出顯示

　　　　

　　　　

正則表達(dá)式：

　　定義正則表達(dá)式：

　　　　普通方法：

　　　　　　var reg=/表達(dá)式/ 附加參數(shù)/

　　　　　　表達(dá)式：一個(gè)字符串代表了某種規(guī)則，其中可以使用某些特殊字符來(lái)代表特殊的規(guī)則

　　　　　　附加參數(shù)：用來(lái)擴(kuò)展表達(dá)式的含義；

　　　　　　參數(shù)：

　　　　　　　　g：代表可以進(jìn)行全局匹配；

　　　　　　　　i：代表不區(qū)分大小寫(xiě)匹配；

　　　　　　　　m：代表可以進(jìn)行多行匹配；

　　　　　　實(shí)例：

　　　　　　　　var reg=/white/;

　　　　　　　　var reg=/white/g;　　

　　　　構(gòu)造函數(shù)：

　　　　　　var reg=new RegExp("white");

　　　　　　var reg=new RegExp("white","g");

　　　　　　說(shuō)明：

　　　　　　　　普通方式中的表達(dá)式必須是一個(gè)常量字符串，而構(gòu)造函數(shù)中的表達(dá)式可以是常量字符串，也可以是一個(gè)JavaScript變量。

　　表達(dá)式的模式：

　　　　簡(jiǎn)答模式：

　　　　　　簡(jiǎn)答模式是指通過(guò)普通字符的組合來(lái)表達(dá)模式。

　　　　　　var reg=/china/;

　　　　　　var red=/abc8/;

　　　　復(fù)合模式：

　　　　　　復(fù)合模式是指定有通配符來(lái)表達(dá)的模式

　　　　　　var reg=/^w+$/;

　　　　　　RegExp對(duì)象：

　　　　　　　　exec()：檢索字符中是正則表達(dá)式的匹配，返回找到的值，并確定其位置；

　　　　　　　　test()：檢索字符串中指定的值，返回true過(guò)false;

　　　　　　　　　　 var str="my cat";

　　　　　　　　　　var reg=/cat/;

　　　　　　　　　　var result=reg.test(str);

　　　　　　String對(duì)象的方法：

　　　　　　　　match()：找到一個(gè)或多個(gè)正則表達(dá)式的匹配；

　　　　　　　　search()：檢索與正則表達(dá)式相匹配的值；

　　　　　　　　replace()：替換與正則表達(dá)式匹配的字符串；

　　　　　　　　split()：把字符串分割為字符串?dāng)?shù)組；

　　　　　　match()方法：

　　　　　　　　var str="my cat";

　　　　　　　　var reg=/cat/;

　　　　　　　　var result=str.match(reg);

　　　　　　replace()方法：

　　　　　　　　var str="my little white cat,is really a very lively cat";

　　　　　　　　var result=str.replace(/cat/,"dog");

　　　　　　　　var results=str.replace(/cat/g,"dog");

　　　　　　split()方法：

　　　　　　　　var str="red.blue,green,white";

　　　　　　　　var result=str.split(",");

　　　　　　　　var string="";

　　　　　　　　for(var i=0;i<result.length;i++){

　　　　　　　　　　string+=result[i]+"\n";

　　　　　　　　}

　　　　　　　　alert(string);

　　　　　　RegExp對(duì)象的屬性：

　　　　　　　　global：RegExp對(duì)象是否具有標(biāo)志g;

　　　　　　　　ignoreCase：RegExp對(duì)象是否具有標(biāo)志i;

　　　　　　　　multiline：RegExp對(duì)象是否具有標(biāo)志m;

正則表達(dá)式

　　　　正則表達(dá)式的常用符號(hào)：

　　　　　　　　

　　　　正則表達(dá)式的重要字符：

　　　　　　　　

　　　　　　正則表達(dá)式(),[],{}的區(qū)別：

　　　　　　　　　　()：為了提取匹配的字符串，表達(dá)式中有幾個(gè)()就有幾個(gè)相應(yīng)的匹配字符串；

　　　　　　　　　　[]：定義匹配的字符串；

　　　　　　　　　　{}：用來(lái)匹配長(zhǎng)度；

　　　　　　實(shí)例：

　　　　　　　　　　

　　　　　　　　　　

使用HTML5的方式驗(yàn)證表單

　　HTML5新增驗(yàn)證屬性

　　　　　　

　　　　placeholder：

　　　　　　　　

　　　　required：

　　　　　　　　

　　　　pattern：

　　　　　　　　

　　validity屬性：

　　　　　　

　　　　　　

　　　　　　

　　　　實(shí)例：

　　　　　　

轉(zhuǎn)載于:https://www.cnblogs.com/tinghao/p/11069444.html

總結(jié)

以上是生活随笔為你收集整理的第九章 表单效验的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。