zoukankan      html  css  js  c++  java
  • ASP.NET MVC轻教程 Step By Step 12——客户端验证

    前面两节使用的两种数据验证方法都是在服务器端进行的,也就是提交了表单,数据回传给服务器才能验证。这样会带来两个问题,一是用户体验不好,用户提交了表单之后才知道存在问题;二是会给服务器带来额外的压力。我们可以使用客户端验证来解决这两个问题。

    客户端验证一般使用Javascript脚本,JQuery.validate就是一个不错的JQuery验证组件,很多项目都会用它来实现客户端验证。

    Step 1. 添加脚本

    ASP.NET MVC对JQuery有很好的支持,实际上后者已经集成在前者里面了,新建一个MVC的项目模板就已经内置了JQuery、JQuery.validate。但是MesssageBoard是一个由空模板创建的项目,所以我们需要在项目中手动添加这些脚本文件。在项目中添加Scripts文件夹,并将下载好的JQuery、JQuery.validate和JQuery.validate.unobtrusive放置其中。

    下面将这些脚本依次加入Write视图,注意先后顺序。

    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <script src="~/Scripts/jquery-2.1.4.min.js"></script>
        <script src="~/Scripts/jquery.validate.min.js"></script>
        <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
        <title>Write</title>
    </head>
    <body>
        <h1>MVC留言板</h1>
        @using (Html.BeginForm("Write", "Home"))
        {
            @Html.LabelFor(m=>m.NickName,"昵称")
            @Html.TextBoxFor(m => m.NickName)
            @Html.ValidationMessageFor(m=>m.NickName)
            <br /><br />
            @Html.LabelFor(m => m.Content,"内容")
            @Html.TextAreaFor(m => m.Content,5,50,null)
            @Html.ValidationMessageFor(m=>m.Content)
            <br /><br />
            <input type="submit" value="提交" />
        }
    </body>
    </html>

    Step 2. 开启客户端验证

    在默认情况下ASP.NET MVC项目就已经开启客户端的验证了。打开Web.config文件,可以看到ClientValidationEnabled和UnobtrusiveJavaScriptEnabled这两项键值都为True,说明支持客户端验证。如下图所示。

    也可以为单个视图启用或禁用客户端验证,比如在Write视图里,我们可以设置HtmlHelper.ClientValidationEnabled = true来启用客户端验证。

    @model MessageBoard.Models.Message
    
    @{
        Layout = null;
        HtmlHelper.ClientValidationEnabled = true;
    }
    
    <!DOCTYPE html>
    .
    .
    .

    试一试,你就可以看到客户端验证的效果了。不过客户端验证有其局限性,如果用户浏览器不支持或关闭了Javascript的使用,客户端验证就会完全失效。所以要将客户端和服务器端结合使用,不能只依赖客户端验证。

  • 相关阅读:
    eureka流程图
    Feign和Ribbon的重试机制
    idea编译kafka 2.6 源码
    Feign的调用流程
    FeignClientFactoryBean创建动态代理
    Feign源码的入口
    Ribbon的检查服务
    Ribbon是怎么和Eureka整合的?
    Eureka过期
    backup: sqlHelper --cSharp
  • 原文地址:https://www.cnblogs.com/nivi3000/p/4979216.html
Copyright © 2011-2022 走看看