ASP.NET MVC4中checkboxlist的验证实现

前面的文章中实现了htmlhelper中的checkboxlist的扩展方法，但是没有实现对checkboxlist的验证，现在来实现对验证功能的扩展。

要实现验证需要实现两个方面的验证，一个是后台的验证，就是自定义一个validateattribute类，还有一个就是对js脚本验证的扩展。

首先来实现后台的验证，再项目中新建一个类名叫ListSelectRangeAttribute，其中代码如下。

using System;using System.Collections.Generic;using System.ComponentModel.DataAnnotations;using System.Web.Mvc;namespace System.ComponentModel.DataAnnotations{    /// <summary>    /// checkboxlist验证    /// </summary>    [AttributeUsage(AttributeTargets.Property | AttributeTargets.Field | AttributeTargets.Parameter, AllowMultiple = false)]    public class ListSelectRangeAttribute : ValidationAttribute, IClientValidatable    {        /// <summary>        /// 构造函数        /// </summary>        public ListSelectRangeAttribute()        {            MinSelected = 0;            MaxSelected = -1;        }        /// <summary>        /// 最少选择个数        /// </summary>        public int MinSelected { get; set; }        /// <summary>        /// 最多选择个数        /// </summary>        public int MaxSelected { get; set; }        /// <summary>        /// viewmodel验证规则        /// </summary>        /// <param name="value"></param>        /// <returns></returns>        public override bool IsValid(object value)        {            if (value == null)            {                return false;            }            int length = (value as Array).Length;            return (length >= MinSelected && (MaxSelected <= 0 || length <= MaxSelected));        }        /// <summary>        /// 生成客户端验证规则        /// </summary>        /// <param name="metadata"></param>        /// <param name="context"></param>        /// <returns></returns>        public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)        {            ModelClientValidationRule rule = new ModelClientValidationRule            {                ValidationType = "list",                ErrorMessage = FormatErrorMessage(metadata.GetDisplayName())            };            rule.ValidationParameters["min"] = MinSelected;            rule.ValidationParameters["max"] = MaxSelected;            yield return rule;        }    }}

上面的代码有三个地方要注意，一是AttributeUsage的使用，关于AttributeUsage的详情再我ORM笔记的第一篇有详细描述，这里不多说。二是IsValid方法，这个方法是从ValidationAttribute类中继承来的，作用是对viewmodel做验证的，具体来说就是当你的form提交然后在action中获取viewmodel的参数前，mvc会先对viewmodel的所有属性根据属性前的验证条件类中的IsValid方法进行验证，然后在action中根据ModelState.IsValid来判断viewmodel的输入是否合法，true为合法，false为不合法。三是GetClientValidationRules方法，这个方法继承自接口IClientValidatable，作用是生成前端html标签中的验证信息。

然后将该标签添加到viewmodel的属性上访，例如将之前上一篇博文中实现的fruitselect类进行修改，代码如下：

using System;using System.Collections.Generic;using System.ComponentModel.DataAnnotations;using System.ComponentModel.DataAnnotations.Schema;using System.Data.Entity;using System.Globalization;using System.Web.Security;namespace MvcApplication1.Models{    public class FruitViewModel    {        [Display(Name = "选择水果")]        [ListSelectRange(MinSelected = 1, MaxSelected = 3, ErrorMessage = "最少选择一个，最多选择三个")]        public long[] Fruits { get; set; }    }}

到这里其实action中已经可以实现验证了，再controller中添加一个action叫submit代码如下：

public ActionResult Submit(FruitViewModel model){    return View(ModelState.IsValid);}

再添加对应的视图submit，代码如下：

@model bool@{    ViewBag.Title = "Submit";}<h2>@Model</h2>

最后对之前的fruitselect视图修改一下，给form添加一下提交的action，代码如下：

@model MvcApplication1.Models.FruitViewModel@{    ViewBag.Title = "FruitSelect";    List<MvcApplication1.Models.Fruit> fruitList = (List<MvcApplication1.Models.Fruit>)ViewData["FruitList"];}@using (Html.BeginForm("Submit", "Home")){    @Html.LabelFor(model => model.Fruits)    @Html.CheckBoxListFor(model => model.Fruits, model => model.Fruits, fruitList, f => f.Id, f => f.Name, false, new Dictionary<string, object> { {"class", "check-inline"} })    @Html.ValidationMessageFor(model => model.Fruits)    <input type="submit" value="提交" />}

执行结果如下：

  

当一个都不选或者选的个数超过3个时返回false，说明验证不通过。

 

当选择两个时返回true，说明验证通过。

但是在实际的使用中肯定不能仅仅实现后端的验证，前端的网页上的验证也需要实现，这个就需要对微软的jquery.validate.unobtrusive.js文件进行修改了，这里因为是我单位的前端帮助我搞定的，其中的原理我也不是非常清楚，所以这里直接上代码了，想弄明白的朋友可以自行研究。

修改方法如下，再jquery.validate.unobtrusive.js文件中添加如下两段代码：

    $jQval.addMethod("maxminselected", function (value, element, param) {        var min = param.min;        var max = param.max;        var length = $(param.form).find(":input[name='" + escapeAttributeValue(param.paramName) + "']:checked").length        if (value >= min && (max <= 0 || length <= max)) {            return true;        }        return false;    });

    adapters.add("list", ["min", "max"], function (options) {        var value = {            min: options.params.min,            max: options.params.max,            paramName: options.element.name,            form: options.form        };        setValidationValues(options, "maxminselected", value);    });

具体添加的位置如下图所示：

最后再视图中引入jquery.validate.js和jquery.validate.unobtrusive.js脚本即可，具体运行结果如下图所示：

  

当选择的少于1个或者多于3个是都会提示错误信息，反之则不会报错。

至此，checkboxlist的实现就全部完成了，总的来说还是比较简单的，不过还是挺有趣的