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)显示属性的数据注解的错误消息;

  • 相关阅读:
    light oj 1105 规律
    light oj 1071 dp(吃金币升级版)
    light oj 1084 线性dp
    light oj 1079 01背包
    light oj 1068 数位dp
    light oj 1219 树上贪心
    light oj 1057 状压dp TSP
    light oj 1037 状压dp
    矩阵快速幂3 k*n铺方格
    矩阵快速幂2 3*n铺方格
  • 原文地址:https://www.cnblogs.com/Alex80/p/7764134.html
Copyright © 2011-2022 走看看