javascript学习（7）：表单输入“必填，已经两次输入密码必须一样”检查

[color=red]建立必须填写的字段[/color]
检查在用户单击表单的Submit 按钮时进行检查。红色的边框和黄色的内部颜色突出显示未填写的字段。

	

		

			Your name:				id="userName" class="reqd"> 
		
		

			Choose a password: 				type="password" id="passwd1" class="reqd"> 
		
		

			Verify password:				id="passwd2" class="reqd passwd1"> 
		
		

			 
		
	
	


通过突出显示背景色让用户知道某个字段有问题，从而确保用户正确输入密码
此事例会一个一个的文本输入框的检查，从第一个开始，如果第一个填写内容了，第二个没有填写，就会将第二个突出显示。第三个不变。

[color=red]根据其他字段对字段进行检查[/color]
经常需要根据另一个字段对一个字段进行检查，尤其是在要求用户设置密码时。为了确保密码正确，希望用户输入密码两次，并确保两次的输入完全相同。
对两个密码字段进行核对，确保它们的内容是相同的。如果不匹配，突出显示。

		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);
				}
			}
		}

提示
 这个脚本并没有根据主密码数据库检查用户输入的密码是否有效，这种任务需要服务器上的CGI 来实现，它只是确保用户两次输入的密码是相同的。

[color=red]标识有问题的字段，当发现错误时，这个脚本会突出显示错误的字段的标签[/color]

将输入字段的边框改为红色是很不错的，但是如果能够让有问题的字段再醒目一点儿就更好了。
在这个示例中，你将学习如何将字段旁边的标签设置为红色的粗体字，从而使出问题的字段更加明显。同样，HTML 和CSS 文件没有改动，我们在脚本中添加了几行JavaScript 代码以进一步突出显示输入错误。

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) {
					//-------------------add Code
					invalidLabel(thisTag.parentNode);
					//------------------------
					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);
				}
				//-------------------add Code
				function invalidLabel(parentTag) {
					if (parentTag.nodeName == "LABEL") {
						parentTag.className += " invalid";
					}
				}
				//------------------
			}
		}