ASP.NET MVC 3 使用Model自定义验证的样式
浏览数：39 /
时间：2015年06月09日
1.修改jquery.validate.unobtrusive.js
将onError方法修改
//修改的部分 /////////////////////////////////////////////////////////////////// function onError(error, inputElement) { // ‘this‘ is the form element var container = $(this).find("[data-valmsg-for=‘" + escapeAttributeValue(inputElement[0].name) + "‘]"), replaceAttrValue = container.attr("data-valmsg-replace"), replace = replaceAttrValue ? $.parseJSON(replaceAttrValue) !== false : null; //add var $customErrorTip = container.attr("data-forerrortip"); container.removeClass("field-validation-valid").addClass("field-validation-error"); error.data("unobtrusiveContainer", container); //add var elem = $("#" + inputElement[0].name.replace(".", "_"));//添加提示消息 if (replace) { container.empty(); //add start if (error.html() != "") { if ($customErrorTip) { $("#" + $customErrorTip).poshytip("destroy"); } else { elem.poshytip("destroy"); } var direction = "right"; //左边+元素宽+提示的文字+提示两边的空白 if ((elem[0].offsetLeft + elem.width() + error.length * 10 + 20) > $(document).width()) { direction = "left"; } var errorConfig = { content: error, alignTo: ‘target‘, alignX: direction, alignY: ‘center‘, showOn: ‘none‘, bgImageFrameSize: 7, offsetX: 5 }; if ($customErrorTip) { $("#" + $customErrorTip).poshytip(errorConfig).poshytip(‘show‘); } else { elem.filter(‘:not(.valid)‘).poshytip(errorConfig).poshytip(‘show‘); } } else { if ($customErrorTip) { $("#" + $customErrorTip).poshytip("destroy"); } else { elem.poshytip("destroy"); } } //add end //update disable //error.removeClass("input-validation-error").appendTo(container); } else { error.hide(); } } ///////////////////////////////////////////////////////////////////////////////////
2.Index.cshtml页面
@model MvcApplication1.Models.UserViewModel @{ ViewBag.Title = "Index"; } <link href="~/Content/poshytip/tip-yellow/tip-yellow.css" rel="stylesheet" /> <script src="~/Scripts/jquery-1.7.1.min.js"></script> <script src="~/Content/poshytip/jquery.poshytip.min.js"></script> <script src="~/Scripts/jquery.validate.min.js"></script> <script src="~/Scripts/jquery.validate.unobtrusive.js"></script> <script type="text/javascript"> function showTip(objJq, msg) { objJq.poshytip(‘destroy‘); if (!objJq.data("poshytip")) { objJq.poshytip({ showOn: ‘none‘, alignTo: ‘target‘, alignX: ‘right‘, alignY: ‘center‘, offsetX: 5, className: ‘tip-yellow‘, content:msg }); objJq.focus(function () { $(this).poshytip(‘hide‘); }); objJq.data("poshytip").$tip.click(function () { $(this).hide(); }); } objJq.poshytip(‘show‘); } $(function () { $("#btnTest").click(function () { if ($("#myfrom").valid()) { $.post("@Url.Action("Create","Home")", $("#myfrom").serializeArray(), function (data) { if (data.Status==3) { $(data.Msg).each(function () { var item = $(‘#‘ + this.Key); showTip(item, this.Value); }); } else { alert(data); } }); } }); }); </script> @using (Html.BeginForm("Create", "Home", FormMethod.Post, new { id = "myfrom" })) { <label>用户名：</label> @Html.TextBoxFor(u => u.UserName)@Html.ValidationMessageFor(u => u.UserName) <br /> <label>性别：</label>@* @Html.RadioButtonFor(u=>u.Sex,1,new{ @checked="checked"})@:男*@ @Html.RadioButtonFor(u=>u.Sex,1)@:男 @Html.RadioButtonFor(u=>u.Sex,2)@:女 <span id="groupRadioErrorSex" style="vertical-align:middle;line-height:70px;"> </span> @Html.ValidationMessageFor(u => u.Sex,"", new{data_forErrorTip="groupRadioErrorSex" }) <br /> <input type="button" value="提交" id="btnTest" /> }
3.HomeController
public class HomeController : Controller { // // GET: /Home/ public ActionResult Index() { return View(new UserViewModel() { IsEnable = false, UserCode = "aa" }); } [HttpPost] public ActionResult Create(UserViewModel model) { //移除添加了Request属性，却又不需要验证的属性 ModelState.Remove("UserCode"); ModelState.Remove("UserPwd"); ModelState.Remove("County"); if (!ModelState.IsValid) { //服务器端自定义添加错误验证 ModelState.AddModelError("UserName", "您输入的账号已被使用"); return Json(new { Status = 3, Msg = ModelState.GetErrorsDict() }); } return Json("ok"); } /// <summary> /// 远程验证用户名 /// </summary> /// <param name="username"></param> /// <returns></returns> public ActionResult GetUser(string username) { return Json(!username.ToLower().Equals("admin"),JsonRequestBehavior.AllowGet);//返回True表示通过验证，返回False表示不通过验证 } } public static class HelperExtensions { public static List<KeyValuePair<string, string>> GetErrorsDict(this ModelStateDictionary modelState) { var errorList = (from item in modelState where item.Value.Errors.Any() select new KeyValuePair<string, string>(item.Key, item.Value.Errors[0].ErrorMessage)).ToList(); return errorList; } }
4.UserViewModel
public class UserViewModel { /// <summary> /// Id /// </summary> public int Id { get; set; } /// <summary> /// FK-用户级别ID /// </summary> [Required(AllowEmptyStrings = false, ErrorMessage = "请选择用户等级")] public int LevelId { get; set; } /// <summary> /// 用户类型 详见文档 /// </summary> public int Type { get; set; } /// <summary> /// 用户编号 /// </summary> [Required()] public string UserCode { get; set; } /// <summary> /// 用户名 /// </summary> [Required(ErrorMessage = "用户名必需填写")] [StringLength(50, ErrorMessage = "用户名最大不能超过50个字符")] [Remote("GetUser", "Home", ErrorMessage = "该姓名已存在")] public string UserName { get; set; } /// <summary> /// 密码 /// </summary> [Required(ErrorMessage = "密码不能为空")] public string UserPwd { get; set; } /// <summary> /// 确认密码 /// </summary> public string ConfirmUserPwd { get; set; } /// <summary> /// 第三方绑定会员ID /// </summary> public string ThirdSiteUserId { get; set; } /// <summary> /// 真实姓名 /// </summary> public string TrueName { get; set; } /// <summary> /// 昵称 /// </summary> public string NickName { get; set; } /// <summary> /// 头像 /// </summary> public string UserAvatar { get; set; } /// <summary> /// 省 /// </summary> public string Province { get; set; } /// <summary> /// 市 /// </summary> public string City { get; set; } /// <summary> /// 区县 /// </summary> [Required(ErrorMessage="不能为空")] [System.ComponentModel.DataAnnotations.Compare("City")] public string County { get; set; } /// <summary> /// 地址 /// </summary> public string Address { get; set; } /// <summary> /// 邮编 /// </summary> public string Zip { get; set; } /// <summary> /// 电话 /// </summary> public string Tel { get; set; } /// <summary> /// 手机 /// </summary> [RegularExpression(@"^1[3|4|5|8][0-9]\d{8}$", ErrorMessage = "手机格式错误")] public string Mobile { get; set; } /// <summary> /// 邮箱 /// </summary> public string Email { get; set; } /// <summary> /// 性别 /// </summary> [Required(ErrorMessage="请选择性别")] public string Sex { get; set; } /// <summary> /// 出生日期 /// </summary> public Nullable<System.DateTime> Birthday { get; set; } /// <summary> /// 是否启用 /// </summary> public bool IsEnable { get; set; } public SelectList UserLevelList { get; set; } public IList<SelectListItem> ProvinceList { get; set; } }
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
