jQuery验证插件多个电子邮件地址

Question

我有以下的jQuery验证插件：

<script type="text/javascript" src="/requires/js/jquery.min.js"></script>
<script type="text/javascript" src="/requires/js/jquery.validate.js"></script>
<script type="text/javascript"> 
    $(document).ready(function() {
        $("#form").validate({
            rules: {
                name: {
                    required: true,
                    minlength: 2
                },
                email: {
                    required: true,
                    email: true
                },
                emails: {
                    required: true,
                    email: true
                }
            },
            messages: {
                name: {
                    required: "Je bent vergeten om je naam in te vullen.",
                    minlength: "Je bent vergeten om je naam in te vullen."
                },
                email: {
                    required: "Je bent vergeten om je emailadres in te vullen.",
                    email: "Het opgegeven emailadres is niet geldig."
                },
                emails: {
                    required: "Je bent vergeten om het emailadres van je vriend(in) in te vullen.",
                    email: "Je moet een geldig e-mailadres van je vriend(in) invullen."
                }
            }
        });
    }); 
</script>

<form id="form" method="post">
Jouw naam: <input type="text" name="name"><br />
Jouw e-mailadres: <input type="text" name="email"><br />
Het e-mailadres van je vriend(in): <input type="text" name="emails"><br />
<input type="submit" value="Verstuur">
</form>

按值传递的电子邮件必须能够提供多个电子邮件地址，例如[e-mail];[e-mail]或[e-mail],[e-mail]

这样做时，验证插件会给出错误：Je moet een geldig e-mailadres van je vriend(in) invullen。

我该如何解决这个问题？

- Arthur

Answer 1

这是一个通过addMethod添加的自定义函数：

jQuery.validator.addMethod(
    "multiemail",
     function(value, element) {
         if (this.optional(element)) // return true on optional element 
             return true;
         var emails = value.split(/[;,]+/); // split element by , and ;
         valid = true;
         for (var i in emails) {
             value = emails[i];
             valid = valid &&
                     jQuery.validator.methods.email.call(this, $.trim(value), element);
         }
         return valid;
     },

    jQuery.validator.messages.email
);

这是一个 jsFiddle 示例，展示了如何使用 multiemail 自定义方法：

http://jsfiddle.net/leniel/xFphm/7/

- Leniel Maccaferri

---

将此JavaScript包含在您的页面中，然后在您有<code>emails: { required: true,email: true }</code>的位置，将其更改为<code>emails: { required: true,multiemail: true }</code>。 - Adrian J. Moreno

你按照fiddle中展示的代码复制了吗？我又更新了一下... :D - Leniel Maccaferri

你在你的网站上实现了jsFiddle代码吗？这段代码在你的项目中是否正常工作？我问这个问题是因为在jsFiddle中可能缺少一些JavaScript文件... - Leniel Maccaferri

让我们在聊天中继续这个讨论：http://chat.stackoverflow.com/rooms/10611/discussion-between-leniel-macaferi-and-arthur-van-dam - Leniel Maccaferri

我可以建议将 valid 默认设置为 false，并在任何返回无效时中断循环：if(!valid) break;。 - PickYourPoison

Answer 2

我可能过度设计了这个功能，但我希望能够直接从Outlook等邮件客户端中粘贴多个电子邮件地址，其中地址可能还包含收件人的姓名：

"Firstname Lastname" <[e-mail]>; "Dud Address" <not-a-real-email-for-some-reason>; "Another Recipient" <[e-mail]>

我也想验证每个地址，并告诉用户如果其中一个地址失败了，具体是哪个地址失败了。

/**
 * The regular expression used to split emails,
 * where more than one email can be passed.
 * @type {RegExp}
 */
const emailSplitterRegex = /\s*?[;,]+\s*?/;

/**
 * The regular expression used to filter out
 * emails from email client strings that can include
 * the name of the recipient also.
 *
 * @type {RegExp}
 */
const outlookEmailStringSplitterRegex = /['"]?(\w+(?:\s+\w+)*)?['"]?\s*<?(\b[^\s]+@[\w.-]+\.[a-zA-Z]{2,4}\b)/g;

/**
 * Checks to see if complex email strings from email clients like Outlook,
 * that format the string like "Firstname Lastname" <[e-mail]>
 * are valid emails by stripping away everything except the email itself.
 *
 * @param obj
 * @param email
 * @param element
 * @returns {boolean|*}
 */
function emailStringIsValid(obj, email, element){
    // Run the string thru the outlook email string splitter regex
    let matchesObject = email.matchAll(outlookEmailStringSplitterRegex);

    // Convert the RegExpStringIterator to an array
    let matches = [...matchesObject];

    if (matches.length) {
        //if the string is an outlook email string ("Name" <[e-mail]>)

        //strip away everything but the email address itself
        email = matches[0].pop();
    }

    // trim whitespaces
    email = email.trim();

    // ignore empty strings
    if(!email.length){
        return true;
    }

    // Run the validator on the email address
    return $.validator.methods.email.call(obj, $.trim(email), element);
}

/**
 * Returns a custom error message for email strings. Particularly useful
 * for when multiple emails are passed and the error message should only
 * reference the email that is invalid.
 *
 * @param params
 * @param element
 * @returns {string}
 */
function emailsErrorMessage(params, element) {
    var emails = $(element).val().split(emailSplitterRegex);
    switch (emails.length) {
        case 0:
            return "Please enter at least one email address.";
        case 1:
            return "Please enter a valid email address.";
        default:
            for (let email of emails) {
                if(!emailStringIsValid(this, email, element)){
                    // Ensure brackets aren't treated as tags
                    email = email.replace(/</g, "&lt;");
                    email = email.replace(/>/g, "&gt;");

                    // Return an error message
                    return `${email} is not a valid email address.`;
                }
            }
            break;
    }
}

/**
 * Custom validator for when multiple emails can be passed, separated by
 * commas or semicolons.
 */
$.validator.addMethod("emails", function (value, element, params) {
    // Split the email string
    var emails = value.split(emailSplitterRegex); // split element by , and ;

    for (let email of emails) {
        // for each email
        if (!emailStringIsValid(this, email, element)) {
            //if a single email is invalid, return the whole string as invalid
            return false;
        }
    }

    return true;
}, emailsErrorMessage);

- dearsina

Answer 3

带有消息的定制函数

<script>    
jQuery.validator.addMethod("custom_method_one", function (value, element) {
    if (this.optional(element)) {
    return true;
    }

    var emails = value.split(','),
    valid = true;

    for (var i = 0, limit = emails.length; i < limit; i++) {
    value = emails[i];
    valid = valid && jQuery.validator.methods.email.call(this, value, element);
    }

    return valid;
    }, "Invalid email format: please use a comma to separate multiple email addresses.");

$('#form').validate({
 "emails": {  required:true,custom_method_one: true }   
})
</script>

<form method="post" id="form" name="form" action="">
 <input type="text" name="emails" id="emails" placeholder="(eg:[e-mail],[e-mail],....)"/>

</form>

- Mahendra Jella