jquery.validate.unobtrusive.js插件作用

在 ASP.NET MVC 中启用 Unobtrusive JavaScript 功能,可以在运行时由服务器端根据Model中设置的验证规则,自动生成客户端验证js代码(结合jquery.validate)。这很好地解决了表单验证时一次代码,两次验证(客户端+服务器端)的问题。

使用它很简单,主要操作步骤如下:

1. 在web.config增加如下设置:

<appSettings>
    <add key="ClientValidationEnabled" value="true"/>
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appSettings>

2. 在NuGet中引用jquery.validate与jquery.validate.unobtrusive

3. 在页面中添加js引用:

<script type="text/javascript" src="/scripts/jquery.validate.min.js"></script>       
<script src="/scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>

4. 在model中添加验证规则,示例代码如下:

复制代码
public class SignupUser
{
    [Required(ErrorMessageResourceName = "DefaultRequireErrorMsg", 
        ErrorMessageResourceType = typeof(Resources))]
    [DataType(DataType.EmailAddress)]
    public string Email { get; set; }
}
复制代码

5. 在页面中添加表单生成代码,比如:

复制代码
@using(Html.BeginForm())
{   
    @Html.LabelFor(m=>m.Email)
    @Html.TextBoxFor(m=>m.Email)
    @Html.ValidationMessageFor(m=>m.Email)           
}
复制代码

 

Unobtrusive JavaScript 的好处显而易见,但是如何在MVC3使用Unobtrusive JavaScript呢?

 

1、引用相应的Javascript文件

1
2
3
4
< script  src="@Url.Content("~/Scripts/jquery-1.4.1.min.js")" type="text/javascript"></ script >
< script  src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></ script >
< script  src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></ script >
< script  src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></ script >

 

2、开启 Unobtrusive JavaScript

MVC3中的Web.Config文件中默认多了两个配置项

image

这里是一个全局设置,你可以打开或者关闭。

 

另外,你也可以在任何一个 Action 或 Controller 中执行以下代码,灵活地进行控制,来处理一些特殊的 Action 或 Controller。

1
2
HtmlHelper.ClientValidationEnabled = true ;
HtmlHelper.UnobtrusiveJavaScriptEnabled = true ;

 

链接:http://www.cnblogs.com/dudu/archive/2012/04/27/jquery_validate_unobtrusive_focusout_focusin.html

    http://www.cnblogs.com/dozer/archive/2010/11/11/Unobtrusive-JavaScript-in-ASP-NET-MVC-3.html

转载于:https://www.cnblogs.com/lucybloguniquecom/p/5985088.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值