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

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

Javascript的表單驗證-提交表單

Javascript的表單驗證-初識Regex

Javascript的表單驗證-揭開Regex的面紗

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

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

在要對錶單裡的資料進行驗證的時候，可以利用getElementById()來訪問網頁上任何一個元素

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

<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事件時去對資料進行驗證

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

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

調用validateNonEmpty來響應onblur事件

表單對象使用關鍵字this被傳至函數

以下是驗證函式

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

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

在要對錶單裡的資料進行驗證的時候，可以利用getElementById()來訪問網頁上任何一個元素

以上內容是針對Javascript的表單與驗證-非空驗證的全部敘述，希望對大家有所協助！