zoukankan      html  css  js  c++  java
  • mvc中服务器端、客户端属性验证

    mvc中使用表单进行数据提交时,数据验证分为服务器端验证和客户端验证;

    我们可以通过使用HtmlHelper中的方法及在页面中引用js库对Model的属性的数据注解(System.ComponentModel.DataAnnotations命名空间下的一组类)进行解析,实现前端、后端的数据验证;

    HtmlHelper、数据注解在其他文章中再详细介绍,本文主要介绍如何使数据验证发生作用。

    下面分别介绍两种验证方式:

    一、服务器端验证

    要实现服务器端的验证非常简单,只需要满足下面三个条件:

    ①有数据注解

    ②页面部分使用HtmlHelper生成各种表单元素

    使用这些html标签的时候,需要引用一下mvc工程中的css文件:

    <link href="~/Content/Site.css" rel="stylesheet" />

    ③在后端代码中指明需要验证

    但是只有服务器端的验证不能满足我们,因为每一次的错误数据都会提交到服务器,不仅影响了性能,用户体验也差强人意。

    二、客户端验证

    客户端验证是通过jquery validate插件进行数据验证的,它需要有jquery的支持,因此在引用它之前必须引用jquery文件。

    jquery validate是需要在js中编写相关代码(如下图),才能实现数据验证的;

    但这样子也是挺麻烦的,我们在属性写的数据注解岂不是没什么卵用了,不用担心,只要我们引用一下mvc工程中的 jquery.validate.unobtrusive.js 就可以啦。

    利用mvcHtmlHelper中类似Html.EditorFor(m => m.Name)这样的语法,生成的代码如下:

    <input class="text-box single-line" data-val="true" data-val-required="请输入用户名!" id="Name" name="Name" type="text" value="">

    这样子,引用的js库就可以解析以data-val-为前缀的属性用来设置验证规则了。data-val="true"表示对用户输入的值进行验证。

    如果上面的js库你都引用了,但客户端的验证还是没有起效,那就检查一下配置文件吧。在配置文件中,有两个选项是需要配置为true的,建立mvc应用程序的时候,默认是已经添加了的。

    第一行表示启用客户端验证;

    第二行表示启用unobtrusive相关的js验证,在使用AjaxHelper,引用jquery.unobtrusive-ajax.js时,也需要该配置为true

    综上所述,客户端的验证需要满足以下几个条件:

    ①有数据注解

    ②页面部分使用HtmlHelper生成各种表单元素

    ③引用相关js文件,如下图:

    ④配置web.config(默认存在)

     

    三、总结

    在实际开发中,基本都是客户端验证+服务器端验证一起使用的;

    也有的验证可能还是需要在js中实现,那么在进行后端验证时,就不能只以ModelState.IsValid为参考了,还需要写额外代码验证;如果有错误的时候,可以使用ModelState.AddModelError("key", "errorMesaage");//第一个参数是key,第二个参数是要显示的错误消息

    在页面中展示后台的错误消息的时候,有两种方式:

    Html.ValidationSummary(true)

    ValidationSummary有几种重载形式:

    重载形式

    说明

    Html.ValidationSummary() 

    汇总显示所有的验证错误

    Html.ValidationSummary(bool)

    如果bool参数=true,只显示Model层次的错误,否则所有的验证错误都显示

    Html.ValidationSummary(string) 

    在所有错误消息之前再显示string给出的字符串

    Html.ValidationSummary(bool, string) 

    同Html.ValidationSummary(bool),只是在错误消息前多显示string给出的字符串

     

    在页面数据提交到后台时,表明属性的数据注解验证已经通过了,因此前端显示错误消息的时候只会显示 ModelState.AddModelError()方法中的错误消息;

    在页面中会生成如下图所示的div

    ValidationSummary方法会展示所有的错误消息,而不会根据key值显示特定的消息;主要用来汇总显示从后台返回的错误消息列表。

    ②Html.ValidationMessage(key)

    该方法会根据ModelState.AddModelError("key", "errorMesaage")里的key值显示对应的错误消息;

    它在前端生成的是一个span标签;

    不过通常不会使用该方法,而是使用Html.ValidationMessageFor(c => c.Name)显示属性的数据注解的错误消息;

  • 相关阅读:
    [CSS] prefers-reduced-motion
    [VSCode] Adding Custom Syntax Highlighting to a Theme in VSCode
    Subversion/Git/ReviewBoard工作流程
    oracle hints
    Node.js学习(10)----文件系统fs
    网络子系统41_inet_peer平衡二叉树的删除
    由链表初始化看C语言的二级指针
    挣值管理不是搞数字游戏(4)——让挣值管理实用!
    关于数据库一致改关闭下redo日志文件丢失的处理办法的总结
    Android 操作系统的内存回收机制
  • 原文地址:https://www.cnblogs.com/Alex80/p/7764134.html
Copyright © 2011-2022 走看看