ASP.NET全栈开发验证模块之将前后台校验结合

前五篇博文分别介绍并实现了前端校验和服务器校验，这篇博文主要是介绍如何将两者结合起来使用，并总结。

之前，我们在ASP.NET MVC中集成了基于FluentValidator的验证器，并通过扩展Controller，在ControllEx中 使用 OnActionExecuting 进行统一校验。最后将所有错误信息存放在ViewData["Error"]内部后返回视图。

在视图呈现方面，我们使用了HtmlHelper的扩展方法来帮呈现，这样有效避免了Null的尴尬局面。

        /// <summary>
        /// 显示指定属性的错误消息
        /// </summary>
        /// <param name="htmlHelper">HtmlHelper</param>
        /// <param name="property">指定的属性</param>
        /// <param name="error">ViewData["Error"]</param>
        /// <param name="tagType">标签类型</param>
        /// <param name="htmlAttribute">标签属性</param>
        /// <returns></returns>
        public static MvcHtmlString ValidatorMessageFor(this HtmlHelper htmlHelper, string property, object error, string tagType = "p", object htmlAttribute = null)
        {
            var dicError = error as Dictionary<string, string>;

            if (dicError != null)  //没有错误
            {
                if (dicError.ContainsKey(property))
                {
                    StringBuilder sb = new StringBuilder();
                    if (htmlAttribute != null)
                    {
                        htmlAttribute.GetType().GetProperties().ToList().ForEach((p) =>
                        {
                            string key = p.Name;
                            string value = p.GetValue(htmlAttribute).ToString();
                            sb.AppendFormat(" {0}='{1}' ", key, value);
                        });
                    }
                    return new MvcHtmlString(string.Format("<{0} {2}>{1}</{0}>", tagType, dicError[property], sb.ToString()));
                }
            }
            return new MvcHtmlString("");
        }

如今我对HtmlHelper做了一定修改，使它支持自定义标签类型和定义Html的属性，这会让我们好的管理呈现效果。比方为他加一个样式。

通过以上步骤我们就实现了服务端的验证。

在前端，与前几章说讲的一样，我们使用Vue，并自编写了基于Vue的验证插件vuefluentvalidator，为什么叫它vuefluentvalidator，因为编写它的时候就是借鉴的咱们后台验证框架FluentValidator的使用方式。

@using ValidationWebTest.Mvc.MvcHelperEx
@{
    ViewBag.Title = "ValidatorTest";
}
<h2>ValidatorTest</h2>
<div id="box">
    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()

        <div class="form-horizontal">
            <h4>Person</h4>
            <hr />
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            <div class="form-group">
                <label for="Name" class="control-label col-md-2">姓名</label>
                <div class="col-md-10">
                    <input type="text" name="Name" class="form-control" v-model="model.name" />
                    <p v-text="model.error.name"></p>
                    @Html.ValidatorMessageFor("Name", ViewData["Error"], "span", new { @class = "text-info" })
                </div>
            </div>

            <div class="form-group">
                <label for="Age" class="control-label col-md-2">年龄</label>
                <div class="col-md-10">
                    <input type="text" name="Age" class="form-control" v-model="model.age" />
                    <p v-text="model.error.age"></p>
                    @Html.ValidatorMessageFor("Age", ViewData["Error"], "strong")
                </div>
            </div>

            <div class="form-group">
                <label for="Home" class="control-label col-md-2">住址</label>
                <div class="col-md-10">
                    <input type="text" name="Address.Home" class="form-control" v-model="model.address.home" />
                    <p v-text="model.error.address.home"></p>
                    @Html.ValidatorMessageFor("Address.Home", ViewData["Error"])
                </div>
            </div>

            <div class="form-group">
                <label for="Phone" class="control-label col-md-2">电话</label>
                <div class="col-md-10">
                    <input type="text" name="Address.Phone" class="form-control" v-model="model.address.phone" />
                    <p v-text="model.error.address.phone"></p>
                    @Html.ValidatorMessageFor("Address.Phone", ViewData["Error"])
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Create" class="btn btn-default" v-on:click="formSubmit($event)" />
                </div>
            </div>
        </div>
    }
</div>

@section scripts{
    <script src="~/Content/vue.js"></script>
    <script src="~/Content/vuefluentvalidator.js"></script>
    <script>
        let vm = new Vue({
            el: '#box',
            data: {
                validator: new Validator({
                    model: {
                        name: undefined,
                        age: undefined,
                        address: {
                            home: undefined,
                            phone: undefined
                        },
                    },
                    rule: function (than) {
                        than.ruleFor("name")
                            .NotEmpty()
                            .WithMessage("姓名不能为空")
                            .MinimumLength(5)
                            .WithMessage("最短长度为5");

                        than.ruleFor("age")
                            .NotEmpty()
                            .WithMessage("年龄不能为空");

                        than.ruleFor("address.home")
                            .NotEmpty()
                            .WithMessage("家庭地址不能为空");

                        than.ruleFor("address.phone")
                            .NotEmpty()
                            .WithMessage("电话不能为空");
                    }
                }),
            },
            methods: {
                formSubmit: function (ev) {
                    if (this.validator.passValidation()) {
                        return;
                    }
                    ev.preventDefault();

                    this.validator.validation(ev.target);
                }
            },
            computed: {
                model: function () {
                    return this.validator.model;
                }
            }
        });
    </script>
}

使用方式和之前前端验证所讲的都一模一样，只是在验证下边加了一行

 @Html.ValidatorMessageFor("Name", ViewData["Error"], "span", new { @class = "text-info" })

为什么我会这样写？因为在正常情况下，我们前端会进行校验，如果前端校验不通过的时候，请求不会发送到后台，所以这一行在正常情况下是用不到的。

那在什么时候会用到他？在前端校验失效时或伪造请求时。

首先分析第一种

前端校验失效，也就意味着javascript失效，这种情况下我们的

<p v-text="model.error.name"></p>

什么都显示不出来。

而在验证失败的时候 @Html.ValidatorMessageFor("Name", ViewData["Error"], "span", new { @class = "text-info" }) 就会起作用了，由于我们对标签的呈现效果控制的灵活性，在视觉体验上，没有任何区别。

如果在第二种情况下，他都不是一个正常的请求，我管它干什么？阻止就是了。

如果你认为既然使用Vue，那为什么不将错误信息绑定到我们的验证器上呢？

事实上我也想过这么做，一是它的工作量比现在这种方式更大（原谅我偷了个懒），二是，如果javascript失效的话，那岂不是根本显示不出来？

综上所述，于是我决定就让它这样简单而愉快的结束吧。到此我们的前后端校验功能就算全部实现。

由于博文是前五篇的延续，在一些重复的内容上，不过多介绍，如果您在阅读时，有任何疑问，请从前面开始阅读。