假设我们有这么一种需求，我们要同时添加年级和年级下面的多个班级，我们一般会像下面这种做法。
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("请至少选择一个班级。") }
}
});
});