首頁 > web前端 > js教程 > Javascript的表單與驗證-非空驗證_javascript技巧

Javascript的表單與驗證-非空驗證_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
發布: 2016-05-16 15:10:15
原創
1474 人瀏覽過

推薦閱讀:Javascript的表單驗證長度

Javascript的表單驗證-提交表單

Javascript的表單驗證-初識正規表示式

Javascript的表單驗證-揭開正規表示式的面紗

 JavaScript 可用來在資料被送到伺服器前對 HTML 表單中的這些輸入資料進行驗證。

表單提交前要檢查資料的合法性

在要對表單裡的資料進行驗證的時候,可以利用getElementById()來存取網頁上任何一個元素

每個表單域都有一個form對象,可傳給任何驗證表單資料的函數

1

2

3

4

5

6

<input id="zipcode" name="zipcode" type="text" size="5" onclick="showIt(this.form)"/>

function showIt(thisForm)

{

alert(thisForm["zipcode"].value);

//通过form对象的name属性,取得元素的值

}

登入後複製

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

檢查表單資料的時機,取決於選擇正確的使用者輸入事件去處理。

也就是說,當使用者輸入資料後立即對資料驗證。

使用者在輸入資料時的順序是:

選擇輸入域

在域裡輸入資料

離開該域,移往下個目標

選擇下個目標域

在域裡輸入資料

在這個過程中,會激發一系列的事件,利用這些事件,可以找到對資料驗證的時機

1) 選取輸入域時 –激發onfocus事件(焦點)

2) 離開輸入域時 –激發onblur事件(離開焦點)

3) 離開該網域並且輸入內容改變時 –激發onchange事件

最正確的選擇是在激發onblur事件時去對資料進行驗證

驗證的第一步:檢查域不為空

1

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

登入後複製

呼叫validateNonEmpty來回應onblur事件

表單物件使用關鍵字this被傳至函數

以下是驗證函數

1

2

3

4

5

6

7

8

9

function validateNonEmpty(inputField)

{

if(inputField.value.length==0)

{

alert("Please enter a value.");

return false;

}

return true;

}

登入後複製

在網頁表單提交的時候,一定要對使用者輸入的資料進行驗證

在要對表單裡的資料進行驗證的時候,可以利用getElementById()來存取網頁上任何一個元素

以上內容是針對Javascript的表單與驗證-非空驗證的完整敘述,希望對大家有幫助!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板