使用jQuery Validation实现多邮箱正则验证遇阻，求解决方案

Got it, let's sort out this multi-email validation problem for you! Since JavaScript isn't your strong suit, I'll break this down step by step so it's easy to integrate with your existing code.

1. Add a Custom Validation Method #

First, we need to create a custom rule in jQuery Validation that checks for multiple valid emails. This goes before your $('#form').validate() initialization:

// Custom validation rule for multiple emails
$.validator.addMethod("multiEmail", function(value, element) {
  // Regex to match multiple emails (separated by commas/semicolons, allows spaces around separators)
  var emailRegex = /^([a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})(\s*[;,]\s*[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})*$/;
  // Allow empty value if the field isn't required (remove this line if it's a mandatory field)
  return this.optional(element) || emailRegex.test(value);
}, "Please enter valid email addresses separated by commas or semicolons.");

2. Integrate the Rule into Your Existing Validation Code #

Now, update your validate() configuration to use this new rule for your multi-email field. I'll fill in the truncated parts of your code (like the highlight function) to make it complete:

$('#form').validate({
  errorContainer: ".form_errors",
  showErrors: function (errorMap, errorList) {
    $(".form_errors").html("<span>All red marked borders are required.</span>");
    this.defaultShowErrors();
  },
  invalidHandler: function(form, validator) {
    // You can add custom logic here if needed (e.g., scroll to first error)
  },
  errorPlacement: function(error, element) {
    // Place error messages where you want (e.g., after the element)
    error.insertAfter(element);
  },
  highlight: function(element, errorClass, validClass) {
    // Add error styling to invalid fields
    $(element).addClass(errorClass).removeClass(validClass);
  },
  unhighlight: function(element, errorClass, validClass) {
    // Remove error styling when field is valid
    $(element).removeClass(errorClass).addClass(validClass);
  },
  rules: {
    // Replace "multi_email_field" with the NAME attribute of your email input
    multi_email_field: {
      required: true, // Remove this line if the field isn't mandatory
      multiEmail: true
    }
  },
  messages: {
    multi_email_field: {
      required: "This field is required.",
      multiEmail: "Please enter valid emails separated by commas or semicolons."
    }
  }
});

3. Quick Notes for You #

• Make sure your email input has a name attribute matching what's in the rules section (e.g., name="multi_email_field"). jQuery Validation uses the name attribute to target fields.
• The regex allows emails separated by commas or semicolons, and ignores spaces around the separators (so user1@example.com, user2@test.org works).
• If your field isn't required, remove the required: true line from the rules.

That should do it! Just drop this code into your project, adjust the input name to match your form, and test it out. It'll validate that every email in the field is properly formatted and separated correctly.

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