JS【判断输入表单是否为空、两次输入密码是否相同】_js判断注册表单是否为空,以及两次密码是否一致-CSDN博客

HTML:

<!DOCTYPE html>
<html>
<head>
	<title>Password Check</title>
	<link rel="stylesheet" href="script03.css">
	<script src="script04.js"></script>
</head>
<body>
<form action="#">
	<p><label for="userName">Your name: <input type="text" size="30" id="userName" class="reqd"></label></p>
	<p><label for="passwd1">Choose a password: <input type="password" id="passwd1" class="reqd"></label></p>
	<p><label for="passwd2">Verify password: <input type="password" id="passwd2" class="reqd passwd1"></label></p>
	<p><input type="submit" value="Submit"> <input type="reset"></p>
</form>
</body>
</html>

CSS

body {
	color: #000;
	background-color: #FFF;
}

input.invalid {
	background-color: #FF9;
	border: 2px red inset;
}

label.invalid {
	color: #F00;
	font-weight: bold;
}

window.onload = initForms;

function initForms() {
	for (var i=0; i< document.forms.length; i++) {
		document.forms[i].onsubmit = validForm;
	}
}

function validForm() {
	var allGood = true;
	var allTags = document.getElementsByTagName("*");

	for (var i=0; i<allTags.length; i++) {
		if (!validTag(allTags[i])) {
			allGood = false;
		}
	}
	return allGood;

	function validTag(thisTag) {
		var outClass = "";
		var allClasses = thisTag.className.split(" ");
	
		for (var j=0; j<allClasses.length; j++) {
			outClass += validBasedOnClass(allClasses[j]) + " ";
		}
	
		thisTag.className = outClass;
	
		if (outClass.indexOf("invalid") > -1) {
			thisTag.focus();
			if (thisTag.nodeName == "INPUT") {
				thisTag.select();
			}
			return false;
		}
		return true;
		
		function validBasedOnClass(thisClass) {
			var classBack = "";
		
			switch(thisClass) {
				case "":
				case "invalid":
					break;
				case "reqd":
					if (allGood && thisTag.value == "") {
						classBack = "invalid ";
					}
					classBack += thisClass;
					break;
				default:
					if (allGood && !crossCheck(thisTag,thisClass)) {
						classBack = "invalid ";
					}
					classBack += thisClass;
			}
			return classBack;
		}
				
		function crossCheck(inTag,otherFieldID) {
			if (!document.getElementById(otherFieldID)) {
				return false;
			}
			return (inTag.value == document.getElementById(otherFieldID).value);
		}
	}
}