推薦閱讀：Javascript的表單驗(yàn)證長(zhǎng)度

Javascript的表單驗(yàn)證-提交表單

Javascript的表單驗(yàn)證-初識(shí)正則表達(dá)式

Javascript的表單驗(yàn)證-揭開(kāi)正則表達(dá)式的面紗

 JavaScript 可用來(lái)在數(shù)據(jù)被送往服務(wù)器前對(duì) HTML 表單中的這些輸入數(shù)據(jù)進(jìn)行驗(yàn)證。

表單提交前要檢查數(shù)據(jù)的合法性

在要對(duì)表單里的數(shù)據(jù)進(jìn)行驗(yàn)證的時(shí)候，可以利用getElementById()來(lái)訪問(wèn)網(wǎng)頁(yè)上任何一個(gè)元素

每個(gè)表單域都有一個(gè)form對(duì)象，可被傳給任何驗(yàn)證表單數(shù)據(jù)的函數(shù)

<input id="zipcode" name="zipcode" type="text" size="5" onclick="showIt(this.form)"/>
function showIt(thisForm)
{
alert(thisForm["zipcode"].value);
//通過(guò)form對(duì)象的name屬性，取得元素的值
}

利用name屬性或getElementById()方法都可以完成對(duì)元素的獲取

檢查表單數(shù)據(jù)的時(shí)機(jī)，取決于選擇正確的用戶輸入事件去處理。

也就是說(shuō)，當(dāng)用戶輸入數(shù)據(jù)后立即對(duì)數(shù)據(jù)驗(yàn)證。

用戶在輸入數(shù)據(jù)時(shí)的順序是：

選擇輸入域

在域里輸入數(shù)據(jù)

離開(kāi)該域，移往下個(gè)目標(biāo)

選擇下個(gè)目標(biāo)域

在域里輸入數(shù)據(jù)

在這個(gè)過(guò)程中，會(huì)激發(fā)一系列的事件，利用這些事件，可以找到對(duì)數(shù)據(jù)驗(yàn)證的時(shí)機(jī)

1） 選中輸入域時(shí) –激發(fā)onfocus事件（焦點(diǎn)）

2） 離開(kāi)輸入域時(shí) –激發(fā)onblur事件（離開(kāi)焦點(diǎn)）

3） 離開(kāi)該域并且輸入內(nèi)容發(fā)生改變時(shí) –激發(fā)onchange事件

最正確的選擇是在激發(fā)onblur事件時(shí)去對(duì)數(shù)據(jù)進(jìn)行驗(yàn)證

驗(yàn)證的第一步：檢查域不為空

<input id="phone" name="phone" type="text" size="12" onblur="validateNonEmpty(this)"/>

調(diào)用validateNonEmpty來(lái)響應(yīng)onblur事件

表單對(duì)象使用關(guān)鍵字this被傳至函數(shù)

以下是驗(yàn)證函數(shù)

function validateNonEmpty(inputField)
{
if(inputField.value.length==0)
{
alert("Please enter a value.");
return false;
} 
return true;
}

在網(wǎng)頁(yè)表單進(jìn)行提交的時(shí)候，一定要對(duì)用戶輸入的數(shù)據(jù)進(jìn)行驗(yàn)證

在要對(duì)表單里的數(shù)據(jù)進(jìn)行驗(yàn)證的時(shí)候，可以利用getElementById()來(lái)訪問(wèn)網(wǎng)頁(yè)上任何一個(gè)元素

以上內(nèi)容是針對(duì)Javascript的表單與驗(yàn)證-非空驗(yàn)證的全部敘述，希望對(duì)大家有所幫助！

最新評(píng)論