表單驗證

表單選擇器。

//匹配表單中全部的  input selet button 元素
$("form :input");

//匹配全部的單行文本框
$("form :text");

//匹配全部的密碼框
$("form :password");

//匹配全部的單選按鈕
$("form :radio");

//匹配全部複選框
$("form :checkbox");

//匹配全部的提交按鈕
$("form :submit");

//匹配全部圖像按鈕
$("form :image");

//匹配全部重置按鈕
$("form :reset");

//匹配全部按鈕
$("form :button");

//匹配全部文件域
$("form :file");

//匹配全部不可見元素
$("form :hidden");

 

表單屬性選擇器

 

//匹配全部可用的元素
$("form :enabled");

//匹配全部不可用元素
$("form :disabled");

//匹配全部被選中元素
$("form :checkbox");

//匹配全部選中元素
$("form :selected");
 

表單驗證方法

//失去焦點方法                
$("form").blur();

//得到焦點方法
$("form").focus();

//選取文本內容
$("form").select();
 

 正則表達式

正則表達式是一個描述字符模式的對象，它是由一些特殊的符號組成的，這些符號在 SQLServer中學過的通配符同樣，其組成的字符模式用來匹配各類表達式。

 

RegExp 對象是 Regular Expression的縮寫，它是對字符串執行模式匹配的強大工具

 

一、 定義正則表達式

定義正則表達式兩種構造形式，一種是普通方式，另外一種是構造函數的方式。

//普通方式
//表達式：一個字符串表明了某種規則，其中能夠使用某些特殊字符來表明特殊的規則。
//附加參數：用來擴展表達式的含義 主要參數有三個  g i  m
var reg = /表達式/附加參數;   //語法
var reg = /white/;           //也能夠不加附加參數
var reg = /white/g;         // g : 表明能夠進行全局匹配
var reg = /white/i;         // i : 表明不區分大小寫匹配
var reg = /white/m;         // m : 表明能夠進行多行匹配

//構造函數方式
// 表達式與 附加參數 和 普通方式含義相同
var ret = new RegExp("表達式","附加參數"); //語法
var ret = new RegExp("white","g");
var ret = new RegExp("white","i");
var ret = new RegExp("white","m");

// 普通方式中的表達式必須是一個常量字符串
// 構造函數中的表達式能夠是常量字符串，也能夠是一個JavaScript變量。

 

二、 表達式的模式

不管使用哪一種方式定義正則表達式，都須要規定表達式的模式。

從規範上講，表達式的模式分爲簡單模式和複合模式

//簡單模式
//簡單模式是指經過普通字符的組合來表達的模式
var reg = /china/;
var reg = /abc8/;

//複合模式
//複合模式是指含有通配符來表達的模式，相似於SQL通配符
var reg = /^\w+$/;

 

 

三、 RegExp對象

//exec();檢索字符中是正則表達式的匹配，返回找到的值，並肯定其位置。

//test();檢索字符串中指定的值，返回 true or flase
//用於檢測一個字符串是否匹配某個模式
//語法：  正則表達式對象.test(字符串);
var str = "my cat";
var reg = /cat/;
var end = reg.test(str); //返回true

 

四、 String對象的方法

JavaScript除了支持RegExp對象的正則表達式，還支持String 對象的正則表達式方法。

String對象定義了使用正則表達式來執行強大的模式匹配和文本檢索與替換函數的方法。

 

//match(); 找到一個或多個正則表達式的匹配
//此方法能夠在字符串內檢索指定的值，找到一個或多個正則表達式的匹配
//相似indexOf()方法，可是indexOf()返回字符串的位置，而不是自指定的值。
//語法： 字符串對象.macth( searchString or regexpObject );
//searchString 是要檢索的字符串的值，regexpObject 是規定要匹配的RegExp對象

var str = "my cat";
var ret = /cat/;
var end = str.match(reg);  //返回值爲 cat

//search(); 檢索與正則表達式相匹配的值

//replace();替換與正則表達式匹配的字符串
//此方法用於在字符串中用一些字符串替換另外一些字符，或替換一個與正則表達式匹配的字符串
//語法 ：字符串對象.replace( RegExp對象或字符串，"替換的字符串");

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");  //全局匹配 g

// result : My little white dog,is really a very lively cat
// results: My little white dog,is really a very lively dog

//split(); 把字符串分割成字符串數組
//此方法將字符串分割成一系列子串並經過一個數組將這一系列子串返回
// 語法 字符串對象.split(分隔符,n);
var str = "red,blue,green,white";
var result = str.split(",");
var string = "";
for(var i=0;i<result.length;i++){
    string =+= result[i]+"\n";
}

五、 RegExp對象的屬性

 

一、  global
此屬性用於返回正則表達式是否具備標誌 g，它聲明瞭給定的正則表達式是否執行全局匹配。

二、 ignoreCase
此屬性用於返回正則表達式是否具備標誌 i, 它聲明瞭給定的正則表達式是否執行忽略大小寫的匹配

三、 multiline
此屬性用於返回正則表達式是否具備標誌 m, 它聲明瞭給定的正則表達式是否以多行模式執行模式匹配

 

六、 正則表達式的經常使用符號

/../     :     表明一個模式的開始與結束
^        :     匹配字符串的開始
$        :     匹配字符串的結束
\s       :     任何空白字符
\S       :     任何非空白字符
\d       :     匹配一個數字字符，等價於[0-9]
\D       :     除了數字以外的任何字符，等價於[^0-9]
\w       :     匹配一個數字，下劃線或字符字符，等價於[A_Za_z0-9]
\W       :     任何非單字字符，等價於[^A_Za_z0-9]
.        :     除了換行符以外的任意字符

 

七、 正則表達式的重複字符

{n}       :     匹配前一項n 次
{n,}      :     匹配前一項n 次，或者屢次
{n,m}     :     匹配前一項至少n 次，可是不能超出 m 次
*         :     匹配前一項0 次或屢次，等價於 {0,}
+         :     匹配前一項1 次或屢次，等價於 {1,}
?         :     匹配前一項0 次或 1 次，前一項是可選的 等價於 {0,1}

 

八、正則表達式有 ()、[]、｛｝

() : 是爲了提取匹配的字符串，表達式中有幾個() 就有幾個相應的匹配字符串
[] : 是定義匹配的字符串
{} : 用來匹配的長度， 如 \s{3} 表示三個空格。

 

 

   使用HTML5的方式驗證表單

 

一、HTML5新增驗證屬性

一、 placeholder
    提供一種提示，輸入域爲空是顯示，得到焦點輸入內容後消失

二、require
    規定輸入域不能爲空

三、pattern
    規定驗證input 域的模式（正則表達式）

 

二、validity屬性

Validity屬性能夠獲取對象的 validityState對象

此對象包含 八個屬性，分別針對八個方面的錯誤驗證。

一、valueMissing  二、typeMismatch三、patternMismatch四、tooLong五、rangeUnderflow六、rangeOverflow七、stepMismatch八、customError