Question

我在JS中的数据验证器代码中有一个非常棘手的错误，因为我需要创建一个函数来检查页面中的所有HTML用户表单，因为我必须输入要检查的输入数量，代码才能正常工作如果第一个输入包含错误但在第一个输入不包含错误时根本不起作用。我检查了循环，如果条件分开，我看不到错误，看起来我需要一个新的眼睛整个页面的代码在这里：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
#ballon{
border:solid 1px #c0c0c0;
background-color:yellow;
font-size:11px;
font-family:verdana;
padding:5px;
position:absolute;
z-index:2;
visibility:hidden;
}

</style>
<script language="javascript">

var bstatus="off";
var Errmsg="";

//1)function show error message ballon and used by checkall(x) function below
 function Showmsg(error,Frm){
 if(!document.getElementById("ballon")){//to check if the ballon div is created or not
 var ballon=document.createElement("div")  
 ballon.id="ballon";
  document.body.appendChild(ballon); }
  else{ 
  var ballon=document.getElementById("ballon");
   }

 if(bstatus=="on"){//to check if the ballon is visible or not
 ballon.style.top=Frm.offsetTop +"px";
 ballon.style.left=Frm.offsetLeft+ Frm.offsetWidth + 5 +"px";
 ballon.innerHTML=error;    
}else{  
 bstatus="on"; 
 ballon.style.visibility="visible";
 ballon.style.top=Frm.offsetTop +"px";
 ballon.style.left=Frm.offsetLeft+ Frm.offsetWidth + 5 +"px";     ballon.innerHTML=error; 
 } 
 }//end of function

 //2)hide the error message ballon and used by checkall() function below
  function Hidemsg(){
bstatus="off";  Errmsg=""; 
var ballon=document.getElementById("ballon");
ballon.innerHTML=""; 
 ballon.style.visibility="hidden";

 }

 function write(number){//to check where we are in the looping
 var gad=document.getElementById("gad");
 gad.innerHTML=gad.outerHTML+ number;
 }

 //3) check all function to review if values of the input forms  

  function checkall(x){
  for(i=0;i<x;i++){//to loop on all input in form we need to check
  var Formtype=" ";  
  var Myform=" ";
  Myform=document.forms[0].elements[i];
  Formtype=Myform.getAttribute("title");

  switch(Formtype){ 
  case "txt":
  var value2check=/^[a-zA-Z]+$/; 
  var Errmode="Please enter text only"; break;
   case "num":
  var value2check=/^[0-9]+$/; 
  var Errmode="Please enter number only";break;
  case "both":
  var value2check=/^[0-9a-zA-Z]+$/;
  var Errmode="No simples are allowed only alphanumerical values"; break;
   case "email":
  var value2check= /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/; 
   var Errmode="Please enter valid Email"; break;
   case "domain":
  var value2check= /((?:https?\:\/\/|www\.)(?:[-a-z0-9]+\.)*[-a-z0-9]+.*)/i; 
  var Errmode="Please enter valid URL"; break;
  default: 
  var value2check="";
  }//end of switch

  if(Myform.value.length!=0 || Myform.value!=""){//to check if the form value is not null
   if(Myform.value.match(value2check)){ 
       Errmsg="";  Hidemsg(); 
   write(Myform.name+" "+i+" "+bstatus+"<br>");//to test the where we are in the loop
  }else{
    Errmsg=Errmode;       Showmsg(Errmsg,Myform);     break;
    } //end of inner If condition
   }else{   
    Errmsg="Please fill in blank data";
Showmsg(Errmsg,Myform); break; 
}//end of if statment 
      }//end of for loop
    }//end of checkall function


    </script>
    </head>

    <body>
    <form action="" method="post">
     Name of the New table:<input name="tblname" type="text"  id="elem" placeholder="Enter tablename" title="txt"><br><br>
     Number of columns:&nbsp;<input type="text" name="colnumb" placeholder="colnum" title="num"   value="" size="3" maxlength="3" lenght="3"><br><br>   Table Type:&nbsp;<select name="Tbltype"><option value="MyISAM"selected>MyISAM<option value="InnoDB">InnoDB<option value="CSV">CSV<option value="ARCHIVE">ARCHIVE</select><br><br>

     <input type="button" name="next" value="Next >>" onclick="checkall(2)">

     </form> 
     <div id="gad"></div>
     </body>
      </html>

Answer 1

问题出在Hidemsg，它试图隐藏＆＃34;气球＆＃34;当它不在屏幕上并导致错误时，只需在运行代码之前添加一个测试以查看气球存在

function Hidemsg() {
    bstatus = "off";
    Errmsg = "";
    var ballon = document.getElementById("ballon");
    if(ballon)
    {
        ballon.innerHTML = "";
        ballon.style.visibility = "hidden";
    }

}

小提琴http://fiddle.jshell.net/leighking2/5u7oyvqz/

JS中数据验证器代码中的棘手错误

1 个答案: