使用jQuery Validator自定义验证规则处理多格式分号分隔邮箱

Hey there! I've got you covered on this multi-email validation task. Since Edge doesn't play nice with the email input type, using a text field plus jQuery Validation's custom method is the right call. Here's a clean, robust solution that handles all the whitespace scenarios you mentioned:

Step 1: Define the Custom Validation Method #

We'll create a method that cleans up the input first to normalize whitespace around semicolons, then validates each individual email address.

// Custom multi-email validation method
$.validator.addMethod("multiEmail", function(value, element) {
    // Allow empty input if the field isn't required
    if (this.optional(element)) {
        return true;
    }

    // Normalize input: trim whitespace from start/end, replace any whitespace around semicolons with just a semicolon
    // This handles single spaces, multiple spaces, em spaces ( ), and other whitespace characters
    const normalizedValue = value.trim().replace(/\s*;\s*/g, ';');
    
    // Split into individual email strings
    const emailList = normalizedValue.split(';');
    
    // Regex for validating a single email (simplified RFC-compliant pattern; adjust if you need stricter rules)
    const validEmailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

    // Check if every email in the list matches the valid pattern
    return emailList.every(email => validEmailRegex.test(email));
}, "Please enter valid email addresses. Use semicolons to separate multiple emails, with any amount of whitespace allowed around semicolons.");

Step 2: Attach the Method to Your Form Field #

Now hook this custom rule up to your text input field in the validation configuration:

// Initialize validation on your form
$("#yourFormId").validate({
    rules: {
        // Replace "emailInput" with your input's name attribute
        emailInput: {
            multiEmail: true
            // Add required: true if the field can't be empty
        }
    },
    messages: {
        emailInput: {
            multiEmail: "Oops! Please check your email format. Use semicolons to separate emails, and feel free to add any spaces around the semicolons."
        }
    }
});

How This Works #

• Whitespace Handling: The replace(/\s*;\s*/g, ';') part takes care of any whitespace (single spaces, multiple spaces, em spaces, tabs, etc.) before or after semicolons, converting all those variations to a clean ; separator.
• Email Validation: The regex checks for standard email formats (you can tweak this regex if you need to support edge cases like quoted local parts or international domains).
• Flexibility: The method allows empty input by default (remove the this.optional(element) check if the field is mandatory).

内容的提问来源于stack exchange，提问作者AnnaCICI