[转载]使用 ExtJS 实现 ASP.NET MVC 2 客户端验证

baacloud免费翻墙vpn注册使用

[转载]使用 ExtJS 实现 ASP.NET MVC 2 客户端验证 – Beginor – 博客园.

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 上添加验证标记, 代码如下:

01 public class RegisterModel {
02
03 [Required(ErrorMessage = "用户名必须填写!")]
04 [DisplayName("用户名:")]
05 public string UserName {
06 get;
07 set;
08 }
09
10 [Required(ErrorMessage = "密码必须 填写!")]
11 [DisplayName("密码:")]
12 [DataType(DataType.Password)]
13 public string Password {
14 get;
15 set;
16 }
17
18 [Required(ErrorMessage = "邮箱必须 填写")]
19 [RegularExpression("", ErrorMessage = "邮件格式不正确!")]
20 [DisplayName("邮箱:")]
21 public string Email {
22 get;
23 set;
24 }
25
26 [Range(0, 100, ErrorMessage = " 年龄必须在1~100之间!")]
27 [DisplayName("年龄:")]
28 [DefaultValue(20)]
29 public int Age {
30 get;
31 set;
32 }
33
34 }

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

01 <!-- 先引入ExtJS -->
02 <link rel="Stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.1/resources/css/ext-all.css">
04 <script src="http://extjs.cachefly.net/ext-3.2.1/ext-all.js" type="text/JavaScript"></script>
05 <script src="/Assets/Scripts/Ext.ux.mvc.validation.js" type="text/JavaScript"></script>
06 <link href="/Assets/Site.css" rel="stylesheet" type="text/css">;
07
08 <!-- 下面开始表单 -->
09 <h2>ExtJS 实现 ASP.NET MVC 2 客户端验证</h2>
10 <% Html.EnableClientValidation(); %>;
11 <%= Html.ValidationSummary(true, "输入信息不完整,无法完成注册。") %>
12 <% using (Html.BeginForm()) { %>
13 <%= Html.EditorForModel() %>
14 <input value="注册" type="submit">
15 <input value="取消" type="reset">
16 <% } %>;

运行效果如下图所示:
2010-06-05_150039

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

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

01 [AttributeUsage(AttributeTargets.Property, AllowMultiple = false)]
02 public class CustomAttribute : ValidationAttribute {
03
04 public override bool IsValid(object value) {
05 var val = value as string;
06 if (string.IsNullOrEmpty(val)) {
07 return false;
08 }
09 return val.Equals("Hello,world!", StringComparison.OrdinalIgnoreCase);
10 }
11 }
12
13 public class CustomValidator : DataAnnotationsModelValidator<customattribute> {
14
15 public CustomValidator(ModelMetadata metadata, ControllerContext context, CustomAttribute attribute)
16 : base(metadata, context, attribute) {
17 }
18
19 public override IEnumerable<modelclientvalidationrule> GetClientValidationRules() {
20 return new[] {
21 new ModelClientValidationRule {
22 ErrorMessage = "输入: Hello,world!",
23 ValidationType = "custom"
24 }
25 };
26 }
27 }
28 </modelclientvalidationrule></customattribute>

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

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

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

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

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

5、添加扩展之后的运行效果如下图:
2010-06-05_150121

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

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