js基础教程脚本7-5、6、7源码亲测不能实现目标效果 求解


window.onload=initForm;
function initForm()
{
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+=validClass(allClasses[j])+" ";
}
thisTag.className=outClass;
if(outClass.indexOf("invalid")>-1)
{
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:
classBack+=thisClass;
}
return classBack;
}
}
}
<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>
body
{
color: #000;
background-color: #FFF;
}
input.invalid
{
background-color:#FF9;
border: 2px red inset;
}label.invalid
{
color:#F00;
}

解决方案 »

  1.   

    <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>
    window.onload=initForm;
    function initForm()
    {
        for(var i=0;i<document.forms.length;i++)
        {
            document.forms[i].onsubmit=function(){return validForm(this);}
        }
    }
    function validForm(f)
    {
        var allGood=true;
        var allTags= f.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)
            {
    thisTag.focus();
                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:
                        classBack+=thisClass;
                }
                return classBack;
            }
        }
    } </script>
           <style>
    body
    {
        color: #000;
        background-color: #FFF;
    }
    input.invalid
    {
        background-color:#FF9;
        border: 2px red inset;
    }label.invalid
    {
        color:#F00;
    }    </style>
        </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>
    Type:
    <select class="reqd">
    <option value="">none</option>
    <option value="11">1</option>
    <option value="22">2</option>
    </select>
    </p>
                <p><input type="submit"  />&nbsp;<input type="reset" /></p>
            </form>
        </body>
    </html>
    试试
      

  2.   

    直接将2楼的 HTML code 代码 复制 另存为 ××.html 双击运行就可以了.
      

  3.   

    嗯 可以了 多谢！还有document.forms[i].onsubmit=function(){return validForm(this)与document.forms[i].onsubmit=validForm(this)有何区别
      

  4.   

    另外validTag函数和validClass函数都是嵌套在validForm函数中，可否分开
      

  5.   

    单独看的话，不考虑其他情况document.forms[i].onsubmit=function(){return validForm(this)
    这个this指向的是forms[i]document.forms[i].onsubmit=validForm(this)
    这个this指向的window
    这里没onsubmit 就直接 validForm(this) 运行了，所以是指向window楼主记住 this始终指向调用该方法的对象。建议楼主还是买本书看看，或者
    http://www.w3school.com.cn/b.asp
      

  6.   

    没有this的话document.forms[i].onsubmit=function(){return validForm()与document.forms[i].onsubmit=validForm()的区别呢