js檢測輸入框的統(tǒng)一方法

2012/11/8 21:09:53作者：佚名來源：網(wǎng)絡(luò)

移動端

【實例名稱】

js檢測輸入框的統(tǒng)一方法

【實例描述】

在一些資料填寫頁面，因為有些數(shù)據(jù)要求用戶必須填寫，所以通常會逐個判斷輸入框中是否有內(nèi)容。本例將提供一個通用的方法，可以判斷頁面上所有的輸入框中是否有內(nèi)容。

【實例代碼】

<html>
<head>
<title>檢測輸入框的統(tǒng)一方法-學(xué)無憂（yzddtk.cn）</title>
<script language="JavaScript">
function chk()
{
    var b=document.getElementsByTagName("input")
//獲取所有的輸入框
    for(var i=0;i<b.length;i++){                
//遍歷所有的輸入框
        if(b[i].name.substr(0,4)=="item"){      
//判斷輸入框的前4位
            if(b[i].value==""){
                alert("請輸入第"+(i+1)+"項的值。");
//如果值為空，給出提示
                b[i].focus();                       
//值空的文本框獲得焦點
            return false;                           
//返回
            }
        }
    }
    return true
}
</script>
</head>
<body>
<form name="form1" action=http://www.google.com 
onSubmit="return chk()">
1.<input name="item1" type="text" value="" > 

2.<input name="item2" type="text" value=""><br />
3.<input name="item3" type="text" value="">
4.<input name="item4" type="text" value=""><br />
<input name="btn" type="submit" value="提交">
</form>
</body>
</html>

【運行效果】

檢測輸入框的統(tǒng)一方法運行效果

【難點剖析】

“getElementsByTagName(標(biāo)簽)”方法用來獲取指定標(biāo)名稱的控件，因為輸人框是使用input控件，所以本例使用此方法獲取頁面中所有的input控件，這些控件也包含了具有input標(biāo)簽的提交按鈕。通過input的“name”屬性，判斷此控件是否是輸入框，如果是再繼續(xù)判斷是否填寫了內(nèi)容。

【源碼下載】

為了JS代碼的準(zhǔn)確性，請點擊：js檢測輸入框的統(tǒng)一方法進(jìn)行本實例源碼下載

標(biāo)簽：驗證輸入框