失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > 使用 ExtJS 实现 ASP.NET MVC 2 客户端验证

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

时间:2021-04-13 05:26:22

相关推荐

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

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

只依赖 Ext core 即可使用,不需要完整版本的 ExtJS, 当然,如果有完整版 ExtJS 的话, 还可以调用 Ext.form.VTypes 的表单验证方法;使用方法完全遵循 MVC 2 提供的客户端验证机制,实现了默认的 required 、regularExpression 、 number 、range 、stringLength 客户端验证函数;可以根据 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 实现 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 和 MVC 2 的话,可以下载这个文件来尝试一下。

如果觉得《使用 ExtJS 实现 ASP.NET MVC 2 客户端验证》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。