[转载]前端基于easyui的mvc扩展 – ahl5esoft – 博客园.
背景
由于MVC的前端是基于JQuery.validate和JQuery.validate.unobtrusive来实现的,但是当我们要使用其他的ui组件且组件本身就带有完整的验证功能的话,那么要让它们配合起来是有些麻烦的,比如:easyui。
介绍
MVC主要提供了一下几个验证特性来支撑前端的验证:
- CustomValidationAttribute:指定一个用于验证目标成员的验证类型和验证方法。
- DataTypeAttribute:指定要与数据字段关联的附加类型的名称。
- RangeAttribute:用于验证数值字段的值是否在指定的范围之内。
- RegularExpressionAttribute:用于验证字符串字段的格式是否与指定的正则表达式相匹配。
- RequiredAttribute:用于验证必需数据字段。
- StringLengthAttribute:用于验证目标字段的字符串长度是否在指定的范围之内。
- CompareAttribute:用于验证目标字段的值是否与另一个字段值一致,在用户注册场景中可以用于确认两次输入密码的一致性。
- RemoteAttribute:提供使用 JQuery 验证插件远程验证程序的特性。
以上大部分来自System.ComponentModel.DataAnnotations.dll,最后2个是来自System.Web.Mvc.dll
而easyui则是基于validatebox可自定义验证规则以及派生出datebox、numberbox、combobox等控件,来实现form表单输入控件的一套完成的验证体系(详情可参考:www.jeasyui.com),easyui的验证代码如下:
<inputclass="easyui-validatebox validatebox-text"name="Name"required="true"missingmessage="用户名不能为空!"validtype="regular['^\\w+$', '用户名格式不正确!']"value="admin"type="text">
实现
了解了以上的2方提供的验证支持,那么我们就可以将mvc提供的验证解析为支持easyui验证的前端html代码了,根据以上的资料我们可以发现以下几个可直接转换的规则,实现代码大致如下:
var attribute = validationAttrs.FirstOrDefault(attr => attr isRequiredAttribute);if(attribute !=null){ tag.AddAttribute("required","true"); tag.AddAttribute("missingMessage", attribute.ErrorMessage);} attribute = validationAttrs.FirstOrDefault(attr =>!(attr isRequiredAttribute));if(attribute ==null)return;if(attribute isStringLengthAttribute){var stringLengthAttr = attribute asStringLengthAttribute; tag.AddAttribute("invalidMessage", stringLengthAttr.ErrorMessage); tag.AddAttribute("validType","length[{0}, {1}]", stringLengthAttr.MinimumLength, stringLengthAttr.MaximumLength);}elseif(attribute isRegularExpressionAttribute){var regularAttr = attribute asRegularExpressionAttribute; tag.AddAttribute("validType","regular['{0}', '{1}']", regularAttr.Pattern.Replace("\\","\\\\"), regularAttr.ErrorMessage);}elseif(attribute isRangeAttribute){var rangeAttr = attribute asRangeAttribute; tag.AddAttribute("validType","range[{0}, {1}, '{2}']", rangeAttr.Minimum, rangeAttr.Maximum, rangeAttr.ErrorMessage);}elseif(attribute isCompareAttribute){var compareAttr = attribute asCompareAttribute; tag.AddAttribute("validType","eq['[name={0}]', '{1}']", compareAttr.OtherProperty, compareAttr.ErrorMessage);}
以上代码中把RequiredAttribute和其他的验证规则区分开来 是因为RequiredAttribute会生成独立的required=”true”,而其他的验证规则都是公用validType属性的,至于js验 证规则内的regular、range、eq的验证规则并不是easyui内部提供的,而是额外进行扩展的,js代码如下:
$.extend($.fn.validatebox.defaults.rules,{ eq:{ validator:function(value, param){this.message = param[1];return value == $(param[0]).val();}}, range:{ validator:function(value, param){this.message = param[2];return value >= param[0]&& value <= param[1];}}, regular:{ validator:function(value, param){this.message = param[1];var reg =newRegExp(param[0]);return reg.test(value);}}});
有了以上这些生成规则以后,我们就可以通过扩展HtmlHelper<TModel>来实现类似@Html.EditorFor(model => model.Name)这样的调用了,大致代码如下(这里以validatebox为例):
publicstaticMvcHtmlStringValidateText(thisHtmlHelper htmlHelper,Expression<Func<TModel,object>> expression){ModelMetadata modelMetadatum =ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);PropertyInfo property =typeof(TModel).GetProperty(modelMetadatum.PropertyName);TagBuilder tag =newTagBuilder("input");ValidationAttribute[] validationAttrs;if(property.TryGetAttributes(out validationAttrs)){//请阅读转换规则代码}returnMvcHtmlString.Create(tag.ToString());}
有了以上基础代码之后,我们就可以使用@Html.ValidateText(m => m.Name)来创建基于easyui的验证控件了。
效果
//类:publicclassAccountView{privatestring m_Name =null;[Required(ErrorMessage="用户名不能为空!")][RegularExpression(@"^\w+$",ErrorMessage="用户名格式不正确!")][DisplayName("用户名:")]publicstringName{get{return m_Name;}set{ m_Name = value;}}}//页面:@Html.LabelFor(m => m.Name)@Html.ValidateText(m => m.Name)//生成的内容为顶部easyui html示例代码
正确:
必填提示:
验证失败:
结尾
以上便是今天所有内容了,后面还有其他的扩展功能,敬请期待,谢谢各位!