Question

我有一个包含多个电子邮件输入的表单 e.g

<input type="text" data-index="0" id="inputMail0" class="signup-input text-value" name="email[0]" placeholder="e.g. example@url.com">
<input type="text" data-index="1" id="inputMail1" class="signup-input text-value" name="email[1]" placeholder="e.g. example@url.com">

用户不应多次插入相同的电子邮件地址。验证应该是用户点击提交按钮后。

Answer 1

我做了这个Fiddle。我希望这能解决你的问题。我没有收录电子邮件验证码。您可以将验证代码粘贴到我在JS中注释的位置。以下代码比较输入文本框中的值。

<强> JS

$(document).ready(function () {
    $("button").click(function (e) {
        e.preventDefault();
        $("input:text").removeClass("error");
        $("input:text").each(function () {
            var currentText = $(this).val();
            var mainElement = $(this);
            //Email Validation Function
            var allOtherEmail = $(this).nextAll("input:text");
            if (currentText.trim() != "") {
                allOtherEmail.each(function () {
                    if (currentText.trim() == $(this).val().trim()) {
                        mainElement.addClass("error");
                        $(this).addClass("error");
                        return false;
                    }
                });
                }
            });

        });
    });

<强> HTML

<input type="text" data-index="0" id="inputMail0" class="signup-input text-value" name="email[0]" placeholder="e.g. example@url.com">
<input type="text" data-index="1" id="inputMail1" class="signup-input text-value" name="email[1]" placeholder="e.g. example@url.com">
<input type="text" data-index="2" id="inputMail1" class="signup-input text-value" name="email[2]" placeholder="e.g. example@url.com">
<input type="text" data-index="3" id="inputMail1" class="signup-input text-value" name="email[3]" placeholder="e.g. example@url.com">
<input type="text" data-index="4" id="inputMail1" class="signup-input text-value" name="email[4]" placeholder="e.g. example@url.com">
<input type="text" data-index="5" id="inputMail1" class="signup-input text-value" name="email[5]" placeholder="e.g. example@url.com">
<input type="text" data-index="6" id="inputMail1" class="signup-input text-value" name="email[6]" placeholder="e.g. example@url.com">
<button>Click</button>

<强> CSS

.error {
    background-color:#ccc;
}

Answer 2

您可以在页面中添加以下代码：

$(function() { //shorthand document.ready function
    function isValidEmailAddress(emailAddress) {
        var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
        return pattern.test(emailAddress);
    };
    $('#register_form').on('submit', function(e) { //use on if jQuery 1.7+
        var mail0 = $("#inputMail0").val();
        var mail1 = $("#inputMail1").val();
        console.log(mail0, mail1); // console log is best for debugging
        if (mail0 != mail1) {
            if (!isValidEmailAddress(mail0)) {
                // prevent form from submitting
                e.preventDefault();
                // inform user
                alert("You must enter a valid email addresses. Could not validate: " + mail0);
            } else {
                if (!isValidEmailAddress(mail1)) {
                    // prevent form from submitting
                    e.preventDefault();
                    // inform user
                    alert("You must enter a valid email addresses. Could not validate: " + mail1);
                } else {
                    // everything fine, do whatever here before posting
                    console.log("User has registered!",mail0,mail1);
                }
            }
        } else {
            // prevent form from submitting
            e.preventDefault();
            // inform user
            alert("You must enter unique email addresses. Please do not use the same email address twice.")
        }
    });
});

这将检查两个地址是否唯一。如果mail0和mail1不同，我还添加了一个验证电子邮件地址的功能。诀窍是调用e.preventDefault();来阻止浏览器实际发布表单。您可以通过警告或html注入通知用户，可以进行更正。像我在这里一样使用alert()实际上在实际网站中是不可取的。对于测试没问题。

您还可以play around with a working solution here via JSFiddle

根据相同的输入值验证输入

2 个答案: