jQuery添加和刪除類檢查

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

 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'); } }); } 

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

或者只是您可以做到。

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