更多用户友好形式

所以我有这个注册表格，我用javascript检查事情。当它有正确的输入时，我会让它颜色改变。如果所有的netrys都是正确的，我会让提交按钮变得可见。但问题是当我在我的最后一个文本框中，为了让代码运行，我必须单击另一个文本框，因此我在其中添加了一个额外的复选框，以便用户必须检查它并验证它是否正常并显示提交按钮。但是如果我添加这个复选框，整个脚本就不再工作了。更多用户友好形式

<script> 
     function start(){ 
      var element=document.getElementById("name"); 
      element.style.background="yellow"; 
      element=document.getElementById("pass1"); 
      element.style.background="yellow"; 
      element=document.getElementById("pass2"); 
      element.style.background="yellow"; 
      element=document.getElementById("email"); 
      element.style.background="yellow"; 
      document.getElementById('button').style.visibility='hidden'; 
     } 
     function check(obj,form){ 
      var check=0; 
      var data1=form.pass1.value; 
      var data2=form.pass2.value; 
      var element=document.getElementById("pass1"); 
      var element2=document.getElementById("pass2"); 
      if(data1==data2 && data1!=null && data2!=null && data1!='' && data2!=''){ 
       element.style.background="green"; 
       element2.style.background="green"; 
       check++; 
      } 
      element=document.getElementById("name"); 
      data1=form.name.value; 
      if(data1==null || data1==''){ 
       element.style.background="yellow"; 
      } 
      else{ 
       element.style.background="green"; 
       check++; 
      } 
      element=document.getElementById("email"); 
      data1=form.email.value; 
      var atpos=data1.indexOf("@"); 
      var dotpos=data1.lastIndexOf("."); 
      if(atpos<1 || dotpos<atpos+2 || dotpos+2>=data1.length){ 
       element.style.background="yellow"; 
      }else{ 
       element.style.background="green"; 
       check++; 
      } 
      if(check==3){ 
       document.getElementById('button').style.visibility='visible'; 
      }else{ 
       document.getElementById('check').checked=false; 
      } 
      obj.style.background="yellow"; 
     } 
    </script> 
</head> 
<body onload="start();"> 
    <div id="register"> 
    <form name="login" action="logon.php" method="post"> 
     Username:<input id="name" onfocus="check(this,this.form)" name="username" type="text" size="14"/><br> 
     Password:<input id="pass1" onfocus="check(this,this.form)" name="password1" type="password" size="14"/><br> 
     Repeat Password:<input id="pass2" onfocus="check(this,this.form)" name="password2" type="password" size="14"/><br> 
     Email:<input id="email" onfocus="check(this,this.form)" name="email" type="text" size="14"/><br> 
     Validate<input id="check" onfocus="check(this,this.form)" type="checkbox"/><br> 
     <input type="submit" id="button" name="submit" value="Register"/> 
    </form> 
    </div>

来源

2013-07-16 stevedc

焦点事件触发只有当你进入这个领域。你尝试过'改变'或'键盘'事件吗？ 'keyup'可能需要更多的处理能力，但看着你的代码应该不成问题。当你离开现场并发生变化时，“变化”就会发生。 – Puuskis

我希望你有一个很好的理由不使用CSS和jQuery。 – n3rd

onchange和keyup不会做任何事情 – stevedc

更改您的复选框的ID别的东西。然后它会工作例如： -

<input id="checkbox" onfocus="check(this,this.form)" type="checkbox"/>

来源

2013-07-16 10:43:15 Dilantha

如果我改变onchange到onchange代码做它必须做的事情 – stevedc

更多用户友好形式

回答

相关问题