Asp.net Mvc自定义客户端验证(CheckBox列表的验证)

最近在使用MVC进行开发时，使用进行客户端的输入验证，加上使用MVC3的新视图引擎感觉还是挺方便的，不用自己去写很多js了，并且效果也能让人接受

可是遇上要向外输出比如一个CheckBox列表时就纠结了，验证代码还得自己去写，这样就造成了客户端采用了两套验证，感觉不统一也不优雅，于是就琢磨了一下，便有了如下实现方式。

HtmlHelper的扩展类主要包括CheckBoxList,CheckBoxListFor等方法,有了这些方法，你可以这样生成checkBox 列表

@Html.CheckBoxListFor(m=>m.RoleList,"li")

下来就是扩展的全部代码

View Code

using System;

using System.Collections.Generic;

using System.ComponentModel.DataAnnotations;

using System.Web.Mvc;

namespace Newborn.BSCommon

{

[AttributeUsage(AttributeTargets.Property | AttributeTargets.Field | AttributeTargets.Parameter, AllowMultiple = false)]

public class ListSlectRangeAttribute : ValidationAttribute, IClientValidatable

{

private const string errFormat = "该项最少选择项为{0}最多选择项为{1}";

public ListSlectRangeAttribute()

{

MinSelected = 0;

MaxSelected = -1;

}

public int MinSelected { get; set; }

public int MaxSelected { get; set; }

public override bool IsValid(object value)

{

return true;

}

public override string FormatErrorMessage(string name)

{

return string.Format(errFormat, MinSelected > 0 ? MinSelected.ToString() : "不限", MaxSelected > 0 ? MaxSelected.ToString() : "不限");

}

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;

}

}

}

jquery.validate.unobtrusive.extension.js文件主要完成客户端如checkbox列表的验证,细心的朋友会发现因为checkbox列表是多个input所以我没有基于它来做，而是采用一个隐藏域还记录现在选择的项数目（目前只记录选择了多少项，没记录选择的项值之类的，不过目前暂无此类需求，如果有扩展起来也行方便）。

//by xianhong

//添加验证如验证框必须选择一定数量的验证

$.validator.addMethod("maxminselected", function (value, element, param) {

var min = param[0];

var max = param[1];

if (value >= min && (max <= 0 || value <= max))

return true;

return false;

});

$.validator.unobtrusive.adapters.addMinMax("list", "min", "max", "maxminselected");

var checkBoxList = function (name/*input name属性*/, hiddenId/*记录选择的隐藏域*/) {

this.checkedCount = function () {

var selected = $("input[name='" + name + "']:checked");

return selected.length;

};

this.All = function () {

return $("input[name='" + name + "']");

};

this.BindClick = function () {

var thisobj = this;

this.All().click(function () {

$("#" + hiddenId).val(thisobj.checkedCount());

});

};

this.BindClick();

};