Javascript jQuery添加和删除类检查

这个功能有效。它的工作没有问题

if（$（“.register frame”）.length）{
var emailCheck=/^（[^（）[\]\\，；：\s@\“]+（\.[^（）[\]\，；：\s@\“]+）*（\“+\”）（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.+]124；（[a-zA Z-0-9]+]$/
$（“#电子邮件字段”）。更改（函数（）{
if（！$（“#电子邮件字段”）.val（）.match（emailCheck））{
if（$（“#电子邮件字段”）.hasClass（“字段成功”））{
$（“#电子邮件字段”）.removeClass（'field-success'）；
}
if（！$（“#电子邮件字段”）.hasClass（“字段错误”））{
$（“#电子邮件字段”）.addClass（'field-error'）；
}
}否则{
if（$（“#电子邮件字段”）.hasClass（“字段错误”））{
$（“#电子邮件字段”）.removeClass（'field-error'）；
}
if（！$（“#电子邮件字段”）.hasClass（“字段成功”））{
$（“#电子邮件字段”）.addClass（'field-success'）；
}
}
});
}

.login frame.field错误{边框颜色：#A94442；}
.login frame.field成功{边框颜色：#3C763D；}

请参阅toggleClass文档

---

请参阅toggleClass文档

我将使用函数简化它。 简言之，它应该是这样的：

$('#email-field').blur(function () {
    var is_valid = is_valid($(this).val());
    if (is_valid){
        $("#email-field").addClass('field-success').removeClass('field-error');
    }else{
        $("#email-field").removeClass('field-success').addClass('field-error');
    }
});

function is_valid(email){
   //blah
}

---

我会用函数来简化它。 简言之，它应该是这样的：

$('#email-field').blur(function () {
    var is_valid = is_valid($(this).val());
    if (is_valid){
        $("#email-field").addClass('field-success').removeClass('field-error');
    }else{
        $("#email-field").removeClass('field-success').addClass('field-error');
    }
});

function is_valid(email){
   //blah
}

---

您不需要使用hasClass的if语句。JQuery将为您处理该逻辑。

您不需要使用hasClass的if语句。JQuery将为您处理该逻辑。

您可以简单地使用

addClass

和

removeClass

，而无需检查该类是否已经存在，因为

addClass

如果该类已经存在，则不会执行任何操作；如果该类不存在，

removeClass

则不会执行任何操作

此外，还可以使用方法链接来缩短代码

您还可以将

$（“#email field”）

分配给变量，这样jQuery就不必重复搜索同一个元素

var $emailField = $('#email-field');
if (!$emailField.val().match(emailCheck)) {
  $emailField.removeClass('field-success').addClass('field-error');
} else {
  $emailField.removeClass('field-error').addClass('field-success');
}

---

您可以简单地使用

addClass

和

removeClass

而不检查类是否已经存在，因为如果类已经存在，

addClass

将不起任何作用，如果类不存在，

removeClass

将不起任何作用

此外，还可以使用方法链接来缩短代码

您还可以将

$（“#email field”）

分配给变量，这样jQuery就不必重复搜索同一个元素

var $emailField = $('#email-field');
if (!$emailField.val().match(emailCheck)) {
  $emailField.removeClass('field-success').addClass('field-error');
} else {
  $emailField.removeClass('field-error').addClass('field-success');
}

if（$（“.register frame”）.length）{
var emailCheck=/^（[^（）[\]\\，；：\s@\“]+（\.[^（）[\]\，；：\s@\“]+）*（\“+\”）（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.+]124；（[a-zA Z-0-9]+]$/
$（“#电子邮件字段”）。更改（函数（）{
if（！$（“#电子邮件字段”）.val（）.match（emailCheck））{
//既然是故障，就不要检查
$（“#电子邮件字段”）.removeClass（'field-success'）；//如果不存在，则不会给出错误
$（“#电子邮件字段”）.addClass（'field-error'）；
}否则{
$（“#电子邮件字段”）.removeClass（'field-error'）；
$（“#电子邮件字段”）.addClass（'field-success'）；
}
});
}

.login frame.field错误{边框颜色：#A94442；}
.login frame.field成功{边框颜色：#3C763D；}

if（$（“.register frame”）.length）{
var emailCheck=/^（[^（）[\]\\，；：\s@\“]+（\.[^（）[\]\，；：\s@\“]+）*（\“+\”）（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.+]124；（[a-zA Z-0-9]+]$/
$（“#电子邮件字段”）。更改（函数（）{
if（！$（“#电子邮件字段”）.val（）.match（emailCheck））{
//既然是故障，就不要检查
$（“#电子邮件字段”）.removeClass（'field-success'）；//如果不存在，则不会给出错误
$（“#电子邮件字段”）.addClass（'field-error'）；
}否则{
$（“#电子邮件字段”）.removeClass（'field-error'）；
$（“#电子邮件字段”）.addClass（'field-success'）；
}
});
}

.login frame.field错误{边框颜色：#A94442；}
.login frame.field success{border color:#3C763D；}

为什么在添加或删除字段之前需要检查它是否有字段？不用支票就可以了。如果字段被删除而不在那里，则不会出现任何错误；如果添加该字段并且该字段已经存在，则不会加倍。另外，请仔细阅读链接。我认为

.change

有点过分，因为它会触发每一次击键。如果您知道这一事实并想要它，那么这很好，但是对于大多数情况，使用

.blur

就足够了。为什么在添加或删除它之前需要检查它是否有字段？不用支票就可以了。如果字段被删除而不在那里，则不会出现任何错误；如果添加该字段并且该字段已经存在，则不会加倍。另外，请仔细阅读链接。我认为

.change

有点过分，因为它会触发每一次击键。如果你知道这个事实并且想要它，那就没问题了，但是在大多数情况下，使用

.blur

就足够了。这非常有效。谢谢所有回答的人。我感谢你的时间！我今天帮了一个人，效果很好。谢谢所有回答的人。我感谢你的时间！我今天帮助了一个人。