Fatal编程技术网
  • javascript/
  • Javascript 使用js form verifyer禁用html表单提交按钮

Javascript 使用js form verifyer禁用html表单提交按钮

javascript html forms

Javascript 使用js form verifyer禁用html表单提交按钮,javascript,html,forms,Javascript,Html,Forms,我正在尝试使用布尔值创建一个简单的js表单验证器，它检查来自html的输入是否正确，如果字段正确则启用submit按钮，如果字段不正确则禁用它。它禁用“提交”按钮，但正确输入数据后，不会重新启用“提交”按钮 var validemail = false ; var validpassword = false ; var validusername = false ; var validage = false ; function verifyemail(

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

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

var validemail=false；
var validpassword=false；
var validusername=假；
var validage=假；
函数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]{0-9]{1,3}.[1,3}.[0-9]{1,3}]）；（[a-zA Z-0-9]+-[a-zA 2]）；
如果（电子邮件长度<254）{
如果（email.length>0）{
if（email.match（emailregex））{
error.innerHTML=“”；
validemail=true；
}
其他的
{
error.innerHTML=“无效的电子邮件地址。”；
validemail=假；
}
}否则
{
error.innerHTML=“请填写。”；
validemail=假；
}
}否则
{
error.innerHTML=“超过最大长度。”；
validemail=假；
}
}
函数verifypassword（）{
var password=document.getElementById（“signuppassword”）.value；
var passworderror=document.getElementById（“signuppassworderrors”）；
如果（密码长度<254）{
如果（password.length>7）{
passworderror.innerHTML=“”；
validpassword=true；
}
else if（password.length==0）
{
passworderror.innerHTML=“请填写。”；
validpassword=false；
}
其他的
{
passworderror.innerHTML=“至少需要8个字符。”；
validpassword=false；
}
}
其他的
{
passworderror.innerHTML=“超过最大长度。”；
validpassword=false；
}
}
函数verifyusername（）{
var username=document.getElementById（“signupusername”）.value；
var usernamerror=document.getElementById（“signupusernameerrors”）；
如果（username.length==0）
{
usernamerror.innerHTML=“请填写。”；
validusername=假；
}
否则如果（username.length>50）
{
usernamerror.innerHTML=“超过最大长度。”；
validusername=假；
}
其他的
{
usernamerror.innerHTML=“”；
validusername=真；
}
}
函数验证（）{
var age=document.getElementById（“signupage”）.value；
var ageerror=document.getElementById（“signupageerrors”）；
var ageregex=/^\d+$/；
if（age.length==0）{
ageerror.innerHTML=“请填写此字段”；
有效期=假；
}
其他的
{
if（年龄匹配（Agregex））{
如果（年龄==0）{
ageerror.innerHTML=“请提供您的实际年龄。”；
有效期=假；
}
否则，如果（年龄>130岁）{
ageerror.innerHTML=“请提供您的实际年龄。”；
有效期=假；
}
其他的
{
ageerror.innerHTML=“”；
有效期=真；
}
}否则
{
ageerror.innerHTML=“仅允许数字。”
有效期=假；
}
}
}
函数verifysubmit（）{
验证年龄（）；
验证电子邮件（）；
验证密码（）；
验证用户名（）；
if（validage==true&&validemail==true&&validpassword==true&&validusername==true）
{
document.getElementById（“signupformsubmit”）.disabled=false；
}
否则{
document.getElementById（“signupformsubmit”）.disabled=true；
}
}
更新测试和工作代码：

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


var validemail=假；
var validpassword=false；
var validusername=假；
var validage=假；
验证提交（）；
函数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]{0-9]{1,3}.[1,3}.[0-9]{1,3}]）；（[a-zA Z-0-9]+-[a-zA 2]）；
validemail=true；
emailerror.innerHTML=“”；
如果（email.length==0）{
emailerror.innerHTML=“请填写。”；
validemail=假；
}否则如果（email.length>254）{
emailerror.innerHTML=“超过最大长度。”；
validemail=假；
}如果（！email.match（emailregex））则为else{
emailerror.innerHTML=“无效的电子邮件地址。”；
validemail=假；
}
验证提交（）；
}
函数verifypassword（）{
var password=document.getElementById（“signuppassword”）.value；
var passworderror=document.getElementById（“signuppassworderrors”）；
validpassword=true；
passworderror.innerHTML=“”；
if（password.length==0）{
passworderror.innerHTML=“请填写。”；
validpassword=false；
}else if（password.length<8）{
passworderror.innerHTML=“至少需要8个字符。”；
validpassword=false；
}否则如果（password.length>254）{
passworderror.innerHTML=“超过最大长度。”；
validpassword=false；
} 
验证提交（）；
}
函数verifyusername（）{
var username=document.getElementById（“signupusername”）.value；
var usernamerror=document.getElementById（“signupusernameerrors”）；
validusername=真；
usernamerror.innerHTML=“”；
如果（username.length==0）{
usernamerror.innerHTML=“请填写。”；
validusername=假；
}else if（username.length<3）{
usernamerror.innerHTML=“至少需要3个字符。”；
validusername=假；
}否则如果（username.length>50）{
usernamerror.innerHTML=“最大长度

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



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