如何在接受多个电子邮件地址的字段上实现 MVC 不显眼的验证

Posted 2023-05-09

【中文标题】如何在接受多个电子邮件地址的字段上实现 MVC 不显眼的验证

【英文标题】：How to implement MVC unobtrusive validation on a field that accepts multiple emails addresses

【发布时间】：2018-01-24 23:48:28

【问题描述】：

我为销售团队创建了一个 MVC Web 应用程序，用于将潜在客户输入系统，同时向他们发送后续消息。一项要求是能够在发送的消息上抄送多个潜在客户。

应用程序的其余部分使用不显眼的验证，这在标准 html5 输入类型（例如“电子邮件”）上效果很好。问题是没有标准输入类型可以自动验证多个电子邮件地址，就像您在电子邮件应用程序中看到的那样。

【参考方案1】：

解决方案是创建自定义验证属性并将其注册到客户端，以便可以不显眼地对其进行验证。

创建自定义验证属性：

using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;

namespace CustomValidation.BLL 
    public class MultiEmailValidator : ValidationAttribute, IClientValidatable

        protected override ValidationResult IsValid(object value, ValidationContext validationContext) 
            return new ValidationResult("");
        

        public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context) 
            ModelClientValidationRule mvr = new ModelClientValidationRule();
            mvr.ErrorMessage = "Enter valid email addresses separated by semi-colons.";
            mvr.ValidationType = "multiemail";

            return new[]  mvr ;
        
    

在客户端注册自定义验证：

$(function ()  
    jQuery.validator.addMethod('multiemail', function (value, element, params)             
        // emails should be separated by either ';' or ','
        var email = value.split(/[;,]+/);
        valid = true;

        // call the standard jquery validator method on each email entered
        for (var i in email) 
            value = email[i];
            valid = valid && jQuery.validator.methods.email.call(this, $.trim(value), element);
        
        return valid;
    , '');

    jQuery.validator.unobtrusive.adapters.add('multiemail', function (options) 
        options.rules['multiemail'] = ;
        options.messages['multiemail'] = options.message;
    );
(jQuery));

在模型上设置属性：

[Display(Name = "Carbon Copy")]        
[MultiEmailValidator]
public string CarbonCopy  get; set; 

向视图添加输入：

<div class="form-group col-lg-10">
    @Html.LabelFor(p => p.CarbonCopy, new  @class = "sr-only" )

    @Html.TextBoxFor(p => p.CarbonCopy, new  @class = "form-control input-sm", @placeholder = "Carbon Copy" )

    @Html.ValidationMessageFor(p => p.CarbonCopy)
</div>

结果： Invalid Emails

结果： Valid Emails