首页 > 代码库 > mvc之验证IEnumerable<T> 类型，多选框验证

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

2024-07-10 00:32:49   219人阅读

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

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

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("请至少选择一个班级。") }             }        });    });




联系
我们