Question

此功能有效。它没有问题。

if ($(".register-frame").length) {
    var emailCheck = /^(([^<>()[\]\\.,;:\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,}))$/
    $('#email-field').change(function () {
        if (!$('#email-field').val().match(emailCheck)) {
            if ($("#email-field").hasClass("field-success")) {
                $("#email-field").removeClass('field-success');
            }
            if (!$("#email-field").hasClass("field-error")) {
                $("#email-field").addClass('field-error');
            }
        } else {
            if ($("#email-field").hasClass("field-error")) {
                $("#email-field").removeClass('field-error');
            }
            if (!$("#email-field").hasClass("field-success")) {
                $("#email-field").addClass('field-success');
            }
        }
    });
}

.login-frame .field-error { border-color: #A94442; }
.login-frame .field-success { border-color: #3C763D; }

基本上，此功能会检查电子邮件字段是否更改，如果它是有效的电子邮件。如果它不是有效的电子邮件，则删除有效的类（如果它存在），然后添加无效的类（如果它不存在）。

所以我的问题是，这个功能对我来说似乎已经完成了。到很多检查。是否有更有效的方法来做同样的事情？

Answer 1

我用功能简化它。在摘要中，它将类似于：

$('#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
}

Answer 2

您可以直接使用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');
}

Answer 3

https://api.jquery.com/toggleClass/

请参阅toggleClass文档

Answer 4

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

Answer 5

$('#email-field').change(function () {
    var cl = ($(this).val().match(emailCheck)) ? 'field-success' : 'field-error';
    $(this).removeClass('field-success field-error').addClass(cl)
});

Answer 6

＆＃13;

if ($(".register-frame").length) {
    var emailCheck = /^(([^<>()[\]\\.,;:\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,}))$/
    $('#email-field').change(function () {
        if (!$('#email-field').val().match(emailCheck)) {
            //since it is failure dont check 
                $("#email-field").removeClass('field-success'); //wont give error if not present
                $("#email-field").addClass('field-error');
            
        } else {
                $("#email-field").removeClass('field-error');
                $("#email-field").addClass('field-success');
        }
    });
}

＆＃13;

.login-frame .field-error { border-color: #A94442; }
.login-frame .field-success { border-color: #3C763D; }

＆＃13;

＆＃13; 或者只是你能做到的。

 $("#email-field").attr('class','new class') //new class can be either success or error

jQuery添加和删除类检查

6 个答案: