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