Fatal编程技术网
  • javascript/
  • Javascript JS中数据验证程序代码中的棘手错误

Javascript JS中数据验证程序代码中的棘手错误

javascript forms validation input

Javascript JS中数据验证程序代码中的棘手错误,javascript,forms,validation,input,Javascript,Forms,Validation,Input,我在JS中的数据验证器代码中有一个非常棘手的错误，因为我需要创建一个函数来查看页面中的所有HTML用户表单，因为我必须输入大量的输入来检查，如果第一个输入包含错误，代码就可以正常工作，但是当第一个输入不包含错误时，代码就完全不工作了。我分别检查了循环和if条件，但我看不到错误，似乎我需要重新检查整个页面的代码如下： <!doctype html> <html> <head> <meta charset="utf-8"> <title>U

我在JS中的数据验证器代码中有一个非常棘手的错误，因为我需要创建一个函数来查看页面中的所有HTML用户表单，因为我必须输入大量的输入来检查，如果第一个输入包含错误，代码就可以正常工作，但是当第一个输入不包含错误时，代码就完全不工作了。我分别检查了循环和if条件，但我看不到错误，似乎我需要重新检查整个页面的代码如下：

<!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>


无标题文件
#气球{
边框：实心1px#c0；
背景颜色：黄色；
字体大小：11px；
字体系列：verdana；
填充物：5px；
位置：绝对位置；
z指数：2；
可见性：隐藏；
}
var bstatus=“关”；
var Errmsg=“”；
//1） 函数显示错误消息ballon并由下面的checkall（x）函数使用
函数Showmsg（错误，Frm）{
if（！document.getElementById（“ballon”）{//检查是否创建了ballon div
var ballon=document.createElement（“div”）
ballon.id=“ballon”；
document.body.appendChild（ballon）；}
否则{
var ballon=document.getElementById（“ballon”）；
}
if（bstatus==“on”）{//检查气囊是否可见
气球样式顶部=Frm.offsetTop+“px”；
气球样式左=Frm.offsetLeft+Frm.offsetWidth+5+“px”；
ballon.innerHTML=错误；
}否则{
bstatus=“on”；
ballon.style.visibility=“可见”；
气球样式顶部=Frm.offsetTop+“px”；
ballon.style.left=Frm.offsetLeft+Frm.offsetWidth+5+“px”；ballon.innerHTML=error；
} 
}//功能结束
//2） 隐藏错误消息ballon并由下面的checkall（）函数使用
函数Hidemsg（）{
bstatus=“off”Errmsg=“”；
var ballon=document.getElementById（“ballon”）；
ballon.innerHTML=“”；
ballon.style.visibility=“hidden”；
}
函数write（number）{//检查循环中的位置
var gad=document.getElementById（“gad”）；
gad.innerHTML=gad.outerHTML+number；
}
//3） 检查所有函数以查看输入表单的值是否正确
函数checkall（x）{
对于（i=0；i
问题出在Hidemsg中，它试图在“气球”不在屏幕上时隐藏它并导致错误，只需在运行代码之前添加一个测试以查看气球是否存在

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

}
fiddle

将尝试在第一个输入中输入有效的txt，但它对表单中的其余输入将完全无效，而如果有无效数据，它将按计划工作是的，它工作！非常感谢您的时间和支持如果此问题现在为您解决，您可以将此标记为答案，干杯