Javascript 如何修复jQuery表单验证代码的两个bug？

如果字段无效，我的代码基本上会添加一个类错误，如果字段有效，则会删除错误类并正常提交表单

我很难找出我创建的表单验证代码的两个小错误

下面列出的错误：

1） 如果在一个字段中输入正确的内容，然后单击“提交”，则错误类的长度不会在第一次单击“提交”时更新。需要单击两次提交才能更新长度。（查看console.log）

2） 如果更改输入字段的内容并单击“提交”（一切正常，错误类已删除），但如果决定删除更新的文本并将字段留空，则不会重新应用错误类

如果我能得到帮助解决这个问题，那就太好了

如果有什么不清楚的地方，请告诉我

提前感谢：

$（'form.requiredFields'）.submit（函数（e）{
var req=$（this.find（'.req'），
validateEmail=功能（电子邮件）{
变量re=/^（[^（）[\]\\，；：\s@\“]+（\.[^（）[\]\，；：\s@\“]+）*）（\'+\”）（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[1,3}.[0-9]{1,3}.]；
返回重新测试（电子邮件）；
};
每个请求（函数（）{
变量$this=$（this），
defaultVal=$this.prop（'defaultValue'）；//缓存默认值
//检查验证错误
if（$this.hasClass（'email'）&&！validateEmail（$this.val（）））||
（defaultVal==$this.val（）| |$this.val（）===''| |$this.val（）.length<3）
) 
{
$this.addClass（'error'）；
}否则{
$this.removeClass（'error req'）；
}
});
控制台日志（要求长度）；
如果（请求长度===0）{
返回true；
}否则{
返回false；
}
}); 

对于#2，在清除错误时，您正在移动'req'类和'error'类。下次通过调用时，将不再通过选择器

$（this.find（'.req'）

对于#1-我不理解您描述的问题。

对于#2，在清除错误时，您正在移动'req'类和'error'类。下次通过调用时，将不再通过选择器

$（this.find（'.req'）

对于#1-我不理解您描述的问题。

就像dc5对于#2所说的那样，不要删除req类

对于#1，在删除它之前，您正在查找错误（.req）

看到这个了吗。这是您的代码如何工作的一个示例，但也许您可以找到更干净的解决方案

$('form.requiredFields').submit(function(e) {

    var req = $(this).find('.req'), errorCheck = 0,
        validateEmail = function(email) {
            var re = /^(([^<>()[\]\\.,;:\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,}))$/;
            return re.test(email);
        };

    req.each(function() {
        var $this = $(this),
            defaultVal = $this.prop('defaultValue'); //cache default val

        //checks for validation errors
       if (  ( $this.hasClass('email') && !validateEmail( $this.val() ) ) ||
             ( defaultVal === $this.val() || $this.val() === '' || $this.val().length < 3 )
       ) 
       {
          $this.addClass('error');
       } else {
          $this.removeClass('error');
       }

    });

    errorCheck = $(this).find('.error');
    console.log(errorCheck.length);

    if ( errorCheck.length === 0 ) {
        return true;
    } else {
        return false;
    }

});

$（'form.requiredFields'）.submit（函数（e）{
var req=$（this）.find（'.req'），errorCheck=0，
validateEmail=功能（电子邮件）{
变量re=/^（[^（）[\]\\，；：\s@\“]+（\.[^（）[\]\，；：\s@\“]+）*）（\'+\”）（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[1,3}.[0-9]{1,3}.]；
返回重新测试（电子邮件）；
};
每个请求（函数（）{
变量$this=$（this），
defaultVal=$this.prop（'defaultValue'）；//缓存默认值
//检查验证错误
if（$this.hasClass（'email'）&&！validateEmail（$this.val（）））||
（defaultVal==$this.val（）| |$this.val（）===''| |$this.val（）.length<3）
) 
{
$this.addClass（'error'）；
}否则{
$this.removeClass（'error'）；
}
});
errorCheck=$（this.find（'.error'）；
console.log（errorCheck.length）；
如果（errorCheck.length==0）{
返回true；
}否则{
返回false；
}
});

