JQuery中的表單驗證及相關的內容

  前  言

JRedu

　Android應用開發中，常常要用到表單。既然用到了表單，那就不可避免的要用到表單的驗證。可是，在提交表單時，可是，並非，每次提交的表單內容都是正確的，若是 每次都將表單的內容，所有一塊兒提交給後臺， 會形成系統運行效率低下。所以，在提交表單前，會提早對錶單內容進行驗證。這樣一來，可以大大提升運行效率。也所以，這種方法打受歡迎。那如今，本章就會進行詳細的介紹。

1 表單驗證及相關內容的基礎知識

1.1 表單驗證須要的相關知識

　　① 正則表達式

      ②web儲存

　　③iframe框架(瞭解)

 在進行表單驗證時的主要過程：

① 先是，正則表達式對輸入框的內容進行簡單的驗證，判斷其是否符合要求；

②在符合正則表達式要求的前提下，將數據用web儲存方式進行儲存。

2   正則表達式 

正則表達式：)描述了一種字符串匹配的模式（pattern），能夠用來檢查一個串是否含有某種子串、將匹配的子串替換或者從某個串中取出符合某個條件的子串等。

即，對錶單輸入框的輸入內容進行驗證，判斷其是否符合正則表達式的要求，以此來判斷是否將數據傳遞。

 

 
         一、正則表達式包括兩部分
             ① 定義正則表達式的規則    ② 正則表達式的模式(i/g/m);
             
         二、聲明正則表達式：
             ① 字面量聲明： var reg = /表達式規則/表達式模式；
                    eg： var reg = /white/g；
             ②使用new關鍵字：  var reg =new RegExp ("表達式規則","表達式模式")
                 eg： var reg = new RegExp("white","g")
         三、正則表達式的經常使用模式：
             ① g：全局匹配：不加g默認爲非全局匹配，即只匹配第一個符合要求的字符串。
                 "www".replace(/w/,"#"):  ->#ww
                 "www".replace(/w/g,"#"):  ->###
                 
             ② i：忽略大小寫：不加i，默認要求匹配大小寫    
                 "aAa".replace(/A/,"#"):  ->a#a
                 "aAa".replace(/A/i,"#"):  ->#Aa
                 "aAa".replace(/A/gi,"#"):  ->### 
            ③ m：多行匹配模式：不帶m，則一個字符串只有一個開頭、結尾。帶m後，若是字符串分爲多行，則每行有一個開頭結尾。
                 `abc                            `#bc
                  abc`.replace(/^a/g,"#")  ->    abc`
                  `abc                            `#bc
                  abc`.replace(/^a/g,"#")  ->    #bc`

 

