檢查表單元素的值是否為空的實(shí)例代碼
1.概述
在實(shí)際的開(kāi)發(fā)過(guò)程中,經(jīng)常需要判斷用戶提交的表單中某個(gè)元素的值是否為空,還有一種情況是表單中所有元素的值都不允許為空。本實(shí)例將介紹一種簡(jiǎn)單有效的判斷表單中所有元素是否為空的方法。
2.技術(shù)要點(diǎn)
主要是在JavaScript中通過(guò)循環(huán)form對(duì)象的elements屬性來(lái)實(shí)現(xiàn)。form對(duì)象的elements屬性也就是頁(yè)面中form表單的所有元素的數(shù)組,例如,form.elements[0]表示表單第一個(gè)元素對(duì)象,form.elements[n]表示表單第n個(gè)元素對(duì)象。
3.具體實(shí)現(xiàn)代碼
(1)新建index.jsp表單頁(yè),該頁(yè)的表單中包含3個(gè)不允許為空的元素和一個(gè)提交按鈕,并且需要定義一個(gè)表單的id屬性值,關(guān)鍵代碼如下:
<form action="" id="myform"> <table align="center"> <tr> <td>留言人:</td> <td> <input type="text" name="messageUser" title="留言人"> </td> </tr> <tr> <td>留言標(biāo)題:</td> <td> <input type="text" name="messageTitle" title="留言標(biāo)題"> </td> </tr> <tr> <td>留言內(nèi)容:</td> <td> <textarea rows="8" cols="45" title="留言內(nèi)容"></textarea> </td> </tr> <tr> <td align="center" colspan="2"> <input type="button" value="提 交" onclick="check()"> </td> </tr> </table> </form>
(2)在該頁(yè)的<script>標(biāo)簽中編寫(xiě)驗(yàn)證表單元素的值不允許為空的方法,關(guān)鍵代碼如下:
function check(){
var myform = document.getElementById("myform"); //獲得form表單對(duì)象
for(var i=0;i<myform.length;i++){ //循環(huán)form表單
if(myform.elements[i].value==""){ //判斷每一個(gè)元素是否為空
alert(myform.elements[i].title+"不能為空!");
myform.elements[i].focus(); //元素獲得焦點(diǎn)
return ;
}
}
myform.submit();
}
在JavaScript中,form表單對(duì)象的elements屬性的value屬性表示指定元素的值;name屬性表示指定表單元素的名稱;title屬性表示表單元素的標(biāo)題。
以上所述是小編給大家介紹的檢查表單元素的值是否為空的實(shí)例代碼的相關(guān)知識(shí),希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
Chrome瀏覽器的alert彈窗禁止再次彈出后恢復(fù)的方法
本文主要介紹了Chrome瀏覽器的alert彈窗禁止再次彈出后恢復(fù)的方法。具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2016-12-12
js實(shí)現(xiàn)網(wǎng)站首頁(yè)圖片滾動(dòng)顯示
網(wǎng)站首頁(yè)圖片滾動(dòng)顯示對(duì)于很多朋友都有很大的吸引,因?yàn)樗梢詭?lái)意想不到視覺(jué)沖擊效果,接下來(lái)本文也實(shí)現(xiàn)一下,感興趣的朋友可以參考下,或許對(duì)你學(xué)習(xí)js知識(shí)有所幫助2013-02-02
javascript在當(dāng)前窗口關(guān)閉前檢測(cè)窗口是否關(guān)閉
檢測(cè)窗口是否關(guān)閉,在當(dāng)前窗口關(guān)閉前使用js做到這一點(diǎn),下面是具體的實(shí)現(xiàn),感興趣的朋友可以參考下2014-09-09
詳解處理bootstrap4不支持遠(yuǎn)程靜態(tài)框問(wèn)題
這篇文章主要介紹了詳解處理bootstrap4不支持遠(yuǎn)程靜態(tài)框問(wèn)題,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
JavaScript 浮動(dòng)定位提示效果實(shí)現(xiàn)代碼
本來(lái)想做一個(gè)集合浮動(dòng)定位和鼠標(biāo)跟隨的tooltips效果,但發(fā)現(xiàn)定位和鼠標(biāo)跟隨在一些關(guān)鍵的地方還是不同的,還是分開(kāi)來(lái)吧。2009-09-09

