欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2019年03月25日 14:08:13   作者:lay500  
這篇文章主要介紹了javascript驗(yàn)證form表單數(shù)據(jù),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(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ù)選框不選中,是不會提交到服務(wù)器端的,只
有選中了的復(fù)選框,才會提交到服務(wù)器端
 -->
愛好:<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/>
<!-- 只有設(shè)置了 name 屬性的表單元素才能在提交表單時(shí)傳遞它們的值 -->
測試字段:<input type="text" id="test" value="本文本框故意不設(shè)置name屬性,看服務(wù)器端能不能接收到">
<br/>
<!-- 
onclick="checkForm();"這句話中的;分號也可以省略不寫,但是如果有多行js代
碼的話,那就要在每行js代碼后面加上;分號,最后一行js代碼后面可以不寫;分號,也可以寫上;分號
 -->
<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) {//沒有一個(gè)愛好被選中
		alert("請至少選擇一個(gè)愛好!");
		//程序也沒必要再往下走了,直接return
		return;
	}
	if (document.forms[0].pwd.value.length < 8) {
		alert("密碼長度不能小于8位!");
		document.forms[0].pwd.focus();//讓密碼框獲取焦點(diǎn)
		//程序也沒必要再往下走了,直接return
		return;
	}
	if (document.forms[0].pwd.value != document.forms[0].repeatPwd.value) {
		alert("兩次密碼輸入不一致!");
		document.forms[0].repeatPwd.focus();//讓重復(fù)密碼框獲取焦點(diǎn)
		//程序也沒必要再往下走了,直接return
		return;
	}
	if (document.getElementById("remarks").value == "") {
		alert("備注不能為空!");
		/*
這里可以不寫return,因?yàn)槌绦驁?zhí)行到這里時(shí),后面已經(jīng)沒有任何代碼了,所
以寫不寫return都無所謂,所以就不要寫return了,寫了反而讓人覺得你是個(gè)新手,水平有點(diǎn)菜!
		*/
	}
}
 

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

相關(guān)文章

最新評論