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

时间：2016-03-31 12:45:20

标签： javascript html forms

我正在尝试使用布尔值创建一个简单的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 ;
}
}

5 个答案:

答案 0 :(得分：2)

更新了测试和工作代码： 

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

答案 1 :(得分：1)

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

答案 2 :(得分：0)

确保您正在使用＆＃34; onChange＆＃34;每个领域的倾听者。

<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将在每次更改时执行检查，如果检查器正常，则会重新启用提交按钮

答案 3 :(得分：0)

您可以为要检查验证的所有输入字段指定一个类。对于该类，您可以在blur方法上创建并调用verifysubmit（）方法。 “而且我必须返回一个存储变量为真或假的值”将该函数存储在变量中，并在启用时检查该变量并禁用按钮。

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

答案 4 :(得分：0)

修改你的代码试试吧。 

{{1}}
相关问题
最新问题