使用 jquery 验证电子邮件后添加 class

Question

我正在尝试使用 jQuery 在表单字段中进行电子邮件验证

$(document).ready(function() {
    var email = new RegExp("[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$");
    var value = $("#email_address").val();

    $("#email_address").on("keypress", function() {
        if(email.test(value)) {
            $("#email_address").parent().addClass("has-success");
        }
    });
});

但是，has-success class 没有被添加。我已经在控制台中单独尝试了每一行代码，它们似乎都是 doing/pointing 正确的。就是凑在一起的时候好像不行。

Answer 1

您在 jQuery 的 DOM 上加载值已准备就绪，再也不会加载它。

您需要测试当前值，而不是 DOM 准备就绪时的值，大致为：

$("#email_address").on("keypress", function() {
    if(email.test($(this).val())) {
        $("#email_address").parent().addClass("has-success");
    }
});

不相关，但我个人会将电子邮件测试包装在一个函数中，因此您可以更自然地阅读它，例如 validEmail(xxx) 等，而不是说 email.test(xxx)。

使用 jquery 验证电子邮件后添加 class

adding a class after email is validated using jquery

javascript

jquery

email-validation