在 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 上添加验证标记， 代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
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 没有什么区别， 代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!-- 先引入ExtJS -->
<
link
rel="Stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.1/resources/css/ext-all.css">
<
link
href="/Assets/Site.css" rel="stylesheet" type="text/css">;
<!-- 下面开始表单 -->
<
h2
>ExtJS 实现 ASP.NET MVC 2 客户端验证</
h2
>
<% Html.EnableClientValidation(); %>;
<%= Html.ValidationSummary(true, "输入信息不完整，无法完成注册。") %>
<% using (Html.BeginForm()) { %>
<%= Html.EditorForModel() %>
<
input
value="注册" type="submit">
<
input
value="取消" type="reset">
<% } %>;
|
运行效果如下图所示：
如果要做扩展自定义验证的话，需要做完成下面两部分：
1、参考 msdn 文档，添加服务端验证扩展， 代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
[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<customattribute> {
public
CustomValidator(ModelMetadata metadata, ControllerContext context, CustomAttribute attribute)
:
base
(metadata, context, attribute) {
}
public
override
IEnumerable<modelclientvalidationrule> GetClientValidationRules() {
return
new
[] {
new
ModelClientValidationRule {
ErrorMessage =
"输入: Hello,world!"
,
ValidationType =
"custom"
}
};
}
}
</modelclientvalidationrule></customattribute>
|
2、添加对应的客户端验证实现，代码如下：
|
1
2
3
4
5
|
Ext.apply(Ext.ux.mvc.VTypes, {
custom:
function
(val, param) {
return
val.toLowerCase() ==
'hello,world!'
;
}
});
|
4、在 App_Start 注册该扩展，代码如下：
|
1
|
DataAnnotationsModelValidatorProvider.RegisterAdapter(
typeof
(CustomAttribute),
typeof
(CustomValidator));
|
5、添加扩展之后的运行效果如下图：
如果你工作中也用到了 ExtJS 和 ASP.NET MVC 2 的话,可以下载这个文件来尝试一下。
张志敏所有文章遵循创作共用版权协议，要求署名、非商业 、保持一致。在满足创作共用版权协议的基础上可以转载，但请以超链接形式注明出处。
本博客已经迁移到 GitHub ， 围观地址： http://beginor.github.io/
本文转自张志敏博客园博客，原文链接：http://www.cnblogs.com/beginor/archive/2010/06/05/1752268.html
，如需转载请自行联系原作者
