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

【问题标题】：disable html form submit button using js form verifyer使用 js 表单验证器禁用 html 表单提交按钮
【发布时间】：2016-04-01 00:20:44
【问题描述】：

我正在尝试使用布尔值创建一个简单的 js 表单验证器，它检查来自 html 的输入是否正确，如果字段正确则启用提交按钮，否则禁用它。它禁用了提交按钮，但是当数据输入正确时，它不会重新启用提交按钮。

    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 ;
        }
        else
        {
            error.innerHTML = "Invalid email address.";
            validemail = false ;
        }

    }else

    {
        error.innerHTML = "Please fill in." ;
        validemail = false ;
    }
} else
{
    error.innerHTML = "Maximum length exceeded.";
    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 = "";
    validpassword = true ;

    }
        else if(password.length == 0)
    {
        passworderror.innerHTML = "Please fill in.";
        validpassword = false ;
    }
    else
    {
        passworderror.innerHTML = "At least 8 characters required.";
        validpassword = false ;
    }
}
    else
    {
        passworderror.innerHTML = "Maximum length exceeded.";
        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(){
    verifyage();
    verifyemail();
    verifypassword();
    verifyusername();
    if (validage == true && validemail == true && validpassword == true && validusername == true)
    {
     document.getElementById("signupformsubmit").disabled = false ;
    }
else{
    document.getElementById("signupformsubmit").disabled = true ;
}
}

【问题讨论】：

在您的 verifysubmit 函数中，一次只测试一个条件以确定哪个字段返回 false。 if (validage == true && validemail == true && validpassword == true && validusername == true)
通过 html [onmouseover="verifysubmit()"]
您能分享一下您的表单的 html 吗？我尝试时似乎正在工作。
这里是带有 html jsfiddle.net/feherlevente/FGVma/31 的代码，希望对您有所帮助。
只是一个旁注。永远不要依赖 JavaScript 验证器。您必须有一个适当的服务器端验证程序，以确保人们不会将攻击插入您的系统。 IMO，您在这方面花费了太多时间。

标签： javascript html forms

【解决方案1】：

更新测试和工作的代码：

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

【讨论】：

我通过 html 调用函数。 (onblur="function()" , onmouseover="function()")
尝试分别检查每个检查功能的工作。例如，错误可能在正则表达式匹配函数上或在任何情况下。这就是为什么你需要检查每个功能是如何工作的。
如果没有帮助，我会为您编写自己的工作代码，用于您需要的表单验证器。
非常感谢，非常好，但我实际上是在开发网站的同时努力学习。我试过你告诉我的，结果一样。我其实认为全局变量不会改变什么的。
Levente Feher，再次检查我的答案。此代码工作正常。

【解决方案2】：

我设法解决了这个问题。已解决链接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 ;
}
}

【讨论】：

哦，你发布这个比我编辑我的答案更快。无论如何检查我在顶部的答案，它有一些更好的格式和一些更短的代码。

【解决方案3】：

确保您在每个字段上使用“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 将对每个更改执行检查器，如果检查器正常，您的提交按钮将被重新启用

【讨论】：

使用“onchange”是个坏主意，因为它只有在焦点离开时才有效。而不是“onchange”，最好使用“oninput”。
oninput：通过用户界面更改元素的文本内容时发生事件。 onchange：在选择，检查状态或元素的内容已更改时发生。在某些情况下，它仅在元素失去焦点时发生。 onchange 属性可用于：、。在这里用 chrome 进行了测试，它可以工作，也许两者都使用是个好主意。只是为了确保
我通过 html 调用函数。 (onblur="function()" , onmouseover="function()") 但我会尝试这似乎也是一个更好的主意。但问题是，如果输入错误，函数 verifysubmit() 会阻止提交按钮，但在输入正确时不会重新启用。

【解决方案4】：

您可以为要检查验证的所有输入字段指定一个类。对于该类，您可以在 blur 方法上创建并调用 verifysubmit() 方法。 “你必须返回一个值，你存储的变量是真还是假”将该函数存储在变量中，并在启用和禁用按钮的 if 条件下检查该变量。

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

【讨论】：

函数verifysubmit();被称为 trough html onmouseover，它会响应，因为如果我没有完成输入字段并将鼠标悬停在提交按钮上，所有输入字段都会触发写入“请填写此字段”的错误，并且提交按钮会禁用。但是当我在字段中正确输入数据时，提交按钮不会重新启用。

【解决方案5】：

修改你的代码试试看。

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

【讨论】：

我在答案中没有看到表单标签