快捷導(dǎo)航

javascript驗(yàn)證form表單數(shù)據(jù)的案例詳解

更新時(shí)間：2019年03月25日 14:08:13 作者：lay500

這篇文章主要介紹了javascript驗(yàn)證form表單數(shù)據(jù)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

直接po截圖和代碼

下面是CheckFormDemo.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>驗(yàn)證表單的案例</title>
<link rel="stylesheet" type="text/css" href="../css/body.css" rel="external nofollow" />
<script type="text/javascript" src="jsCheckDateDemo.js"></script>
</head>
<body>
<h1>驗(yàn)證表單的案例</h1>
<form name="form1" id="f1" action="../TestForm" method="get">
姓名：<input type="text" name="userName" id="uName">
<br/>
年齡：<input type="text" name="age" id="uAge">
<br/>
密碼：<input type="password" name="pwd" id="myPwd">
<br/>
重復(fù)密碼：<input type="password" name="repeatPwd" id="myRepeatPwd">
<br/>
<!-- 
雖然復(fù)選框設(shè)置了 name屬性，但是如果復(fù)選框不選中，是不會(huì)提交到服務(wù)器端的，只
有選中了的復(fù)選框，才會(huì)提交到服務(wù)器端
 -->
愛(ài)好：<input type="checkbox" name="hobby" id="myHobby" value="football">足球
<input type="checkbox" name="hobby" id="myHobby" value="badminton">羽毛球
<input type="checkbox" name="hobby" id="myHobby" value="basketball">籃球
<input type="checkbox" name="hobby" id="myHobby" value="billiards">臺(tái)球
<br/>
備注：<textarea rows="3" cols="30" id="remarks"></textarea>
<br/>
<!-- 只有設(shè)置了 name 屬性的表單元素才能在提交表單時(shí)傳遞它們的值 -->
測(cè)試字段:<input type="text" id="test" value="本文本框故意不設(shè)置name屬性，看服務(wù)器端能不能接收到">
<br/>
<!-- 
onclick="checkForm();"這句話中的;分號(hào)也可以省略不寫(xiě)，但是如果有多行js代
碼的話，那就要在每行js代碼后面加上;分號(hào)，最后一行js代碼后面可以不寫(xiě);分號(hào)，也可以寫(xiě)上;分號(hào)
 -->
<input type="button" value="js驗(yàn)證表單" onclick="checkForm();">
<input type="submit" value="提交到servlet">
</form>
</body>
</html>

下面是jsCheckDateDemo.js

/**
 * 
 */
 
//驗(yàn)證表單數(shù)據(jù)
function checkForm(){
//	alert(document.form1.hobby.length);
//	alert(document.getElementsByName("hobby").length);
//	alert(document.getElementsByName("hobby")[0].value);
//	alert(document.getElementById("myHobby"));
	
//	for (var i = 0; i < document.forms[0].hobby.length; i++) {
//		alert("---" + document.forms[0].hobby[i].value);
//	}
	
	var flag = false;
	for (var i = 0; i < document.form1.hobby.length; i++) {
//		alert(document.form1.hobby[i].value);
//		alert(document.form1.hobby[i].checked);
		if (document.form1.hobby[i].checked) {
			flag = true;
			break;
		}
	}
	if (!flag) {//沒(méi)有一個(gè)愛(ài)好被選中
		alert("請(qǐng)至少選擇一個(gè)愛(ài)好!");
		//程序也沒(méi)必要再往下走了，直接return
		return;
	}
	if (document.forms[0].pwd.value.length < 8) {
		alert("密碼長(zhǎng)度不能小于8位!");
		document.forms[0].pwd.focus();//讓密碼框獲取焦點(diǎn)
		//程序也沒(méi)必要再往下走了，直接return
		return;
	}
	if (document.forms[0].pwd.value != document.forms[0].repeatPwd.value) {
		alert("兩次密碼輸入不一致!");
		document.forms[0].repeatPwd.focus();//讓重復(fù)密碼框獲取焦點(diǎn)
		//程序也沒(méi)必要再往下走了，直接return
		return;
	}
	if (document.getElementById("remarks").value == "") {
		alert("備注不能為空!");
		/*
這里可以不寫(xiě)return，因?yàn)槌绦驁?zhí)行到這里時(shí)，后面已經(jīng)沒(méi)有任何代碼了，所
以寫(xiě)不寫(xiě)return都無(wú)所謂，所以就不要寫(xiě)return了，寫(xiě)了反而讓人覺(jué)得你是個(gè)新手，水平有點(diǎn)菜!
		*/
	}
}

以上所述是小編給大家介紹的javascript驗(yàn)證form表單數(shù)據(jù)詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: