ASP.NET MVC结合jQuery插件进行数据验证
2009-02-14 15:22
851 查看
jQuery Validation是一个强大的数据验证插件,该插件支持“validation
rule”即验证规则,规则将对表单内的输入控件进行控制或约束,譬如“本项必填”,“本项不能少于n个字符”,或者“这不是一个有效的email地址”
等等。这些规则大多数和asp.net本身的验证控件类似。遗憾的是asp.net本身的验证控件不能在MVC框架下工作,因为服务器端控件受页面的
ViewState限制,而MVC框架是没有ViewState特性的……
一条规则有两种方式应用到输入框中:
1,声明,在输入框中设置class属性。
PLAIN
TEXT
HTML:
<input name="email"
id="email" maxlength="60"
class="required
email" type="text"/>
可以看到标记中的class属性被设为“required”和“email”,这表示该输入框是必填的和被约束为合法email字符串内容的的规则。这种多个规则用于一个区域的形式必须要由一个空格符分开。
2,为规则指定脚本。
PLAIN
TEXT
JavaScript:
<script
type="text/javascript">
$(document).ready(function(){
$("#form-sign-up").validate(
{
rules:
{
email:
{
required:
true,
email:
true
},
messages:
{
email:
{
required:
"Please provide an email",
email:
"Please provide a valid email"
} });
});
</script>
指定id为“form-sign-up”的表单容器里的id为“email”的输入框的规则,并且还设定了当验证用户输入失败时所显示的相应的提示信息。这些提示信息可以在脚本中的“messages”部分里进行自定义设置。提示信息是可选项,jQuery
Validation插件提供了一套预先定义的提示信息。如果想提高用户体验效果,建议设置更友好的提示信息。
最后还有一种更有趣更重要的规则方式就是“remote”即“远程规则”,也可以称其为“服务器端验证”(上面的验证都是在客户浏览器端完成)。验证处理在服务器端进行,常用于用户名是否存在之类验证,很重要。AJAX形式执行远程的验证处理,可以使用MVC的控制器方法。
PLAIN
TEXT
JavaScript:
<script
type="text/javascript">
$(document).ready(function(){
$("#form-sign-up").validate(
{
rules:
{
login:
{
required:
true,
remote:
'<%=Url.Action("IsLoginAvailable", "Accounts")
%>'
}
},
messages:
{
login:
{
required:
"Please provide an alias",
remote:
jQuery.format("{0} is already in
use")
}
} });
});
</script>
在服务器控制器端唯一的要求就是Json结果返回验证结果。在MVC框架中是很容易做到的:
PLAIN
TEXT
C#:
public JsonResult IsLoginAvailable(string
login)
{
JsonResult
result = new JsonResult();
if (login ==
"boho")
result.Data = false;
else
result.Data = true;
return result;
}
在上面的处理中,如果输入框输入的数据为"boho",验证失败,并且用户会看到一条错误消息“boho is already in use”
错误信息的样式:
PLAIN
TEXT
CSS:
label.error {
display: block;
color: red;
font-style: italic;
font-weight: normal;
}
input.error {
border: 2px solid red;
}
td.field input.error, td.field select.error, tr.errorRow td.field
input,tr.errorRow td.field select {
border: 2px solid red;
background-color:
#FFFFD5;
margin: 0px;
color: red;
}
在这可以下载示例代码 。
rule”即验证规则,规则将对表单内的输入控件进行控制或约束,譬如“本项必填”,“本项不能少于n个字符”,或者“这不是一个有效的email地址”
等等。这些规则大多数和asp.net本身的验证控件类似。遗憾的是asp.net本身的验证控件不能在MVC框架下工作,因为服务器端控件受页面的
ViewState限制,而MVC框架是没有ViewState特性的……
一条规则有两种方式应用到输入框中:
1,声明,在输入框中设置class属性。
PLAIN
TEXT
HTML:
<input name="email"
id="email" maxlength="60"
class="required
email" type="text"/>
可以看到标记中的class属性被设为“required”和“email”,这表示该输入框是必填的和被约束为合法email字符串内容的的规则。这种多个规则用于一个区域的形式必须要由一个空格符分开。
2,为规则指定脚本。
PLAIN
TEXT
JavaScript:
<script
type="text/javascript">
$(document).ready(function(){
$("#form-sign-up").validate(
{
rules:
{
email:
{
required:
true,
email:
true
},
messages:
{
email:
{
required:
"Please provide an email",
email:
"Please provide a valid email"
} });
});
</script>
指定id为“form-sign-up”的表单容器里的id为“email”的输入框的规则,并且还设定了当验证用户输入失败时所显示的相应的提示信息。这些提示信息可以在脚本中的“messages”部分里进行自定义设置。提示信息是可选项,jQuery
Validation插件提供了一套预先定义的提示信息。如果想提高用户体验效果,建议设置更友好的提示信息。
最后还有一种更有趣更重要的规则方式就是“remote”即“远程规则”,也可以称其为“服务器端验证”(上面的验证都是在客户浏览器端完成)。验证处理在服务器端进行,常用于用户名是否存在之类验证,很重要。AJAX形式执行远程的验证处理,可以使用MVC的控制器方法。
PLAIN
TEXT
JavaScript:
<script
type="text/javascript">
$(document).ready(function(){
$("#form-sign-up").validate(
{
rules:
{
login:
{
required:
true,
remote:
'<%=Url.Action("IsLoginAvailable", "Accounts")
%>'
}
},
messages:
{
login:
{
required:
"Please provide an alias",
remote:
jQuery.format("{0} is already in
use")
}
} });
});
</script>
在服务器控制器端唯一的要求就是Json结果返回验证结果。在MVC框架中是很容易做到的:
PLAIN
TEXT
C#:
public JsonResult IsLoginAvailable(string
login)
{
JsonResult
result = new JsonResult();
if (login ==
"boho")
result.Data = false;
else
result.Data = true;
return result;
}
在上面的处理中,如果输入框输入的数据为"boho",验证失败,并且用户会看到一条错误消息“boho is already in use”
错误信息的样式:
PLAIN
TEXT
CSS:
label.error {
display: block;
color: red;
font-style: italic;
font-weight: normal;
}
input.error {
border: 2px solid red;
}
td.field input.error, td.field select.error, tr.errorRow td.field
input,tr.errorRow td.field select {
border: 2px solid red;
background-color:
#FFFFD5;
margin: 0px;
color: red;
}
在这可以下载示例代码 。
相关文章推荐
- (转载)ASP.NET MVC结合jQuery插件进行数据验证
- ASP.NET MVC结合jQuery插件进行数据验证
- JQuery对ASP.NET MVC数据进行更新删除
- ASP.NET MVC 环境下CKeditor 的配置以及用jQuery进行数据存取操作
- asp.net mvc中很酷的jquery验证插件
- asp.net mvc中很酷的jquery验证插件
- ASP.NET MVC Preview 5 演示Demo #7 实现JQuery表单数据验证及JQuery操作Html元素
- JQuery插件中的treeview与asp.net mvc的结合使用实例(转)-附加自己的写法
- zTree -- jQuery 树插件(后台异步获取数据-asp.net mvc模式下)
- ASP.NET MVC 环境下CKeditor 的配置以及用jQuery进行数据存取操作
- ASP.NET MVC 结合EDMX 数据模型验证
- jQuery LigerUI 表格LigerGrid 结合 ASP.NET MVC 显示数据
- ASP.NET MVC Music Store教程(6):使用数据注释为模型进行验证
- ASP.NET MVC 环境下CKeditor 的配置以及用jQuery进行数据存取操作
- JQuery插件中的treeview与asp.net mvc的结合使用实例(转)-附加自己的写法
- JQuery插件中的treeview与asp.net mvc的结合使用实例(转)-附加自己的写法
- JQuery对ASP.NET MVC数据进行更新删除
- ASP.NET MVC 环境下CKeditor 的配置以及用jQuery进行数据存取操作
- ASP.NET MVC的客户端验证:jQuery验证在Model验证中的实现
- 在Asp.Net MVC中实现CompareValues标签对Model中的属性进行验证