在 ASP.NET MVC 2 中, 客户端表单验证信息不再是直接调用微软自己提供的方法, 而是将客户端表单验证的元数据放到了一个变量 (window.mvcClientValidationMetadata) 之中, 为实现第三方的客户端验证提供了可能, 由于工作中大量的使用到了 ExtJS ,于是抽时间用 ExtJS 实现了 ASP.NET MVC 2 客户端验证机制,主要有如下特点:

  • 只依赖 Ext core 即可使用,不需要完整版本的 ExtJS, 当然,如果有完整版 ExtJS 的话, 还可以调用 Ext.form.VTypes 的表单验证方法;
  • 使用方法完全遵循 ASP.NET MVC 2 提供的客户端验证机制,实现了默认的 required 、regularExpression 、 number 、range 、stringLength 客户端验证函数;
  • 可以根据 ASP.NET MVC 2 提供的验证扩展机制进行相应的扩展。

使用方法如下:

1、在要进行验证的 Model 上添加验证标记, 代码如下:


public class RegisterModel {[Required(ErrorMessage = "用户名必须填写!")][DisplayName("用户名:")]public string UserName {get;set;}[Required(ErrorMessage = "密码必须填写!")][DisplayName("密码:")][DataType(DataType.Password)]public string Password {get;set;}[Required(ErrorMessage = "邮箱必须填写")][RegularExpression("", ErrorMessage = "邮件格式不正确!")][DisplayName("邮箱:")]public string Email {get;set;}[Range(0, 100, ErrorMessage = "年龄必须在1~100之间!")][DisplayName("年龄:")][DefaultValue(20)]public int Age {get;set;}}

2、在 View 中添加下面的代码,除了要使用 ExtJS 的脚本之外, 与普通的 View 没有什么区别, 代码如下:

;

ExtJS 实现 ASP.NET MVC 2 客户端验证

; ;

运行效果如下图所示:

如果要做扩展自定义验证的话,需要做完成下面两部分:

1、参考 msdn 文档,添加服务端验证扩展, 代码如下:


[AttributeUsage(AttributeTargets.Property, AllowMultiple = false)]
public class CustomAttribute : ValidationAttribute {public override bool IsValid(object value) {var val = value as string;if (string.IsNullOrEmpty(val)) {return false;}return val.Equals("Hello,world!", StringComparison.OrdinalIgnoreCase);}
}public class CustomValidator : DataAnnotationsModelValidator {public CustomValidator(ModelMetadata metadata, ControllerContext context, CustomAttribute attribute): base(metadata, context, attribute) {}public override IEnumerable GetClientValidationRules() {return new[] {new ModelClientValidationRule {ErrorMessage = "输入: Hello,world!",ValidationType = "custom"}};}
}

2、添加对应的客户端验证实现,代码如下:


Ext.apply(Ext.ux.mvc.VTypes, {custom: function(val, param) {return val.toLowerCase() == 'hello,world!';}
});

3、在 Model 上添加属性,使用扩展验证,代码如下:

4、在 App_Start 注册该扩展,代码如下:


DataAnnotationsModelValidatorProvider.RegisterAdapter(typeof(CustomAttribute), typeof(CustomValidator));

5、添加扩展之后的运行效果如下图:

如果你工作中也用到了 ExtJS 和 ASP.NET MVC 2 的话,可以下载这个文件来尝试一下。

