溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

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

發(fā)布時(shí)間：2021-06-17 15:46:47 來(lái)源：億速云 閱讀：157 作者：Leah 欄目：web開(kāi)發(fā)

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

直接po截圖和代碼

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

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

下面是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>
<h2>驗(yàn)證表單的案例</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/>
重復(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();"這句話(huà)中的;分號(hào)也可以省略不寫(xiě)，但是如果有多行js代
碼的話(huà)，那就要在每行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)菜!
		*/
	}
}

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝您對(duì)億速云的支持。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手