Javascript的表單與驗證-非空驗證
更新時間：2016年03月18日 10:39:41 作者：WeAreZero
JavaScript 可用來在數據被送往服務器前對 HTML 表單中的這些輸入數據進行驗證。本文給大家介紹javascript的表單與驗證-非空驗證，對javascript表單驗證相關知識感興趣的朋友一起學習吧
推薦閱讀：Javascript的表單驗證長度
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()方法都可以完成對元素的獲取
檢查表單數據的時機，取決于選擇正確的用戶輸入事件去處理。
也就是說，當用戶輸入數據后立即對數據驗證。
用戶在輸入數據時的順序是：
選擇輸入域
在域里輸入數據
離開該域，移往下個目標
選擇下個目標域
在域里輸入數據
在這個過程中，會激發(fā)一系列的事件，利用這些事件，可以找到對數據驗證的時機
1） 選中輸入域時 –激發(fā)onfocus事件（焦點）
2） 離開輸入域時 –激發(fā)onblur事件（離開焦點）
3） 離開該域并且輸入內容發(fā)生改變時 –激發(fā)onchange事件
最正確的選擇是在激發(fā)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的表單與驗證-非空驗證的全部敘述，希望對大家有所幫助！
相關文章
這篇文章主要為大家詳細介紹了微信小程序獲取手機驗證碼的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要給大家介紹了利用Javascript計算二維數組重復值的方法，文中給出了詳細的示例代碼，相信對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。2016-12-12
這篇文章主要為大家詳細介紹了原生JS貪吃蛇小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
計數排序是一種高效的線性排序，它通過計算一個集合中元素楚翔的次數來確定集合如何排列，計數排序不需要進行數據的比較，所有他的運行效率前面介紹的都高2014-04-04
javascript循環(huán)變量注冊dom事件 之強大的閉包
是在循環(huán)過程過this被改變，注冊過的事件也被隨之改變，找到了一種解決方法2010-09-09
使用webpack3.0配置webpack-dev-server教程
這篇文章主要介紹了使用webpack3.0配置webpack-dev-server教程，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
這個其實就是利用qq官方提供的東西，簡單的通過圖片來測試是否在線，隱身也是不在線狀態(tài)。純粹學習使用。2010-04-04
這篇文章主要介紹了JavaScript實現圖片自動加載的瀑布流效果的相關資料,需要的朋友可以參考下2016-04-04
這篇文章主要為大家詳細介紹了JSx實現簡單控制視頻播放倍速，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
這篇文章主要介紹了JS+CSS實現美化的下拉列表框效果,涉及javascript針對下拉列表框樣式的相關操作技巧,非常美觀大方,需要的朋友可以參考下2015-08-08