使用 ExtJS 实现 ASP.NET MVC 2 客户端验证相关推荐

  1. ASP.NET MVC 2 模型验证

    2019独角兽企业重金招聘Python工程师标准>>> [原文地址]ASP.NET MVC 2: Model Validation  [原文发表日期] Friday, January ...

  2. mvc html validator,ASP.NET MVC实现Validation验证器扩展

    今天介绍在ASP.NET MVC实现Validation验证器扩展,通过使用Controller验证并不是最好的方法:验证过于分散,容易造成重复代码,不利于维护与扩展,因此本节将使用MVC默认绑定器( ...

  3. Asp.net MVC中表单验证

    Asp.net MVC中表单验证 Asp.net MVC中表单验证 在Asp.net MVC 中,View中我们仍然需要对提交的表单进行验证.通常验证分为客户端验证,服务端验证.  客户端验证,我们可 ...

  4. 微软项目技术结构思路 ExtJs/JQuery + Asp.net MVC + Wcf service + Entity Framework

    正文: 这一阵子在做一个项目, 客户要求使用ExtJs/ vs2008 sql server 2005, 也是好长时间没有去看新的技术和一些框架; 初步设计是准备使用 ExtJs + HTTPHand ...

  5. ASP.NET MVC数据标记验证

    如果我发布的文章里有错误请各路高手给指出. DataAnnotation提供了一个简单的方式,在应用中的Model和View 类中添加验证规则,在ASP.NET MVC中有自动的绑定和UI辅助方法验证 ...

  6. ASP.Net MVC从客户端中检测到有潜在危险的 Request.Form 值

    ASP.NET MVC4(Razor)从客户端中检测到有潜在危险的 Request.Form 值  "/"应用程序中的服务器错误. 从客户端(Content=" sdfd ...

  7. Asp.net MVC模型数据验证扩展ValidationAttribute

    在Asp.Mvc项目中有自带的一套完整的数据验证功能,客户端可以用HtmlHelper工具类,服务端可以用ModelState进行验证.而他们都需要System.ComponentModel.Data ...

  8. ASP.NET MVC AuthorizeAttribute OnAuthorization 验证跳转

    重写 AuthorizeAttribute 的 OnAuthorization 方法: using System.Web.Mvc;namespace Demo.Web.Common {public c ...

  9. ASP.NET MVC API 接口验证

    项目中有一个留言消息接口,接收其他系统的留言和展示留言,参考了网上的一些API验证方法,发现使用通用权限管理系统提供的验证方法最完美(http://www.cnblogs.com/jirigala/p ...

  10. How ASP.NET MVC Works?

    一.ASP.NET + MVC IIS与ASP.NET管道 MVC.MVP以及Model2[上篇] MVC.MVP以及Model2[下篇] ASP.NET MVC是如何运行的[1]: 建立在" ...

最新文章

  1. 领课网络在线教育系统开源项目
  2. 简单的JSP登录程序
  3. python基础教程教材-最好的Python入门教材是哪本?
  4. CentOS 8.0 今天已正式发布!一起看看有哪些新特性
  5. php mysql update 返回_php mysql_query增删改查(update delete insert)返回值类型
  6. nginx 配置SSL/HTTPS
  7. c语言实现二分法_C语言实现二分法求解方程在区间内的根
  8. rabbitmq 延迟队列_Delayed Message 插件实现 RabbitMQ 延迟队列
  9. 计算机网络——电子邮件
  10. .net 通过泛型取值
  11. Shrink space合并表的碎片
  12. 前天做了一个点击随机改变背景色的JS,请各位老师指导下:
  13. 听力技巧-真题代练及填空题
  14. Dreamweaver 8 jquery 代码提示
  15. win7 oracle 冷恢复
  16. 计算机名汉字 oracle,修改计算机名对ORACLE的影像
  17. android studio 2.2 preview 3,Android Studio 2.2 Preview 3 发布,优化图片支持
  18. 打造自己的Android源码学习环境之六:运行Android模拟器
  19. ZIP和RAR文件的不同
  20. 如何发送电子邮件到别人邮箱?

热门文章

  1. 库、dlopen、函数名都正确,dlsym出错了,怎么回事
  2. MACOS,应用签名后就崩溃?
  3. 2022 github新建账号技巧
  4. snap chrominu has install-snap change in progress
  5. xulrunner下载连接
  6. CMKY与RGB的转换
  7. 全网独家:LINUX登录桌面后,如何自动运行自己的应用程序
  8. windows单实例的办法
  9. ubuntu删除OpenCV
  10. OpenCV中,CV_FILLED(-1),其他值表示线宽