tips:如何寫多行字符串：
　　①普通字符串：插入\n，表示換行。"abc\nabc"
　　②ES6中，容許使用反引號 `包裹字符串。反引號包裹的字符串中，會保留空格與回車。


2.四、正則表達式的經常使用方法
　　①.text():檢測一個字符串是否符合正則表達式的驗證：返回true/false。
　　　　eg: /white/.text("whitewhitewhite"); -> true;
　　② exec():檢測一個字符串是否符合正則表達式的驗證。若是驗證成功，返回結果數組，驗證失敗，返回null。
　　結果數組中：
　　　　index屬性：表示從字符串的第幾個字符開始符合正則要求
　　　　input屬性：返回完整的被檢索的字符串
　　　　下標第0個：表示符合整個正則表達式的那部分字符串
　　　　下標第一個到第n個：表示符合正則的第一個到第n 個字表達式的部分，子表達式，就是正則中的()
　　　　也就是，正則中有幾個()就有幾個子表達式，結果數組中就有幾個下標。
　　　　eg: /12(3)(4)5/.exec.("aaa12345");
　　　　　　->[
　　　　　　　　0:"12345",
　　　　　　　　1:"3",
　　　　　　　　2:"4"，
　　　　　　　　index：3，
　　　　　　　　input："aaa12345"，
　　　　　　　　length:3
　　　　　　]

 

2.五、如下列出經常使用的字符的轉義序列

 

 

字符	描述
\cx	匹配由x指明的控制字符。例如， \cM 匹配一個 Control-M 或回車符。x 的值必須爲 A-Z 或 a-z 之一。不然，將 c 視爲一個原義的 'c' 字符。
\f	匹配一個換頁符。等價於 \x0c 和 \cL。
\n	匹配一個換行符。等價於 \x0a 和 \cJ。
\r	匹配一個回車符。等價於 \x0d 和 \cM。
\s	匹配任何空白字符，包括空格、製表符、換頁符等等。等價於 [ \f\n\r\t\v]。
\S	匹配任何非空白字符。等價於 [^ \f\n\r\t\v]。
\t	匹配一個製表符。等價於 \x09 和 \cI。
\v	匹配一個垂直製表符。等價於 \x0b 和 \cK。

特別字符	描述
$	匹配輸入字符串的結尾位置。若是設置了 RegExp 對象的 Multiline 屬性，則 $ 也匹配 '\n' 或 '\r'。要匹配 $ 字符自己，請使用 \$。
( )	標記一個子表達式的開始和結束位置。子表達式能夠獲取供之後使用。要匹配這些字符，請使用 \( 和 \)。
*	匹配前面的子表達式零次或屢次。要匹配 * 字符，請使用 \*。
+	匹配前面的子表達式一次或屢次。要匹配 + 字符，請使用 \+。
.	匹配除換行符 \n 以外的任何單字符。要匹配 . ，請使用 \. 。
[	標記一箇中括號表達式的開始。要匹配 [，請使用 \[。
?	匹配前面的子表達式零次或一次，或指明一個非貪婪限定符。要匹配 ? 字符，請使用 \?。
\	將下一個字符標記爲或特殊字符、或原義字符、或向後引用、或八進制轉義符。例如， 'n' 匹配字符 'n'。'\n' 匹配換行符。序列 '\\' 匹配 "\"，而 '\(' 則匹配 "("。
^	匹配輸入字符串的開始位置，除非在方括號表達式中使用，此時它表示不接受該字符集合。要匹配 ^ 字符自己，請使用 \^。
{	標記限定符表達式的開始。要匹配 {，請使用 \{。
|	指明兩項之間的一個選擇。要匹配 |，請使用 \|。

 

 

3web儲存

 

HTML5新增web存儲方式。

主要兩種：
　　localStorage 和 sessionStorage ，兩個對象在使用方式上沒有任何區別，惟一的不一樣點是存儲數據的有效時間
　　　　① localStorage：除非手動刪除，不然數據將一直保存在本地文件
　　　　② sessionStorage：當瀏覽器關閉時， sessionStorage就被清空；

在使用 web 存儲前,應檢查瀏覽器是否支持 localStorage 和sessionStorage:

if(typeof(Storage)!="undefined")
{
// 是的! 支持 localStorage sessionStorage 對象!
// 一些代碼.....
} else {
// 抱歉! 不支持 web 存儲。
}

Storage的數據存儲
一、Storage能夠像普通對象同樣，使用.追加或讀取最新的數據。
　　eg：localStorag.name =" 張三"；

二、經常使用的函數：
保存數據：localStorage.setItem("key","value");
讀取數據：localStorage.getItem("key");
刪除單個數據：localStorage.removeItem("key");
刪除全部數據：localStorage.clear();
獲得某個索引的key：localStorage.key(index);

一些須要注意的地方：

①在使用localStorage() 或 sessionStorage()儲存數據時，要先判斷其儲存數據的鍵是否存在；

　　eg：localStorage.keys = localStorage.keys?localStorage.keys:"[]";

②在每次從localStorage() 或 sessionStorage()中取數據時，要先JSON.parse();方法將數據轉爲數組

③在使用完數據後 用要JSON.stringify()方法將數組轉爲字符串，不然的話，localStorage() 或 sessionStorage()中的數據不會更新，下次再使用時，裏面的數據仍是以前的數據。

 

 

 4  iframe框架

 

<iframe id="ifram"src="http://www.baidu.com"></iframe>

在頁面中，劃分出一部分區域，用於顯示，SRC屬性連接的頁面；

改變SRC屬性，可跳轉不一樣的頁面。