Javascript的表單驗(yàn)證長度
JavaScript 可用來在數(shù)據(jù)被送往服務(wù)器前對 HTML 表單中的這些輸入數(shù)據(jù)進(jìn)行驗(yàn)證。
該采用什么樣的方式對用戶作出提醒呢?你一定不想用alert()提示框
在輸入域后加一個sqan標(biāo)簽
<input id="phone" name="phone" type="text" size="12" onBlur="validateNonEmptyFun(this,document.getElementById('phone_help'));" /> <span id="phone_help" class="help"></span> function validate_Length(inputFiled,helpText) { //如果輸入域內(nèi)容是空,則在span標(biāo)簽內(nèi)提醒 if(inputFiled.value.length==0) { if(helpText!=null) helpText.innerHTML="文本框不能為空"; } //如果輸入域不空,則清空span標(biāo)簽內(nèi)的內(nèi)容 else if(helpText!=null) helpText.innerHTML="" } </script>
helpText是傳入的span對象
用span標(biāo)簽來為用戶作出提醒,不會像alert那樣阻擋用戶視覺
除了非空驗(yàn)證,還有尺寸問題
驗(yàn)證數(shù)據(jù)長度
<input id="phone" name="phone" type="text" size="12" onBlur="validate_Length(1,32,this,document.getElementById('phone_help'));" /> <span id="phone_help" class="help"></span>
這里的參數(shù)變成了四個,第一個是文本最小長度,第二個是文本最長長度
function validate_Length(minLegth,maxlength,inputFiled,helpText) { if(inputFiled.value.length<minLegth||inputFiled.value.length>maxlength) { if(helpText!=null) { helpText.innerHTML="請輸入長度為"+minLenght+"到"+maxLength+"的文本"; return false; } } else if(helpText!=null) { helpText.innerHTML="" return true; } }
驗(yàn)證郵政編碼
function validate_ZipCode(inputFiled,helpText) { if(inputFiled.value.length!=5) { if(helpText!=null) helpText.innerHTML="郵政編碼長度必須為5位"; return false; } else if(isNaN(inputFiled.value)) { if(helpText!=null) helpText.innerHTML="郵政編碼必須為數(shù)字"; return false; } else if(helpText!=null) { helpText.innerHTML="" return true; } }
- 基于JS實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼后的倒計(jì)時功能(無視頁面刷新,頁面關(guān)閉不進(jìn)行倒計(jì)時功能)
- JS/jQ實(shí)現(xiàn)免費(fèi)獲取手機(jī)驗(yàn)證碼倒計(jì)時效果
- js實(shí)現(xiàn)點(diǎn)擊獲取驗(yàn)證碼倒計(jì)時效果
- js實(shí)現(xiàn)發(fā)送驗(yàn)證碼后的倒計(jì)時功能
- AngularJS自動表單驗(yàn)證
- AngularJS手動表單驗(yàn)證
- JS實(shí)現(xiàn)表單驗(yàn)證功能(驗(yàn)證手機(jī)號是否存在,驗(yàn)證碼倒計(jì)時)
相關(guān)文章
JavaScript對表格或元素按文本,數(shù)字或日期排序的方法
這篇文章主要介紹了JavaScript對表格或元素按文本,數(shù)字或日期排序的方法,涉及javascript頁面元素操作及排序的相關(guān)技巧,需要的朋友可以參考下2015-05-05寫入cookie的JavaScript代碼庫 cookieLibrary.js
cookieLibrary.js 寫入cookie的JavaScript代碼庫,需要的朋友可以參考下。2009-10-10JavaScript設(shè)計(jì)模式之職責(zé)鏈模式
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之職責(zé)鏈模式,對設(shè)計(jì)模式感興趣的同學(xué),可以參考下2021-04-04原生js+cookie實(shí)現(xiàn)購物車功能的方法分析
這篇文章主要介紹了原生js+cookie實(shí)現(xiàn)購物車功能的方法,結(jié)合實(shí)例形式分析了javascript結(jié)合cookie存儲實(shí)現(xiàn)購物車功能的相關(guān)操作技巧,需要的朋友可以參考下2017-12-12javascript:void(0)點(diǎn)擊登錄沒反應(yīng)怎么解決
這篇文章給大家介紹javascript:void(0)點(diǎn)擊登錄沒反應(yīng)怎么解決,解決辦法是巧用批處理解決IE不支持JavaScript等問題,需要的朋友參考下2015-11-11