JavaScript实用示例之根据其他字段对字段进行检查

最新推荐文章于 2023-10-27 15:28:33 发布

xiaoliangmei

最新推荐文章于 2023-10-27 15:28:33 发布

阅读量3.1k

点赞数

分类专栏： Java Web 文章标签： javascript function input stylesheet class 服务器

本文链接：https://blog.csdn.net/xiaoliangmeiny/article/details/7482829

版权

Java Web 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

在填写表单时，可能希望指定用户必须填写某些字段，然后才能提交表单。可以使用JavaScript检查某些或所有字段是否已经填写了。在这个示例中，使用了HTML、CSS和JavaScript通过红色的边框和黄色的内部颜色突出显示未填写的字段。检查在用户单击表单的Submit按钮时进行。

也经常需要根据另一个字段对一个字段进行检查，尤其是在要求用户设置密码时。为了确保密码正确，希望用户输入密码两次，并确保两次的输入完全相同。此示例当检查无效时，无效的字段会显示红色的边框。

密码检查示例的HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Password Check</title>
	<link type="text/css" rel="stylesheet" href="script01.css" />
	<script type="text/javascript" src="script01.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 = function() {return validForm();}
	}
}//这个函数遍历页面上的每个表单

function validForm() {
	var allGood = true;
	var allTags = document.getElementsByTagName("*");
//星号让JavaScript返回一个包含页面上所有标签的数组。
	for (var i=0; i<allTags.length; i++) {
		if (!validTag(allTags[i])) {
			allGood = false;
		}
	}
	return allGood;
//返回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);
		}
	}
}

document.forms[i].onsubmit = function() {return validForm();

对每个表单，它为表单的onsubmit添加一个事件处理程序：对function(){return validForm();}的调用。这是另一个匿名函数，但是这一次它要执行一些操作：它返回true或false，告诉浏览器是否继续处理动作属性。当onsubmit处理程序返回false值时，表单就不会被传递回服务器。只有在返回true时，服务器才会收到表单(因此运行动作属性中存储的CGI)。

if (outClass.indexOf("invalid") > -1) {

在新的class属性中可能返回的值之一是单词invalid，所以要检查它。如果在新的类中找到了invalid，就说明有问题，因此执行对应的操作。

thisTag.focus();

如果这个表单字段可以获得焦点，那么希望将焦点放进这个字段，这一行就完成这个任务。这是让用户知道哪个字段有问题的一种方法。

if (thisTag.nodeName == "INPUT") {thisTag.select();}

判断当前查看的这个标签是<INOUT>标签吗？如果是，就选择它的值，让用户能够轻松的修改它。

function crossCheck(inTag,otherFieldID) {

if (!document.getElementById(otherFieldID))

{return false;}

return (inTag.value == document.getElementById(otherFieldID).value);

}它接收当前标签和检查所针对的另一个字段id。在这个示例中，当前标签是passwd2<input>，另一个字段的id是passwd1。如果另一个字段不存在，就无法进行检查，这就说明有问题，所以函数返回false。否则，这两个字段都存在，所以可以比较它们的值：如果相同，就返回true，否则返回false。

(源《JavaScript基础教程》)

xiaoliangmei

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实用示例之根据其他字段对字段进行检查

在填写表单时，可能希望指定用户必须填写某些字段，然后才能提交表单。可以使用JavaScript检查某些或所有字段是否已经填写了。在这个示例中，使用了HTML、CSS和JavaScript通过红色的边框和黄色的内部颜色突出显示未填写的字段。检查在用户单击表单的Submit按钮时进行。也经常需要根据另一个字段对一个字段进行检查，尤其是在要求用户设置密码时。为了确保密码正确，希望用
复制链接

扫一扫