zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    【原】Sql2005 实现递归
    asp.net core api路由及多语言切换的实现
    一条语句实现查询各类别前10条记录
    【转】javascript操作cookies 以及 正确使用cookies的属性
    php 文件POST上传的原理及实现
    css3对background的调整与增强
    浅议javascript 中继承模式 (javascript高级程序设计)
    递归和递推:javascript求斐波那契数列的尾递归方法(转载)
    python中xrange和range的异同
    [译] JavaScript核心指南(JavaScript Core) 【转】
  • 原文地址:https://www.cnblogs.com/lucybloguniquecom/p/5985088.html
Copyright © 2011-2022 走看看