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

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课程没有添加.我已经在控制台中单独尝试了每行代码,他们似乎都在做/指向正确的事情.当它全部放在一起时它似乎不起作用.

Answer 1

您可以在jQuery的DOM上加载该值,并且永远不会再次加载它.

您需要测试当前值,而不是DOM准备好时的值,大致:

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

不相关,但我个人将电子邮件测试结合在一个函数中,而不是说email.test(xxx)你可以更自然地阅读它validEmail(xxx)等等.