在使用jquery验证电子邮件之后添加一个类

adding a class after email is validated using jquery

本文关键字：一个 添加 之后 jquery 验证 电子邮件      更新时间：2023-09-26

我正试图在表单字段中使用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类。我在控制台中单独尝试了每一行代码，它们似乎都在做/指向正确的事情。只有当所有的东西放在一起时，它才似乎不起作用。

您在jQuery的DOM ready上加载该值，然后再也不加载它。

您需要测试当前值，而不是DOM准备好时的值，大致如下：

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

无关，但就我个人而言，我会将电子邮件测试封装在一个函数中，这样你就可以像validEmail(xxx)等一样更自然地阅读email.test(xxx)。

相关文章：