mvc之验证IEnumerable<T> 类型，多选框验证

浏览数：17 / 时间：2015年06月09日

假设我们有这么一种需求，我们要同时添加年级和年级下面的多个班级，我们一般会像下面这种做法。

Action中我们这样接收：

[HttpPost]
public ActionResult CreateGrade(string gradeName, IEnumerable<string> classNames)
{

    return View();
}

View中我们一般会这样做：

@using (Ajax.BeginForm("index", "home", new AjaxOptions { OnBegin="onBegin", OnSuccess = "onSuccess" }))
{
    <p>
        若要了解有关 ASP.NET MVC 的更多信息，请访问 @Html.ActionLink("link me", "about", "home", new { plugin="dialog"})。
    </p>
    <input type="text" class="required" style="width:90px;" name="gradeName" />
    <input type="text" class="required" style="width:90px;" name="classNmae" />
    <input type="text" class="required" style="width:90px;" name="classNmae" />
    <input type="text" class="required" style="width:90px;" name="classNmae" />
    <button class="tn-button-primary" type="submit">
        <span class="tn-button-text">提交</span></button>
}

这种做法会有什么问题呢？问题在于jquery.validate验证不支持验证多个相同的name，默认只验证第一个，所以只要第一个验证了，表单就可以提交了。我们要怎么改进呢？其实很简单，改一下班级的input的name就可以了。如下：

@using (Ajax.BeginForm("index", "home", new AjaxOptions { OnBegin="onBegin", OnSuccess = "onSuccess" }))
{
    <p>
        若要了解有关 ASP.NET MVC 的更多信息，请访问 @Html.ActionLink("link me", "about", "home", new { plugin="dialog"})。
    </p>
    <input type="text" class="required" style="width:90px;" name="gradeName" />
    <input type="text" class="required" style="width:90px;" name="classNmae[0]" />
    <input type="text" class="required" style="width:90px;" name="classNmae[1]" />
    <input type="text" class="required" style="width:90px;" name="classNmae[2]" />
    <button class="tn-button-primary " type="submit">
        <span class="tn-button-text">提交</span></button>
}

这样子就可以每一个都验证了，类似这样子验证的还有IEnumerable<Grade>，可以这样子写grade.Name[0]，grade.Name[1]。但是这样子还是有问题，就是我们只能通过class样式来验证，如必填项class="required"。改成这样之后我们要怎么实现通过类似$("form").validate({options})来配置验证呢？不用急下面来介绍怎么实现吧。

@using (Ajax.BeginForm("index", "home", new AjaxOptions { OnBegin="onBegin", OnSuccess = "onSuccess" }))
{
    <p>
        若要了解有关 ASP.NET MVC 的更多信息，请访问 @Html.ActionLink("link me", "about", "home", new { plugin="dialog"})。
    </p>
    <input type="text" style="width:90px;" name="gradeName" />
    <input type="text" style="width:90px;" name="classNmae[0]" class="classname" />
    <input type="text" style="width:90px;" name="classNmae[1]" class="classname" />
    <input type="text" style="width:90px;" name="classNmae[2]" class="classname" />
    <button class="tn-button-primary " type="submit">
        <span class="tn-button-text">提交</span></button>
}
<script type="text/javascript">
    $(function () {
        $("form").validate();//这句是必须的。
        $("input.classname").each(function () {
            $(this).rules("add", {
                required: true,
                number: true,
                messages: {
                    required: "不能为空",
                    number: "只能是数字"
                }
            });
        });
    })
</script>

这样子就是现实了。
来一个完整的：

@using (Html.BeginForm("index", "home", FormMethod.Post, new { id="createForm"}))
{
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>创建年级</legend>
        <div class="editor-label">
            年级名称
        </div>
        <div class="editor-field">
            <input type="text" class="required" style="width:90px;" name="gradeName" />
        </div>

        <div class="editor-label">
            班级1
        </div>
        <div class="editor-field">
            <input type="text" style="width:90px;" name="classNmae[0]" class="classname" />
        </div>
        <div class="editor-label">
            班级2
        </div>
        <div class="editor-field">
            <input type="text" style="width:90px;" name="classNmae[1]" class="classname" />
        </div>
        <div class="editor-label">
            班级3
        </div>
        <div class="editor-field">
            <input type="text" style="width:90px;" name="classNmae[2]" class="classname" />
        </div>
        <p>
            <button class="tn-button-primary " type="submit">
                <span class="tn-button-text">提交</span></button>
        </p>
    </fieldset>
}

<script type="text/javascript">
    $(function () {
        $("#createForm").validate();//这句是必须的。
        $("input.classname").each(function () {
            $(this).rules("add", {
                required: true,
                number: true,
                messages: {
                    required: "不能为空",
                    number: "只能是数字"
                }
            });
        });
    })
</script>

多选框验证：

<div class="tnc-select-checkbox tn-helper-clearfix">
    @if (classes != null && classes.Count() > 0)
    {
        foreach (var item in classes)
        {
        <div class="tn-form-row">
            @Html.SipmleCheckBox("classIds", item.Id, htmlAttributes: new { @class = "tn-radiobutton", id = "classId_" + item.Id })
            <label for="@(string.Format("classId_{0}", item.Id))" title="@item.ClassFullName">
                @StringUtility.Trim(item.ClassFullName, 7)</label>
        </div>
        }
    }
</div>

$(function () {
        $("#editForm").validate();
        $("input[name=‘classIds‘]").rules("add", {
            required: true,
            messages: {
                required: function () { alert("请至少选择一个班级。") } 
            }
        });
    });