用JS检测必须填写的字段是否为空（使用了函数嵌套）_浏览器调试js代码如何查看form表单中哪些必填字段没有值-CSDN博客

本文链接：https://blog.csdn.net/czkct/article/details/52054165

test7271219.html

<!DOCTYPE html>
<html>
<head>
	<title>Password Check</title>
	<link rel="stylesheet" href="script7271219.css">
	<script src="script7271219.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"></label>
	</P>
	<P>
		<input type="submit" value="Submit"> <input type="reset" value="Reset">
	</P>
</form>
</body>
</html>

<!--  一个HTML文件  如果在浏览器中不显示  很有可能是标签写错了， 标签检查的时候  在sublime中可以看标签是否前后对应（如果对应就会有下划线）  -->

script7271219.css

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

/*invalid是无效的意思*/
/*input无效时的样式  inset 就是border框内嵌效果   而outset相应的就是外凸效果*/
input.invalid {
	background-color: #FF9;
	border: 2px red inset;
}

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

script7271219.js

window.onload = function() {
	document.forms[0].onsubmit = validForm;
}

//检查是否是有效表单
function validForm() {
	var allGood = true;
	var allTags = document.forms[0].getElementsByTagName("*");

	for(var i = 0; i < allTags.length; i++) {
		if(!validTag(allTags[i])) {
			allGood = false;
		}
	}
	// alert(allGood);
	// alert(document.getElementById("passwd1").className);
	return allGood; 
	//返回true或者false  (如果不满足提交条件就return false  那么表单就不会提交到action目标)

	//检查是否是有效标签
	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;//如果标签类名包含“invalid”  就是无效标签
		}
		return true;  //否则就是有效标签


		//检查类名是否有效
		function validBasedOnClass(thisClass) {
			var classBack = "";

			switch(thisClass) {
				case "":
				case "invalid":
					break;
				case "reqd":
					if(allGood && thisTag.value == "") {
						classBack = "invalid ";
						//注意这里invalid 后面是有一个空格的！！！这里浪费了我很久时间  调试了很长时间
					}
					classBack += thisClass;
					break;
				default:
					classBack += thisClass;
			}
			return classBack;
		}
	}
}

/*
丨经验总结丨：
1.Js中函数嵌套，函数嵌套定义只能出现在函数，不能出现在选择语句或循环语句中；
2.嵌套定义的函数只能在嵌套的函数中使用；貌似位置无所谓  哪怕是写在return语句后面
3.看第50行，可以知道  多层嵌套的函数，子函数中可以直接使用祖父函数中的变量的值

*/