Javascript的表單驗(yàn)證-提交表單
推薦閱讀：Javascript的表單驗(yàn)證長(zhǎng)度
Javascript的表單驗(yàn)證-初識(shí)正則表達(dá)式
Javascript的表單驗(yàn)證-揭開(kāi)正則表達(dá)式的面紗
JavaScript 可用來(lái)在數(shù)據(jù)被送往服務(wù)器前對(duì) HTML 表單中的這些輸入數(shù)據(jù)進(jìn)行驗(yàn)證。
壞數(shù)據(jù)不該抵達(dá)服務(wù)器：提交表單時(shí)的驗(yàn)證
表單域?qū)ο罄镉袀€(gè)form特性，它使用數(shù)組表示了整份表單的域
假如這里只有一個(gè)簡(jiǎn)單的信息文本框和一個(gè)郵政編碼框，還有一個(gè)提交按鈕
<form>
<input id="message" name="message" type="text" size="12" onBlur="validate_Length(1,32,this,document.getElementById('message_help'));" />
<message_help" class="help"></span>
<input id="ZipCode" name="phone" type="text" size="5" onBlur="validate_ZipCode(this,document.getElementById('ZipCode_help'));" />
<span id="ZipCode_help" class="help"></span>
<input type="button" value="Order Banner" onClick="placeOrder(this.form);"/>
</form>
<script language="javascript" type="text/javascript">
//文本長(zhǎng)度驗(yàn)證
function validate_Length(minLegth,maxlength,inputFiled,helpText)
{
if(inputFiled.value.length<minLegth||inputFiled.value.length>maxlength)
{
if(helpText!=null)
{
helpText.innerHTML="請(qǐng)輸入長(zhǎng)度為"+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="郵政編碼長(zhǎng)度必須為5位";
return false;
}
else if(isNaN(inputFiled.value))
{
if(helpText!=null)
helpText.innerHTML="郵政編碼必須為數(shù)字";
return false;
}
else if(helpText!=null)
{
helpText.innerHTML=""
return true;
}
}
function placeOrder(form)
{
if(validateNonEmpty(1,32,form["phone"],form["phone_help"])&&validate_ZipCode(form["ZipCode"],form["ZipCode_help"]))
{
form.submit();
}
else{
alert("您填寫的表單數(shù)據(jù)至少有一項(xiàng)不合法");
}
}
</script>
總結(jié)：只需要調(diào)用相應(yīng)的驗(yàn)證函數(shù)，得到返回值，便可在最后提交表單的時(shí)候完成最后的數(shù)據(jù)過(guò)濾
在實(shí)際應(yīng)用中，往往需要對(duì)數(shù)據(jù)的長(zhǎng)度，非空，非法字符，格式，大小定等等做驗(yàn)證，這里不一一介紹，重在領(lǐng)會(huì)。
好了，有關(guān)Javascript的表單驗(yàn)證-提交表單的相關(guān)知識(shí)，小編就給大家介紹到這里，希望對(duì)大家有所幫助！
相關(guān)文章
js生成的驗(yàn)證碼的實(shí)現(xiàn)與技術(shù)分析
本文主要是分享了一段由JS生成驗(yàn)證碼并驗(yàn)證的代碼，非常簡(jiǎn)單，并分析了此方法的實(shí)用性，提供給大家參考下2014-09-09
話說(shuō)最近在研究某著名跟蹤系統(tǒng)，在其給用戶的實(shí)施代碼中有一段判斷瀏覽器Javascript版本的代碼引起了我的注意，于是問(wèn)了下google如何判斷瀏覽器的javascript版本2010-09-09
js無(wú)后端實(shí)現(xiàn)點(diǎn)擊加載查看更多（提示SEO友好度）
為了提示SEO友好度,并且避免調(diào)用后端接口給服務(wù)器造成負(fù)擔(dān),可以使用js無(wú)后端實(shí)現(xiàn)點(diǎn)擊加載查看更多,比如HTML中源碼存在60條記錄,預(yù)先顯示20條記錄,點(diǎn)擊“查看更多”一次追加10條,最后一次后按鈕文本改為“已查看全部”,在JavaScript中,你可以使用以下步驟來(lái)實(shí)現(xiàn)2024-10-10
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)呼吸輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
下面小編就為大家?guī)?lái)一篇淺析JavaScript中瀏覽器的兼容問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考2016-04-04
工作中比較實(shí)用的JavaScript驗(yàn)證和數(shù)據(jù)處理的干貨(經(jīng)典)
工作中比較實(shí)用的JavaScript驗(yàn)證和數(shù)據(jù)處理知識(shí)經(jīng)常會(huì)用到，下面小編通過(guò)查閱相關(guān)資料及日常記錄的知識(shí)分享到腳本之家平臺(tái)，供大家參考2016-08-08
webpack4 配置 ssr 環(huán)境遇到“document is not defined”
這篇文章主要介紹了webpack4 配置 ssr 環(huán)境遇到“document is not defined”，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
Javascript排序算法之計(jì)數(shù)排序的實(shí)例
計(jì)數(shù)排序是一種高效的線性排序，它通過(guò)計(jì)算一個(gè)集合中元素楚翔的次數(shù)來(lái)確定集合如何排列，計(jì)數(shù)排序不需要進(jìn)行數(shù)據(jù)的比較，所有他的運(yùn)行效率前面介紹的都高2014-04-04
canvas實(shí)現(xiàn)手機(jī)端用來(lái)上傳用戶頭像的代碼
這篇文章主要介紹了canvas實(shí)現(xiàn)手機(jī)端用來(lái)上傳用戶頭像的代碼代碼簡(jiǎn)單易懂非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2016-10-10
js實(shí)現(xiàn)點(diǎn)贊按鈕功能的實(shí)例代碼
這篇文章主要介紹了js實(shí)現(xiàn)點(diǎn)贊按鈕功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的工作或?qū)W習(xí)具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-03-03