javascript中怎么驗證form表單數(shù)據(jù)

javascript中怎么驗證form表單數(shù)據(jù)，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

成都創(chuàng)新互聯(lián)公司專注于市中企業(yè)網(wǎng)站建設,響應式網(wǎng)站設計,商城建設。市中網(wǎng)站建設公司,為市中等地區(qū)提供建站服務。全流程按需開發(fā)網(wǎng)站，專業(yè)設計，全程項目跟蹤，成都創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務

直接po截圖和代碼

javascript中怎么驗證form表單數(shù)據(jù)

javascript中怎么驗證form表單數(shù)據(jù)

下面是CheckFormDemo.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>驗證表單的案例</title>
<link rel="stylesheet" type="text/css" href="../css/body.css" rel="external nofollow" />
<script type="text/javascript" src="jsCheckDateDemo.js"></script>
</head>
<body>
<h2>驗證表單的案例</h2>
<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/>
重復密碼：<input type="password" name="repeatPwd" id="myRepeatPwd">
<br/>
<!-- 
雖然復選框設置了 name屬性，但是如果復選框不選中，是不會提交到服務器端的，只
有選中了的復選框，才會提交到服務器端
 -->
愛好：<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">臺球
<br/>
備注：<textarea rows="3" cols="30" id="remarks"></textarea>
<br/>
<!-- 只有設置了 name 屬性的表單元素才能在提交表單時傳遞它們的值 -->
測試字段:<input type="text" id="test" value="本文本框故意不設置name屬性，看服務器端能不能接收到">
<br/>
<!-- 
onclick="checkForm();"這句話中的;分號也可以省略不寫，但是如果有多行js代
碼的話，那就要在每行js代碼后面加上;分號，最后一行js代碼后面可以不寫;分號，也可以寫上;分號
 -->
<input type="button" value="js驗證表單" onclick="checkForm();">
<input type="submit" value="提交到servlet">
</form>
</body>
</html>

下面是jsCheckDateDemo.js

/**
 * 
 */
 
//驗證表單數(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) {//沒有一個愛好被選中
		alert("請至少選擇一個愛好!");
		//程序也沒必要再往下走了，直接return
		return;
	}
	if (document.forms[0].pwd.value.length < 8) {
		alert("密碼長度不能小于8位!");
		document.forms[0].pwd.focus();//讓密碼框獲取焦點
		//程序也沒必要再往下走了，直接return
		return;
	}
	if (document.forms[0].pwd.value != document.forms[0].repeatPwd.value) {
		alert("兩次密碼輸入不一致!");
		document.forms[0].repeatPwd.focus();//讓重復密碼框獲取焦點
		//程序也沒必要再往下走了，直接return
		return;
	}
	if (document.getElementById("remarks").value == "") {
		alert("備注不能為空!");
		/*
這里可以不寫return，因為程序執(zhí)行到這里時，后面已經(jīng)沒有任何代碼了，所
以寫不寫return都無所謂，所以就不要寫return了，寫了反而讓人覺得你是個新手，水平有點菜!
		*/
	}
}

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進一步的了解或閱讀更多相關(guān)文章，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)的支持。

當前名稱：javascript中怎么驗證form表單數(shù)據(jù)
本文URL：http://muchs.cn/article20/ihcico.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、微信公眾號、軟件開發(fā)、動態(tài)網(wǎng)站、Google、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

商城網(wǎng)站建設