Question

我有这个代码做了一些验证，还有一些其他的东西

$(document).ready(function(){
    //focus stuff
    $('input[type="text"]').on('focus',function(){ // When focus
        $(this).addClass('inputFocus');
    });

    $('input[type="text"]').on('blur',function(){ // When blur
        $(this).removeClass('inputFocus');
    });

    $('input[type="email"]').on('focus',function(){ // When focus
        $(this).addClass('inputFocus');
    });

    $('input[type="email"]').on('blur',function(){ // When blur
        $(this).removeClass('inputFocus');
    });

    $('input[type="Password"]').on('focus',function(){ // When focus
        $(this).addClass('inputFocus');
    });

    $('input[type="Password"]').on('blur',function(){ // When blur
        $(this).removeClass('inputFocus');
    });

        //fullName validation
    $("#fullName").keyup(function() {
        if (/^[a-zA-Z ]+$/.test($(this).val())) {
            $(this).css('borderColor','#e5e5e5');
            $(".validationError").text("");
        } else {
            $(this).removeClass('inputFocus');
            $(".fullNameError").addClass('validationError');
            $(".fullNameError").text("Only letters, please.");
            $(".validationError").css('display', 'block');
            $(this).css('border','2px solid #d76262');
        }
    })

    //email validation
    $("#email").keyup(function() {
        if (/^(([^<>()[\]\\.,;:\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,}))$/.test($(this).val())) {
            $(this).css('borderColor','#e5e5e5');
            $(".validationError").text("");
        } else {
            $(this).removeClass('inputFocus');
            $(".emailError").addClass('validationError');
            $(".emailError").text("Please enter a valid email.");
            $(".validationError").css('display', 'block');
            $(this).css('border','2px solid #d76262');
        }
    })

    //username validation
    $("#username").keyup(function() {
        if (/^[a-zA-Z1-9 ]+$/.test($(this).val())) {
            $(this).css('borderColor','#e5e5e5');
            $(".validationError").text("");
        } else {
            $(this).removeClass('inputFocus');
            $(".usernameError").addClass('validationError');
            $(".usernameError").text("Only letters and numbers, please.");
            $(".validationError").css('display', 'block');
            $(this).css('border','2px solid #d76262');
        }
    })

    //onlineID validation
    $("#onlineID").keyup(function() {
        if (/^[a-zA-Z1-9 ]+$/.test($(this).val())) {
            $(this).css('borderColor','#e5e5e5');
            $(".validationError").text("");
        } else {
            $(this).removeClass('inputFocus');
            $(".onlineIDError").addClass('validationError');
            $(".onlineIDError").text("Only letters and numbers, please.");
            $(".validationError").css('display', 'block');
            $(this).css('border','2px solid #d76262');
        }
    })

我想查看是否所有这些验证都已通过，以及是否所有字段都为空。如果这两个条件都成立，我希望能够执行一些代码。我不确定如何解决这个问题。

Answer 1

如果您只想查看是否所有验证都已通过。你需要将所有验证检查封装在一个函数和一个函数中。称这个功能＆amp;看看它的回报＆amp;然后继续。

例如：

$(document).ready(function(){
//focus stuff
$('input[type="text"]').on('focus',function(){ // When focus
    $(this).addClass('inputFocus');
});

$('input[type="text"]').on('blur',function(){ // When blur
    $(this).removeClass('inputFocus');
});

$('input[type="email"]').on('focus',function(){ // When focus
    $(this).addClass('inputFocus');
});

$('input[type="email"]').on('blur',function(){ // When blur
    $(this).removeClass('inputFocus');
});

$('input[type="Password"]').on('focus',function(){ // When focus
    $(this).addClass('inputFocus');
});

$('input[type="Password"]').on('blur',function(){ // When blur
    $(this).removeClass('inputFocus');
});

validatorCheck = validateForm();

if(validatorCheck)
{
   // This means an Error was Encountered.   

}else{

  // All Validations passed

}

 // Pack all the validation checks in a function.
 function validateForm()
 {
    var errorFound = false;

    //fullName validation
$("#fullName").keyup(function() {
    if (/^[a-zA-Z ]+$/.test($(this).val())) {
        $(this).css('borderColor','#e5e5e5');
        $(".validationError").text("");
        errorFound = true;            
    } else {
        $(this).removeClass('inputFocus');
        $(".fullNameError").addClass('validationError');
        $(".fullNameError").text("Only letters, please.");
        $(".validationError").css('display', 'block');
        $(this).css('border','2px solid #d76262');
    }
})

//email validation
$("#email").keyup(function() {
    if (/^(([^<>()[\]\\.,;:\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,}))$/.test($(this).val())) {
        $(this).css('borderColor','#e5e5e5');
        $(".validationError").text("");
        errorFound = true;
    } else {
        $(this).removeClass('inputFocus');
        $(".emailError").addClass('validationError');
        $(".emailError").text("Please enter a valid email.");
        $(".validationError").css('display', 'block');
        $(this).css('border','2px solid #d76262');
    }
})

//username validation
$("#username").keyup(function() {
    if (/^[a-zA-Z1-9 ]+$/.test($(this).val())) {
        $(this).css('borderColor','#e5e5e5');
        $(".validationError").text("");
        errorFound = true;
    } else {
        $(this).removeClass('inputFocus');
        $(".usernameError").addClass('validationError');
        $(".usernameError").text("Only letters and numbers, please.");
        $(".validationError").css('display', 'block');
        $(this).css('border','2px solid #d76262');
    }
})

//onlineID validation
$("#onlineID").keyup(function() {
    if (/^[a-zA-Z1-9 ]+$/.test($(this).val())) {
        $(this).css('borderColor','#e5e5e5');
        $(".validationError").text("");
        errorFound = true;
    } else {
        $(this).removeClass('inputFocus');
        $(".onlineIDError").addClass('validationError');
        $(".onlineIDError").text("Only letters and numbers, please.");
        $(".validationError").css('display', 'block');
        $(this).css('border','2px solid #d76262');
    }
})

 return errorFound;
}

如果所有Javascript验证通过

1 个答案: