mvc之验证IEnumerable<T> 类型,多选框验证
2013-09-03 22:57
375 查看
假设我们有这么一种需求,我们要同时添加年级和年级下面的多个班级,我们一般会像下面这种做法。
Action中我们这样接收:
View中我们一般会这样做:
这种做法会有什么问题呢? 问题在于jquery.validate验证不支持验证多个相同的name,默认只验证第一个,所以只要第一个验证了,表单就可以提交了。我们要怎么改进呢?其实很简单,改一下班级的input的name就可以了。如下:
这样子就可以每一个都验证了,类似这样子验证的还有IEnumerable<Grade>,可以这样子写grade.Name[0],grade.Name[1]。但是这样子还是有问题,就是我们只能通过class样式来验证,如必填项class="required"。改成这样之后我们要怎么实现通过类似$("form").validate({options})来配置验证呢? 不用急下面来介绍怎么实现吧。
这样子就是现实了。
来一个完整的:
![](http://img.blog.csdn.net/20130903225415250?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2VpemVuZ3h1bg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
多选框验证:
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("请至少选择一个班级。") } } }); });
相关文章推荐
- mvc之验证IEnumerable<T> 类型
- mvc之验证IEnumerable<T> 类型,多选框验证
- enum的秘密<一>:enum是“用户自定义类型”(有意思 不过有的验证不正确)
- 如何实现IEnumerable<T>和IEnumerator接口,一个ASP.NET MVC日志模型的实现
- C++基础<02>—变量和基本类型
- Java基础<二>--->关键字、数据类型、运算
- 解析spring MVC3 <mvc:annotation-driven> 实现
- <mvc:annotation-driven/>
- 深入理解泛型,类型通配符<?>,类型通配符上限,下限
- 如何判断对象包含List<T>中的类型
- 使用@Controller注解为什么要配置<mvc:annotation-driven />
- 使用泛型类型System.Collections.Generic.Icomparer &lt;T&gt; 需要一个类型参数
- <细节>C++标准库string类型
- Struts2 全局结果类型<global-results>
- js如何验证日期是否有效<包括日期是否为空,是否符合格式2013-04-17,及是否是一个合法的日期>
- Java 面试题之反射的应用(如何在List<String> list = new ArrayList<String>();中放入Integer类型的数据)
- Spring MVC学习-----------<mvc:annotation-driven /> 到底做了什么工作
- MVC 5.0 之奇葩错误-<类型“ASP._Page__ViewStart_cshtml”不从“System.Web.WebPages.StartPage”继承>
- web.xml中<security-constraint>和四种认证类型
- 整合springmvc+mybatis+veloctiy<三>