Question

我在纯JavaScript中有这个电子邮件验证功能：

function isEmail() {
    var slides = document.getElementsByClassName("email");

    for (var i = 0; i < slides.length; i++) {
        emailValue = slides.item(i).value;

        var regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i;
        var res = regex.test(emailValue);

        if (res == false) {

            alert("Enter valid email");
            return false;
        } else {
            return true;
        }
    }
}

我想以这种格式将其转换为jQuery：

$(document).ready(function() {
    $("#form").submit(function() {
        $(".email").each(function() {

        });
    });
});

Answer 1

这就是你需要的吗？

$(document).ready(function() {
    $(".button").click(function() {
        $("li.email").each(function() {
            emailValue = $(this).text();
						console.log(emailValue);
            var regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i;
            var res = regex.test(emailValue);

            if (res == false) {
                alert(emailValue+" email invalid");
            } else {
                alert(emailValue+" email valid");
            }
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="email">email_valid@gmail.com</li>
  <li class="email">email_valid2@gmail.com</li>
  <li class="email">email_invalid@gmailcom</li>
  <li class="email">email_valid3@gmail.com</li>
  <li class="">not email</li>
</ul>
<input type="button" class="button" value="validate emails"/>

Answer 2

它就像上面的代码一样，试图验证页面上的多个电子邮件字段。所以我要为你的js小提琴制作一些虚拟数据。我还优化了代码，以便将变量缓存在循环之外。如果它们被缓存在$ .each循环中，那么每次都会创建一个新变量。

function isEmail() {

    var slides = $('.email');
    var emailValue = null;
    var regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i
    var res = null;
    console.log(slides);

    $(slides).each(function(){

    emailValue = $(this).val();

    res = regex.test(emailValue);

    if (res==false){

        alert("Enter valid email");
        return false;
    }
    alert("Success!")
    return true;
})

}

以下是JSFiddle

如何将此代码转换为jQuery

2 个答案: