<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>password check</title>
<script src="js/password check.js"></script>
<link rel="stylesheet" href="css/password check.css" />
</head>
<body>
<form action="">
<p><label for="userName">Your name:<input type="text" id="userName" class="reqd" /></label></p>
<p><label for="passWord">Password:<input type="password" id="passWord" class="reqd" /></label></p>
<p><label for="passWordRepeat">Password repeat:<input type="password" id="passWordRepeat" class="reqd passwd1" /></label></p>
<p><input type="submit"  />&nbsp;<input type="reset" /></p>

</form>
</body>
</html>
input.invalid
{
background-color:#FF9;
border: 2px red inset;
}label.invalid
{
color:#F00;
}
/**
 * @author Administrator
 */
window.onload=initForm;
function initForm()
{
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+=validClass(allClasses[j])+" ";
}
thisTag.className=outClass;
if(outClass.indexOf("invalid")>-1)//即目标字符串中找到包含invalid的字符
{
validLabel(thisTag.parentNode);
thisTag.focus();
if(thisTag.nodeName=="INPUT")
{
thisTag.select();
}
return false;
}
return true;

function validClass(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);
}

function validLabel(parentTag)
{
if(parentTag.nodeName=="LABEL")
{
parentTag.className+=" invalid";
}
}
}
}问题1:函数validTag、validClass、crossCheck、validLabel为什么要嵌套在validForm中,而不像initForm和validForm之间互相独立?
问题2:allclasses为什么要拆分后又组合,为什么要多此一举?
问题3:LABEL为什么要大写, 我试了小写后就没有效果了.

解决方案 »

  1.   

    嵌套在validForm只能在 validForm 中访问。可以避免密码冲突问题3:LABEL为什么要大写, 我试了小写后就没有效果了
    js 区分大小写
      

  2.   

    问题1:函数validTag、validClass、crossCheck、validLabel为什么要嵌套在validForm中,而不像initForm和validForm之间互相独立? 
       validTag、validClass、crossCheck、validLabel 为validForm的局部函数相当于局部变量
      

  3.   

    那crossCheck(inTag,otherFieldId)也应该是validClass(thisClass)的局部函数,为什么又放在validClass(thisClass)的函数体外?