JAVASCRIPT 一些小问题，大家进来看看

本帖最后由 renyiqiu 于 2011-08-12 23:29:26 编辑

解决方案 »

  1.   

                    if(allGood && thisTag.value==""){
                       classBack="invalid";
                    }
                    else classBack+=thisClass;<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
     <head>
      <title> New Document </title>
    <style>
    body {
        color: #000;
        background-color: #FFF;
    }input.invalid {
        background-color: #FF9;
        border: 2px red inset;
    }label.invalid {
        color: #F00;
        font-weight: bold;
    }</style>

      <script type="text/javascript">
     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){
             if(thisTag.className=="INPUT"){
                thisTag.focus();
                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";
                    }
                    else classBack+=thisClass;
                    break;
                default:
                    classBack+=thisClass;
            }
            return classBack;
         }
       }
    } 
      </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" size="30" id="passwd1" class="reqd"/></label></p>
        <p><label for="passwd2">Verify password:<input type="password" size="30" id="passwd2" class="reqd passwd1"/></label></p>
        <p><input type="submit" value="Submit" />&nbsp;<input type="reset"/></p>
       </form> 
     </body>
    </html>
      

  2.   


    测试了，当点击多两次提交按钮，依然会提交表单的，阻止不了。
    我改了改，这里
    function validBasedOnClass(thisClass){
            var classBack="";
            switch(thisClass){
                case "":
                case "invalid":break;
                case "reqd":
                    if(allGood && thisTag.value==""){
                       classBack="invalid "; //classBack="invalid "; 多加一个空格
                    }
                    classBack+=thisClass;
                    break;
                default:
                    classBack+=thisClass;
            }
            return classBack;
         }这样就正常了
      

  3.   

    其实我有点不明白
    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;
      

  4.   


    本身html标签的css不是就那样吗？多个CSS样式控制的时候
    <div class="green bold test"></div>
    这上面就是3个样式，所以要起作用，当然要在不同的CSS之间加空格了