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

【问题标题】：Validation of inputs according identical inputs value根据相同的输入值验证输入
【发布时间】：2015-04-15 16:01:12
【问题描述】：

我有一个包含多个电子邮件输入的表单例如

<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">

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

【问题讨论】：

一旦你点击提交按钮，浏览每封电子邮件，你可以生成一个电子邮件列表来比较它们...添加你尝试能够帮助你更多的代码
你的问题只是一个操作规范，一个“给我代码”，你没有任何努力。
@Sparky- 如果你不想帮忙，也不要写不必要的 cmets！如果我问一个问题，那是因为我没有成功实现我想要的

标签： jquery validation input

【解决方案1】：

我做了这个Fiddle。我希望这能解决你的问题。我没有包含电子邮件验证码。您可以将验证代码粘贴到我在 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;
}

【讨论】：

@Sukanya- 10x。您认为将输入插入数组并使用 indexOf() 函数的解决方案会更短吗？
@saritrotshild 是的，你是对的。这将是我编写的代码的更短版本。
@saritrotshild 这取决于您的要求。如果您只想验证是否有唯一的电子邮件地址，那么您的数组可以是简单的字符串数组。但是，如果您想突出显示有错误的html，则必须创建一个对象数组来保持要突出显示的元素，或者您必须创建一个二维数组来存储输入的唯一 ID 以及那个字段。

【解决方案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

【讨论】：