使用js表单验证器禁用html表单提交按钮

UPDATE测试并工作的代码：

<input type="text" id="signupemail" oninput="verifyemail();">
<div id="signupemailerrors"></div>
<input type="password" id="signuppassword" oninput="verifypassword();">
<div id="signuppassworderrors"></div>
<input type="text" id="signupage" oninput="verifyage();">
<div id="signupageerrors"></div>
<input type="text" id="signupusername" oninput="verifyusername();">
<div id="signupusernameerrors"></div>
<input type="submit" id="signupformsubmit">
<script>
    var validemail = false ;
    var validpassword = false ;
    var validusername = false ;
    var validage = false ;
    verifysubmit();
    function verifyemail(){
        var email = document.getElementById("signupemail").value;
        var emailerror = document.getElementById("signupemailerrors");
        var emailregex = /^(([^<>()'[']''.,;:'s@"]+('.[^<>()'[']''.,;:'s@"]+)*)|(".+"))@(('[[0-9]{1,3}'.[0-9]{1,3}'.[0-9]{1,3}'.[0-9]{1,3}])|(([a-zA-Z'-0-9]+'.)+[a-zA-Z]{2,}))$/;
        validemail = true;
        emailerror.innerHTML = "";
        if (email.length == 0) {
            emailerror.innerHTML = "Please fill in." ;
            validemail = false ;
        } else if (email.length > 254) {
            emailerror.innerHTML = "Maximum length exceeded.";
            validemail= false ;
        } else if (!email.match(emailregex)) {
            emailerror.innerHTML = "Invalid email address.";
            validemail = false ;
        }
        verifysubmit();
    }

    function verifypassword(){
        var password = document.getElementById("signuppassword").value;
        var passworderror= document.getElementById("signuppassworderrors") ;
        validpassword = true;
        passworderror.innerHTML = "";
        if (password.length == 0) {
            passworderror.innerHTML = "Please fill in." ;
            validpassword = false ;
        } else if (password.length < 8) {
            passworderror.innerHTML = "At least 8 characters required.";
            validpassword= false ;
        } else if (password.length > 254) {
            passworderror.innerHTML = "Maximum length exceeded.";
            validpassword= false ;
        } 
        verifysubmit();
    }

    function verifyusername(){
        var username = document.getElementById("signupusername").value;
        var usernamerror= document.getElementById("signupusernameerrors") ;
        validusername = true;
        usernamerror.innerHTML = "";
        if (username.length == 0) {
            usernamerror.innerHTML = "Please fill in." ;
            validusername = false ;
        } else if (username.length < 3) {
            usernamerror.innerHTML = "At least 3 characters required.";
            validusername= false ;
        } else if (username.length > 50) {
            usernamerror.innerHTML = "Maximum length exceeded.";
            validusername= false ;
        } 
        verifysubmit();
    }

    function verifyage(){
        var age = document.getElementById("signupage").value ;
        var ageerror = document.getElementById("signupageerrors") ;
        var ageregex = /^'d+$/;
        validage = true;
        ageerror.innerHTML = "";
        if (age.length == 0){
            ageerror.innerHTML = "Please fill this field";
            validage = false;
        } else if ((age > 130) || (age == 0)) {
            ageerror.innerHTML = "Please provide your real age." ;
            validage = false;
        } else if (!age.match(ageregex)) {
            ageerror.innerHTML = "Only numbers allowed."
            validage = false;
        }
        verifysubmit();
    }

    function verifysubmit() {
        if (!validage || !validemail || !validpassword || !validusername)
            document.getElementById("signupformsubmit").disabled = true;
        else
            document.getElementById("signupformsubmit").disabled = false;
        console.log(validage + "  " + validemail + "  " + validpassword + "  " + validusername);
    }
</script>

我设法解决了这个问题。已解决链接jsfiddle。如果你能想出一个更简单的方法来解决这个问题，请评论。非常感谢你的帮助。

var validemail = false ;
var validpassword = false ;
var validusername = false ;
var validage = false ;

function verifyemail()
{
    var email = document.getElementById("signupemail").value ;
    var error = document.getElementById("signupemailerrors") ;
    var emailregex = /^(([^<>()'[']''.,;:'s@"]+('.[^<>()'[']''.,;:'s@"]+)*)|(".+"))@(('[[0-9]{1,3}'.[0-9]{1,3}'.[0-9]{1,3}'.[0-9]{1,3}])|(([a-zA-Z'-0-9]+'.)+[a-zA-Z]{2,}))$/ ;
    if(email.length < 254){
    if( email.length > 0 ){
        if(email.match(emailregex)){
            error.innerHTML = "";
            validemail = true ;
            verifysubmit();
        }
        else
        {
            error.innerHTML = "Invalid email address.";
            validemail = false ;
            verifysubmit();
        }
    }else
    {
        error.innerHTML = "Please fill in." ;
        validemail = false ;
        verifysubmit();
    }
} else
{
    error.innerHTML = "Maximum length exceeded.";
    validemail= false ;
    verifysubmit();
}
}
function verifypassword(){
    var password = document.getElementById("signuppassword").value;
    var passworderror= document.getElementById("signuppassworderrors") ;
    if (password.length < 254){
    if(password.length > 7){
    passworderror.innerHTML = "";
    validpassword = true ;
    verifysubmit();
    }
        else if(password.length == 0)
    {
        passworderror.innerHTML = "Please fill in.";
        validpassword = false ;
        verifysubmit();
    }
    else
    {
        passworderror.innerHTML = "At least 8 characters required.";
        validpassword = false ;
        verifysubmit();
    }
}
    else
    {
        passworderror.innerHTML = "Maximum length exceeded.";
        validpassword = false ;
        verifysubmit();
    }
}
function verifyusername(){
    var username = document.getElementById("signupusername").value ;
    var usernamerror = document.getElementById("signupusernameerrors") ;
    if (username.length == 0)
    {
        usernamerror.innerHTML = "Please fill in.";
        validusername = false;
        verifysubmit();
    }
    else if (username.length > 50)
    {
        usernamerror.innerHTML = "Maximum length exceeded.";
        validusername = false;
        verifysubmit();
    }
    else
    {
        usernamerror.innerHTML = "";
        validusername = true;
        verifysubmit();
    }
}
function verifyage(){
    var age = document.getElementById("signupage").value ;
    var ageerror = document.getElementById("signupageerrors") ;
    var ageregex = /^'d+$/;
    if(age.length == 0){
        ageerror.innerHTML = "Please fill this field";
        validage = false;
        verifysubmit();
    }
    else
    {
    if (age.match(ageregex)){
        if (age == 0){
        ageerror.innerHTML = "Please provide your real age." ;
        validage = false;
        verifysubmit();
        }
        else if(age > 130){
        ageerror.innerHTML = "Please provide your real age." ;
        validage = false;
        verifysubmit();
        }
        else
        {
        ageerror.innerHTML = "" ;
        validage = true;
        verifysubmit();
        }
    }else
    {
        ageerror.innerHTML = "Only numbers allowed."
        validage = false;
        verifysubmit();
    }
}
}

function verifysubmit(){
    if (validage == true && validemail == true && validpassword == true && validusername == true)
    {
     document.getElementById("signupformsubmit").disabled = false ;
    }
else{
    document.getElementById("signupformsubmit").disabled = true ;
}
}

确保在每个字段上都使用"onChange"侦听器。

<input type="text" id="signupemail" onchange="verifysubmit()"> <input type="password" id="signuppassword" onchange="verifysubmit()"> <input type="text" id="signupusername" onchange="verifysubmit()"> <input type="text" id="signupage" onchange="verifysubmit()">

因此onChange将对每个更改执行检查器，如果检查器正常，则提交按钮将重新启用

您可以为要检查验证的所有输入字段指定一个类。对于该类，您可以在blur方法上创建并调用verifysubmit（）方法。"我认为你必须返回一个值，你正在存储变量TRUE或FALSE"将该函数存储在变量中，并在启用和禁用按钮的条件下检查该变量。

<script>
   $(".errorField").on("blur",function(e){
            verifysubmit();
   })
 </script>
 <input type="text" id="signupemail" class="errorField">
 <input type="password" id="signuppassword" class="errorField">

修改您的代码试试看。

<!DOCTYPE html>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
    <script>
    $(document).ready(function(){
      $("#signupformsubmit").on("click",function(e){
          e.preventDefault();
          verifysubmit();
      });
      $(".errorField").on("blur",function(e){
        verifysubmit();
      })
      var validemail = false ;
      var validpassword = false ;
      var validusername = false ;
      var validage = false ;
      function verifyemail()
    {
      var email = document.getElementById("signupemail").value ;
      var error = document.getElementById("signupemailerrors") ;
      var emailregex = /^(([^<>()'[']''.,;:'s@"]+('.[^<>()'[']''.,;:'s@"]+)*)|(".+"))@(('[[0-9]{1,3}'.[0-9]{1,3}'.[0-9]{1,3}'.[0-9]{1,3}])|(([a-zA-Z'-0-9]+'.)+[a-zA-Z]{2,}))$/ ;
      if(email.length < 254){
      if( email.length > 0 ){
          if(email.match(emailregex)){
              error.innerHTML = "";
              console.log("preg");
              return validemail = true ;
          }
          else
          {
              error.innerHTML = "Invalid email address.";
              return validemail = false ;
          }
      }else
      {
          error.innerHTML = "Please fill in." ;
          return validemail = false ;
      }
    } else
    {
      error.innerHTML = "Maximum length exceeded.";
      return validemail= false ;
    }
    }
    function verifypassword(){
      var password = document.getElementById("signuppassword").value;
      var passworderror= document.getElementById("signuppassworderrors") ;
      if (password.length < 254){
      if(password.length > 7){
      passworderror.innerHTML = "";
      return validpassword = true ;
      }
          else if(password.length == 0)
      {
          passworderror.innerHTML = "Please fill in.";
          return validpassword = false ;
      }
      else
      {
          passworderror.innerHTML = "At least 8 characters required.";
          return validpassword = false ;
      }
    }
      else
      {
          passworderror.innerHTML = "Maximum length exceeded.";
          return validpassword = false ;
      }
    }
    function verifyusername(){
      var username = document.getElementById("signupusername").value ;
      var usernamerror = document.getElementById("signupusernameerrors") ;
      if (username.length == 0)
      {
          usernamerror.innerHTML = "Please fill in.";
          validusername = false;
      }
      else if (username.length > 50)
      {
          usernamerror.innerHTML = "Maximum length exceeded.";
          validusername = false;
      }
      else
      {
          usernamerror.innerHTML = "";
          validusername = true;
      }
    }
    function verifyage(){
      var age = document.getElementById("signupage").value ;
      var ageerror = document.getElementById("signupageerrors") ;
      var ageregex = /^'d+$/;
      if(age.length == 0){
          ageerror.innerHTML = "Please fill this field";
          validage = false;
      }
      else
      {
      if (age.match(ageregex)){
          if (age == 0){
          ageerror.innerHTML = "Please provide your real age." ;
          validage = false;
          }
          else if(age > 130){
          ageerror.innerHTML = "Please provide your real age." ;
          validage = false;
          }
          else
          {
          ageerror.innerHTML = "" ;
          validage = true;
          }
      }else
      {
          ageerror.innerHTML = "Only numbers allowed."
          validage = false;
      }
    }
    }

    function verifysubmit(){
      console.log("test");
      //verifyage();
      var email = verifyemail();
       var pass = verifypassword();
       console.log(email+pass);
      // verifyusername();
      if (email == 1 && pass == 1)
      {
        console.log("true");
       document.getElementById("signupformsubmit").disabled = false ;
      }
    else{
      document.getElementById("signupformsubmit").disabled = true ;
    }
    }
    });
    </script>
    <input type="text" id="signupemail" class="errorField">
    <input type="password" id="signuppassword" class="errorField">
    <input type="button" id="signupformsubmit" value="Submit" >
    <div id="signupemailerrors"></div>
    <div id="signuppassworderrors"></div>
    </html>