首页 > 代码库 > mvc 前端校验
mvc 前端校验
首先解决 Ajax.BeginFor异步提交表单，给表单添加样式的问题。不能直接用class属性，网上找了很多都是用ClassName，经过测试不管用，看源代码发现生成的是ClassName而非class,其实很简单，加一个@符号即可，即@class="";
我们知道，LabelFor是不能添加class样式的，这个需自行拓展，反编译后自行拓展了一个给LabelFor添加样式的方法，代码如下：
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Web.Mvc; 6 using System.Linq.Expressions; 7 8 namespace System.Web.Mvc 9 {10 public static class MyLabelExtensions11 {12 public static MvcHtmlString MyLabelFor<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression, string className)13 {14 return LabelHelper(html, ModelMetadata.FromLambdaExpression<TModel, TValue>(expression, html.ViewData), ExpressionHelper.GetExpressionText(expression), className);15 }16 17 private static MvcHtmlString LabelHelper(HtmlHelper html, ModelMetadata metadata, string htmlFieldName, string className = "")18 {19 string txtLabel = metadata.DisplayName ??20 (metadata.PropertyName ?? htmlFieldName.Split(new char[] {‘,‘}).Last<string>());21 if (string.IsNullOrEmpty(className))22 {23 return MvcHtmlString.Empty;24 }25 TagBuilder tagBuilder = new TagBuilder("label");26 tagBuilder.Attributes.Add("for", TagBuilder.CreateSanitizedId(html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(htmlFieldName)));27 tagBuilder.Attributes.Add("class", className);28 tagBuilder.SetInnerText(txtLabel);29 return new MvcHtmlString(tagBuilder.ToString(TagRenderMode.Normal));30 }31 }32 }
先看效果：
前端JS代码：
@{ Layout = null;}@model MvcApp.DataTable.Controllers.MyTest<!DOCTYPE html><html><head> <title>Index</title> <link href="http://www.mamicode.com/JQueryValidate/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="http://www.mamicode.com/JQueryValidate/style.css" rel="stylesheet" type="text/css" /> <script src="http://www.mamicode.com/JQueryValidate/assets/js/jquery-1.7.1.min.js" type="text/javascript"></script> <script src="http://www.mamicode.com/JQueryValidate/assets/js/jquery.validate.js" type="text/javascript"></script> <script type="text/javascript" language="javascript" charset="gb2312"> $(document).ready(function() { $(‘#contact-form‘).validate({ rules: { Name: { minlength: 2, required: true, remote: { url: "/Home/GetSameNameCount/", type: "post", data: { Name: function () { return $(‘#Name‘).val(); } } } }, Email: { required: true, email: true }, Subject: { minlength: 2, required: true }, Password: { required: true, minlength: 5 }, Password2: { required: true, minlength: 5, equalTo: "#Password" }, Address: { minlength: 2, required: true } }, messages: { Name: { minlength: "请输入长度至少2位", required: "名称必须的必！", remote: "姓名已存在，请输入其他名称" }, Email: { required: "请输入邮箱地址", email: "邮箱格式有误，请仔细检查" }, Subject: { minlength: "请输入长度至少2位", required: "Must Write Subject Please" }, Password: { required: "请输入密码", minlength: "密码长度至少为5位数" }, Password2: { required: "请再次输入密码", minlength: "密码长度至少为5位数", equalTo: "两次密码输入不一致" }, Address: { minlength: "请输入长度至少2位", required: "消息不能为空撒" } }, highlight: function (element) { $(element).closest(‘.control-group‘).removeClass(‘success‘).addClass(‘error‘); }, success: function (element) { element .text(‘OK!‘).addClass(‘valid‘) .closest(‘.control-group‘).removeClass(‘error‘).addClass(‘success‘); } }); }); function afterSave() { } </script></head> <body> @using (Ajax.BeginForm("SetRecord", "Home", new AjaxOptions { UpdateTargetId = "ajaxResult", HttpMethod = "POST", InsertionMode = InsertionMode.Replace, OnSuccess = "afterSave" }, new { id = "contact-form", @class = "form-horizontal" })) { <div class="control-group"> @Html.MyLabelFor(model => model.Name, "control-label") <div class="controls"> @Html.TextBoxFor(model => model.Name, new { @class="input-xlarge" }) </div> </div> <div class="control-group"> @Html.MyLabelFor(model => model.Email, "control-label") <div class="controls"> @Html.TextBoxFor(model => model.Email, new { @class="input-xlarge" }) </div> </div> <div class="control-group"> @Html.MyLabelFor(model => model.Subject, "control-label") <div class="controls"> @Html.TextBoxFor(model => model.Subject, new { @class="input-xlarge" }) </div> </div> <div class="control-group"> @Html.MyLabelFor(model => model.Password, "control-label") <div class="controls"> @Html.TextBoxFor(model => model.Password, new { @class = "input-xlarge", type = "password" }) </div> </div> <div class="control-group"> @Html.MyLabelFor(model => model.Password2, "control-label") <div class="controls"> @Html.TextBoxFor(model => model.Password2, new { @class = "input-xlarge", type = "password" }) </div> </div> <div class="control-group"> @Html.MyLabelFor(model => model.Address, "control-label") <div class="controls"> <textarea class="input-xlarge" name="Address" id="Address" rows="3"></textarea> </div> </div> <div class="form-group"> @Html.MyLabelFor(model => model.Sex, "control-label") @Html.DropDownListFor(model => model.Sex, new SelectList(ViewBag.SexList, "strKey", "strValue", 1), "--请选择--", new { style = "width: 280px;" }) </div> <div class="form-actions"> <button type="submit" class="btn btn-primary">提交</button> <button type="reset" class="btn">重置</button> </div> } </body></html>后台C#代码：
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Web.Mvc; 6 using System.Runtime.Serialization; 7 using System.ComponentModel; 8 9 namespace MvcApp.DataTable.Controllers10 {11 public class HomeController : Controller12 {13 //14 // GET: /Home/15 16 public ActionResult Index()17 {18 ViewBag.SexList = new List<KeyValue>19 {20 new KeyValue("0","男"),new KeyValue("1","女")21 };22 return View();23 }24 25 [HttpPost]26 public ActionResult SetRecord(MyTest t)27 {28 string m = t.Name;29 return Content("ok");30 }31 32 [HttpPost]33 public ActionResult GetSameNameCount()34 {35 string Name = Request["Name"];36 bool isExistName = true;//验证通过37 if (Name == "huangzhong")38 {39 isExistName = false;//用户名已存在，验证不通过40 }41 System.Web.Script.Serialization.JavaScriptSerializer javascriptserializer = new System.Web.Script.Serialization.JavaScriptSerializer();42 return Content(javascriptserializer.Serialize(isExistName));43 }44 }45 [DataContract]46 public class MyTest47 {48 [DataMember]49 [DisplayName("姓名")]50 public string Name { get; set; }51 [DataMember]52 [DisplayName("邮箱")]53 public string Email { get; set; }54 [DataMember]55 [DisplayName("主题")]56 public string Subject { get; set; }57 [DataMember]58 [DisplayName("地址")]59 public string Address { get; set; }60 [DataMember]61 [DisplayName("密码")]62 public string Password { get; set; }63 [DataMember]64 [DisplayName("确认密码")]65 public string Password2 { get; set; }66 [DataMember]67 [DisplayName("性别")]68 public string Sex { get; set; }69 }70 71 public class KeyValue72 {73 public string strKey { get; set; }74 public string strValue { get; set; }75 public KeyValue(string iv, string it)76 {77 this.strKey = iv;78 this.strValue =http://www.mamicode.com/ it;79 }80 }81 }
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。