MVC 客户端验证 - 将两个字段验证合并到一条消息中答案

【问题标题】：MVC Client Side Validation - Combine two fields validation into one messageMVC 客户端验证 - 将两个字段验证合并到一条消息中
【发布时间】：2020-10-23 03:42:55
【问题描述】：

我有下面的代码：

    [Display(Name = "Last Name")]
    [RegularExpression(@"^[-.&()a-zA-Z0-9'' ']*$", ErrorMessage = "Special character not allowed.")]
    public string LastName { get; set; }

    [Display(Name = "First Name")]
    [RegularExpression(@"^[-.&()a-zA-Z0-9'' ']*$", ErrorMessage = "Special character not allowed.")]
    public string FirstName { get; set; }

如果这些字段中的任何一个引发此正则表达式错误，我希望在视图上只显示一条错误消息。

我很容易看到如何使用 IValidateObject 执行此操作，但我希望通过 ClientSide 验证保持即时。有没有办法让验证保持即时？

【问题讨论】：

标签： c# asp.net-core model-view-controller razor client-side-validation

【解决方案1】：

这是一个使用 js 只显示一条错误消息的演示。

客户端名称：

public class ClientSideName
    {
        [Display(Name = "Last Name")]
        [RegularExpression(@"^[-.&()a-zA-Z0-9'' ']*$", ErrorMessage = "Special character not allowed.")]
        public string LastName { get; set; }

        [Display(Name = "First Name")]
        [RegularExpression(@"^[-.&()a-zA-Z0-9'' ']*$", ErrorMessage = "Special character not allowed.")]
        public string FirstName { get; set; }
    }

查看：

<div class="row">
    <div class="col-md-4">
        <form method="post" id="UserForm">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="FirstName" class="control-label"></label>
                <input asp-for="FirstName" class="form-control" name="FirstName" />
            </div>
            <div class="form-group">
                <label asp-for="LastName" class="control-label"></label>
                <input asp-for="LastName" class="form-control" name="LastName" />
            </div>
            <div id="user_name_error">
                <span asp-validation-for="FirstName" class="text-danger"></span>
                <span asp-validation-for="LastName" class="text-danger"></span>
            </div>


            <div class="form-group">
                <input type="submit" value="Validate" class="btn btn-info" />
            </div>
        </form>
    </div>
</div>
@section scripts{
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
    <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
    <script type="text/javascript">
       
        $("input").change(function () {
            var reg = "/^[-.&()a-zA-Z0-9'' ']*$/";
            var r = $(this).val().match(reg); 
            var name = $(this).attr("name");
            if (r == null) {
                if (name == "FirstName" && $("#LastName").attr("aria-invalid") == "true") {
                    $("#user_name_error span[data-valmsg-for='FirstName']").attr("hidden", "hidden");
                    $("#user_name_error span[data-valmsg-for='LastName']").removeAttr("hidden");
                }else if (name == "LastName" && $("#FirstName").attr("aria-invalid") == "true") {
                    $("#user_name_error span[data-valmsg-for='LastName']").attr("hidden", "hidden");
                    $("#user_name_error span[data-valmsg-for='FirstName']").removeAttr("hidden");
                }else {
                    $("#user_name_error span[data-valmsg-for='FirstName']").removeAttr("hidden");
                    $("#user_name_error span[data-valmsg-for='LastName']").removeAttr("hidden");
                }
                    
            }
        })
    </script>
}

结果：

【讨论】：