就像dc5为#2所说的那样，不要删除req类

对于#1，在删除它之前，您正在查找错误（.req）

看到这个了吗。这是您的代码如何工作的一个示例，但也许您可以找到更干净的解决方案

$('form.requiredFields').submit(function(e) {

    var req = $(this).find('.req'), errorCheck = 0,
        validateEmail = function(email) {
            var re = /^(([^<>()[\]\\.,;:\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,}))$/;
            return re.test(email);
        };

    req.each(function() {
        var $this = $(this),
            defaultVal = $this.prop('defaultValue'); //cache default val

        //checks for validation errors
       if (  ( $this.hasClass('email') && !validateEmail( $this.val() ) ) ||
             ( defaultVal === $this.val() || $this.val() === '' || $this.val().length < 3 )
       ) 
       {
          $this.addClass('error');
       } else {
          $this.removeClass('error');
       }

    });

    errorCheck = $(this).find('.error');
    console.log(errorCheck.length);

    if ( errorCheck.length === 0 ) {
        return true;
    } else {
        return false;
    }

});

$（'form.requiredFields'）.submit（函数（e）{
var req=$（this）.find（'.req'），errorCheck=0，
validateEmail=功能（电子邮件）{
变量re=/^（[^（）[\]\\，；：\s@\“]+（\.[^（）[\]\，；：\s@\“]+）*）（\'+\”）（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[1,3}.[0-9]{1,3}.]；
返回重新测试（电子邮件）；
};
每个请求（函数（）{
变量$this=$（this），
defaultVal=$this.prop（'defaultValue'）；//缓存默认值
//检查验证错误
if（$this.hasClass（'email'）&&！validateEmail（$this.val（）））||
（defaultVal==$this.val（）| |$this.val（）===''| |$this.val（）.length<3）
) 
{
$this.addClass（'error'）；
}否则{
$this.removeClass（'error'）；
}
});
errorCheck=$（this.find（'.error'）；
console.log（errorCheck.length）；
如果（errorCheck.length==0）{
返回true；
}否则{
返回false；
}
});

我帮你简化了，实际上你的代码乱七八糟

这是一把小提琴：

代码：

$('#submit_form').click(function() {
    var flag = 0;
    var count = 0,
        total = $(".req").length;
    var validateEmail = function(email) {
    var re = /^(([^<>()[\]\\.,;:\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,}))$/;
            return re.test(email);
        }      
    $('.req').each(function(){
        count++; 
        if($(this).attr('id')=='email') {
            if(!validateEmail($(this).val())){ $(this).addClass('error');  flag = 1; } 
                else { $(this).removeClass('error'); } }

        if($(this).attr('id')=='name') {
            if($(this).val().length < 3){ $(this).addClass('error');  flag = 1; } 
                else { $(this).removeClass('error'); } }

        if($(this).attr('id')=='com') {
            if($(this).val().length < 3&&$(this).val()!=''){ $(this).addClass('error');  flag = 1; } 
            else { $(this).removeClass('error'); } }

        if ( total==count&&flag<1) { alert('submit'); }
    });
});

$（“#提交表单”）。单击（函数（）{
var标志=0；
变量计数=0，
总计=$（“.req”）.长度；
var validateEmail=函数（电子邮件）{
变量re=/^（[^（）[\]\\，；：\s@\“]+（\.[^（）[\]\，；：\s@\“]+）*）（\'+\”）（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[1,3}.[0-9]{1,3}.]；
返回重新测试（电子邮件）；
}      
$（'.req'）。每个（函数（）{
计数++；
if（$（this.attr（'id'）=='email'））{
如果（！validateEmail（$（this.val（））{$（this.addClass（'error'）；标志=1；}
else{$（this.removeClass（'error'）；}
if（$（this.attr（'id'）=='name'））{
if（$（this.val（）.length<3）{$（this.addClass（'error'）；flag=1；}
else{$（this.removeClass（'error'）；}
if（$（this.attr（'id'）=='com'））{
if（$（this.val（）.length<3&&$（this.val（）！=''）{$（this.addClass（'error'）；标志=