Question

我在页面中有几个文本框，我正在尝试对该字段的模糊进行一些验证。如果验证失败，则显示错误并突出显示该字段。这是正常的。如果出现任何错误，则不应提交表格，否则应提交表格。但是现在我面临着分配旗帜的问题。现在，即使所有字段验证都正确，该标志也始终返回false。

有些人可以帮我正确地重置旗帜。

以下是我的代码

var validatorFlag = true;
var indFlag = 0;

var validators = {
    allowaplhawithaposonly:function(val) {
        return /^[a-zA-Z'\s]+$/i.test(val);
    },
    allowaplhanumwithaposonly:function(val) {
        return /^[\w'\s]+$/i.test(val);
    },
    allownospace: function (val) {
        return !/\s/.test(val);
    }
};

$('#submit_form .required').blur(function () {
    var input = $(this);
    var classReturn = true;

    input.next('ul.innererrormessages').remove();
    input.removeClass('required_IE');
    if (!input.val()) {alert("no val");
                       input.removeClass('valid');
                       input.addClass('required_IE');
                       var $msg = $(this).attr('title');
                       input.after('<ul class="innererrormessages"><li>'+$msg+'</li></ul>');
                       validatorFlag = false;
                      }
    else{alert("val present");
         if(this.className) {
             var classes = this.className.split(/\s+/);
             for(var p in classes) {
                 if(classes[p] in validators) {
                     classReturn = classReturn && validators[classes[p]] (input.val());
                 }
             }alert("classReturn "+classReturn);
         }
         if(classReturn == false){
             input.removeClass('valid');
             input.addClass('required_IE');
             var $msg = input.attr('title');
             input.after('<ul class="innererrormessages"><li>'+$msg+'</li></ul>');
             validatorFlag = false;
             indFlag = 1;
         }
         else{
             if(indFlag != 1){
                 validatorFlag = true;
             }
             else{
                 validatorFlag = false;
             }
         }

        }alert("validatorFlag "+validatorFlag); //This is always returning false

});

$('#submit_form').submit(function() {
    if(validatorFlag)
    {
        returnValue = true;
    }
    else{
        returnValue = false;
    }
    return returnValue;
});

我需要检查特定字段的所有类是否都已正确验证。仅当所有字段的所有验证都正确时，validatorFlag才应为true。现在即使验证正确，validatorFlag也会返回false。所以，我需要重置标志。我无法识别这一点。有人可以指导我吗？

Answer 1

当一切正常时你得到假的原因是你永远不会重置indFlag（无论是什么）。您在开头设置了一次，然后在验证失败时将其设置为1。您应该在函数的开头重置它。看看这个fiddle我已经提出了你的代码。

但是你的算法存在缺陷。想想这种情况：你去第一个字段放错了值，然后转到接下来的2个字段并输入正确的值。当您点击提交时，验证为真，因为您只考虑最后一个字段的验证（最后一次模糊）。

您还应该对提交的所有字段进行验证。像这样：

var validatorFlag = true;
var indFlag = 0;

var validators = {
    allowaplhawithaposonly:function(val) {
        return /^[a-zA-Z'\s]+$/i.test(val);
    },
    allowaplhanumwithaposonly:function(val) {
        return /^[\w'\s]+$/i.test(val);
    },
    allownospace: function (val) {
        return !/\s/.test(val);
    }
};


$(document).ready(function(){
    $('#submit_form .required').blur(function(){
        validatorFlag = true;
        indFlag = 0;
        validateField($(this));
    });

    function validateField(input){
        var classReturn = true;

        input.next('ul.innererrormessages').remove();
        input.removeClass('required_IE');
        if (!input.val()) {alert("no val");
                           input.removeClass('valid');
                           input.addClass('required_IE');
                           var $msg = input.attr('title');
                           input.after('<ul class="innererrormessages"><li>'+$msg+'</li></ul>');
                           validatorFlag = false;
                          }
        else{alert("val present");
             if(input.attr("class")) {
                 var classes = input.attr("class").split(/\s+/);
                 for(var p in classes) {
                     if(classes[p] in validators) {
                         classReturn = classReturn && validators[classes[p]] (input.val());
                     }
                 }alert("classReturn "+classReturn);
             }
             if(classReturn == false){
                 input.removeClass('valid');
                 input.addClass('required_IE');
                 var $msg = input.attr('title');
                 input.after('<ul class="innererrormessages"><li>'+$msg+'</li></ul>');
                 validatorFlag = false;
                 indFlag = 1;
             }
             else{
                 if(indFlag != 1){
                     validatorFlag = true;
                 }
                 else{
                     validatorFlag = false;
                 }
             }

            }alert("validatorFlag "+validatorFlag); //This is always returning false

    }

    $('#submit_form').submit(function() {
        validatorFlag = true;
        indFlag = 0;
        $('#submit_form input[type=text]').each(
                function(){
                    validateField($(this));
                   }
       );
        if(validatorFlag)
        {
            returnValue = true;
        }
        else{
            returnValue = false;
        }
        return returnValue;
    });
});

您可以在此fiddle（已更新）中看到它。

设置标志以验证字段失败

1 个答案: