用JS检测必须填写的字段是否为空（使用了函数嵌套）

66 阅读 0 评论 44 点赞

我是靠谱客的博主威武发带，最近开发中收集的这篇文章主要介绍用JS检测必须填写的字段是否为空（使用了函数嵌套），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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行，可以知道
多层嵌套的函数，子函数中可以直接使用祖父函数中的变量的值
*/