脚本:
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("*");
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:
classBack += thisClass;
}
return classBack;
}
}
}
此代码旨在检查用户是否在 HTML 表单中输入了必填字段。如果用户离开了必填字段，该字段将用颜色标记。
在上面的代码中，函数 validTag(thisTag) 是做什么的？什么是标识符无效？这没有在 HTML 文件的任何地方声明。如果这里是 HTML 文件:
<html>
<head>
<title>Car Picker</title>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" href="script.css" />
</head>
<body>
<h2 align="center">Car Picker</h2>
<form action="#">
<p>
<label for="emailAddr">Enter your email address: <input id="emailAddr" type="text" size="30" class="reqd email" />
</label></br />
<label for="emailAddr2">Re-enter your email address:<input id="emailAddr2" type="text" size="30" class="reqd emailAddr" />
</label>
</p>
<p><label for="color">Colors:
<select id="color" class="reqd">
<option value="" selected="selected">Choose a color</option>
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
</select>
</label></p>
<p>Options:
<label for="sunroof"><input type="checkbox" id="sunroof" value="Yes" />Sunroof (Two door only)</label>
<label for="pWindows"><input type="checkbox" id="pWindows" value="Yes" />Power Windows</label>
</p>
<p><label for="DoorCt">Doors:
<input type="radio" id="twoDoor" name="DoorCt" value="twoDoor" class="radio" />Two
<input type="radio" id="fourDoor" name="DoorCt" value="fourDoor" class="radio" />Four
</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;
}
select {
margin-left: 80px;
}
input {
margin-left: 30px;
}
input+select, input+input {
margin-left: 20px;
}
最佳答案
如果设置了reqd 类，如果指定的控件为空，则validBasedOnClass 函数返回类名invalid。在这种情况下，该类被添加到控件中。
如果添加了 invalid 类，控件也会获得焦点。
所以它基本上是一个表单验证器，可确保在发布表单之前填写所有类 reqd 的输入。
但是，如果您显然不知道这段代码的作用，那么您是从哪里得到这段代码的呢？看起来也很非结构化代码。我不会使用它。
关于javascript - 这个方法有什么作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7470285/