驗證表單可用來在數據被送往服務器前對 HTML 表單中的這些輸入數據進行驗證。此文為大家推薦一些實用的驗證表單，希望對大家有所幫助！

1、Parsley.js（不用寫一行 JavaScript 代碼即可在前端驗證表單）

2、validator.js（字符串驗證和過濾（在使用用戶輸入之前清理用戶輸入中的有害或危險字符的操作））

3、validate.js（受 CodeIgniter 啟發的輕量表單驗證 JavaScript 庫）

4、validatr（跨瀏覽器的 HTML5 表單驗證庫）

5、BootstrapValidator（是驗證表單域中最好的 jQuery 插件。要與 Bootstrap 3 一起使用）

6、FieldVal(多用途驗證庫。同時支持同步和異步驗證)

7、is.js（檢查類型、正則表達式、是否存在、時間等）

切版 qieban(.cn)

件

一、什么是事件？

JavaScript和HTML之間的交互是通過用戶和瀏覽器操作頁面時引發的事件來處理的。頁面載入完成時，會觸發一個事件。用戶點擊按鈕時，點擊也是一個事件。

二、怎樣將事情處理程序綁定到特定的事件中？

方法1. 使用HTML標記創建事件處理程序;

例：給圖片添加點擊事件

<img src="01.jpg"onclick="alert(this.src);"/>

方法2：使用對象的事件屬性創建事件處理程序

語法：object.onEventName = eventHandler;

例1：給document對象添加點擊事件

function sayHello(){

alert(‘hello’);

}

document.onclick = sayHello;

例2：給所有的圖片都添加一個單擊事件，用于在新窗口中打開圖片

function new_pic_window(){

window.open(this.src);

}

var img_obj = document.getElementByTagName(‘img’);

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

img_obj[i].onclick = new_pic_window;

}

表單對象

一、表單

表單(Form)是Web頁面中最常用的元素之一，它通常由一個或多個表單域組成，這些表單域接收用戶的輸入，并通過表單的提交功能將數據傳遞到服務器端，由服務器端對這些數據進入處理。

在Javascript中可以很方便的操作表單，例如獲取表單域的數據進行有效驗證、自動給表單域賦值、處理表單域的事件等。些時每對<form>...</form>標記被解析為一個對象，即form對象，可以通過document.forms集合來引用這些對象，例如一個名為"form1"的表單可以用如下語句獲得：var myform = document.forms["form1"];不僅如此，還可以通過表單在文檔中的索引來引用表單對象，

例如：

下面代碼表示引用文檔中的第一個表單對象。

var myform = document.forms[0];

二、引用表單域

表單域是指用于接收用戶輸入或操作的一些頁面元素，例如文本框、按鈕、復選框等。它們通常包含在一個表單中，要在Javascript中引用一個表單元素，可以采用以下兩種方法：

var element = theForm.elements[index];

var element = theForm.elements["elementName"];

在第一種方法中，index表示表單域的索引，第一個出現的索引為0,依次遞增;

第二種方法中，elementName表示表單域name屬性所指定的表單域名稱;

有時需要指定遍歷某種類型的表單域，可以使用表單域的type屬性來獲取表單域類型，例如要處理所有的復選框，可以使用如下語句

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

if("checkbox" == theForm.elememts[i].type){

//處理程序

}

}

三、表單域的通用屬性

1. disabled

有時希望表單域不能接收用戶操作，如有些文本框要設定為只讀; 當所有的表單域輸入完成之前，設定提交按鈕為灰的，不可單擊等。這些都可以通過表單域的disable屬性來實現：

例：element.disabled = true;

2. 使用name屬性獲取或者設置表單域的名稱

3. 使用form屬性獲取該表單域所屬的表單

4. 使用value屬性來獲取和設置表單域的值

四、表單域的通用方法

1. 使用focus() 方法讓表單域獲得焦點

2. 使用 blur()方法讓表單域失去焦點

五、表單域的通用事件

事件是處理用戶操作的一項重要機制，在Javascript中，表單域提供了豐富的事件以方便程序捕獲用戶行為。

1. 使用onfocus事件和onblur事件，該事件在表單獲得焦點和失去焦點時觸發。

2.使用 onclick、onkeydown、onkeyup、onkeypress 事件，這4個事件分別對應于鼠標和鍵盤的幾個操作。click事件表示鼠標單擊該表單域;

3. 使用 onmouseover、onmouseout、onmousedown、onmouseup事件，這些事件對應于鼠標的不同動作

4.使用onchange事件捕獲表單域值的變化

每個表單域都有一定的值，在這些值發生變化的時候會觸發onchange事件，例如：文本域文本的變化，復選框從選中變為未選中，下拉列表框選項發生變化。

六、表單驗證

在Javascript誕生之前，所有的驗證工作都在服務器端完成，這需要將數據發送到服務器，增加了用戶等待時間，用戶體驗差。使用Javascript在瀏覽器端進行驗證則可以較好的解決這些問題。

表單驗證一般發生于用戶單擊提交按鈕、數據被提交到服務器之前，這時如果用戶輸入的數據不全或無效，則取消提交，同時提示用戶重新輸入。例如函數validate()是用于檢驗表單的用效性，返回值為true或者false。在程序中有兩種方式來調用validate();

方法1：<input type="submit" onclick="return validate();" />

方法2：<form action="" onsubmit="return validate();" />

第一種方法中，將validate()綁定到提交按鈕的單擊事件，如果返回false,則按鈕會終擊單擊的效果，即表單不會提交。

第二種方法中，將validate()綁定到表單的提交事件，它發生在提交之前，如果返回false，則表單不會提交。

注意：盡管Javascript幾乎可以完成所有的數據驗證上，但這終究是一種客戶端技術，技術成熟的黑客可以很容易繞過這些驗證而將非法的數據直接提交到服務器，給服務器帶來威脅。所以在服務器端重復驗證是非常有必要的。但Javascript驗證以快速提示用戶可能的錯誤，給用戶帶來良好體驗，這也是采用客戶端驗證的重要原因。