mvc之验证IEnumerable<T> 类型

最新推荐文章于 2024-09-27 14:43:10 发布

转载最新推荐文章于 2024-09-27 14:43:10 发布 · 136 阅读

文章标签：

#测试 #javascript #ViewUI

本文讨论了在ASP.NET MVC中改进表单验证的方法，特别是如何在多个输入框中进行验证，以及如何使用jQuery.validate插件进行个性化验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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>