javascript学习(7):表单输入“必填,已经两次输入密码必须一样”检查



建立必须填写的字段
检查在用户单击表单的Submit 按钮时进行检查。红色的边框和黄色的内部颜色突出显示未填写的字段。
<!DOCTYPE html>
<html>
<head>
<title>Password Check</title>
<style type="text/css">
body {
	color: #000;
	background-color: #FFF;
}

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

label.invalid {
	color: #F00;
	font-weight: bold;
}
</style>
</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">&nbsp;<input type="reset">
		</p>
	</form>
	<script>
		window.onload = initForms;
		function initForms() {
			for ( var i = 0; i < document.forms.length; i++) {
				document.forms[i].onsubmit = validForm;
//当onsubmit 处理程序返回false 值时,表单就不会被传递回服务器。只有在返回true 值时,服务器才会收到表单
			}
		}
		function validForm() {
			var allGood = true;
			var allTags = document.getElementsByTagName("*");
//是非常有用的——星号让JavaScript 返回一个包含页面上所有标签的数组。然后,就可以遍历allTags 数组来寻找感兴趣的标签。

//这个循环在allTags 中进行搜索,而if 条件语句调用validTag()函数,这会检查每个标签,了解是否有什么东西阻止表单提交这个页面。传递给validTag()函数的是allTags[i],也就是当前正在处理的对象。如果任何标签导致validTag()返回false,就将allGood 设置为false。但是,即使已经出现了false,我们仍然继续循环遍历所有标签。
			for ( var i = 0; i < allTags.length; i++) {
				if (!validTag(allTags[i])) {
					allGood = false;
				}
			}
//现在返回allGood,以此表明是否应该继续提交表单。
			return allGood;
			function validTag(thisTag) {
				var outClass = "";
				var allClasses = thisTag.className.split(" ");
//以上的含义:对于每个标签,我们希望检查每个class 属性(请记住,class 可以设置为多个属性)。创建allClasses 数组并且用thisTag.className.split(" ")设置它。这个函数会按照传递给它的字符串,将字符串分割为数组。在这里,分割符字符串是一个空格,所以它会将字符串"this that and the other"转换为一个包含5 个元素的数组:this、that、and、the 和other。我们希望检查每个class 属性,因为class 表示我们希望对每个表单字段进行什么处理。在这个示例中,我们关心的一个值是reqd,这表示必须填写这个字段。如果任何表单字段具有class 值reqd,那么它必须包含某些值。
				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:
						classBack += thisClass;
					}
					return classBack;
				}
			}
		}
	</script>
</body>
</html>
通过突出显示背景色让用户知道某个字段有问题,从而确保用户正确输入密码
此事例会一个一个的文本输入框的检查,从第一个开始,如果第一个填写内容了,第二个没有填写,就会将第二个突出显示。第三个不变。



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

		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 来实现,它只是确保用户两次输入的密码是相同的。



标识有问题的字段,当发现错误时,这个脚本会突出显示错误的字段的标签
将输入字段的边框改为红色是很不错的,但是如果能够让有问题的字段再醒目一点儿就更好了。
在这个示例中,你将学习如何将字段旁边的标签设置为红色的粗体字,从而使出问题的字段更加明显。同样,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";
					}
				}
				//------------------
			}
		}























你可能感兴趣的:(JavaScript,脚本)