ASP.NET MVC5验证系列之客户端验证

前面学习了，服务端验证，这篇文章中，我们接着学习客户端验证，客户端的验证，使用Jquery和Jquery插件来实现【jquery.validate.min.js and jquery.validate.unobtrusive.min.js) 】

在服务端验证中，页面必须要提交到服务器，进行验证，如果数据验证不通过，服务器端就会发送一个响应到客户端，然后客户端根据相应的信息，进行处理；而客户端验证则不同，用户输入的数据，只要一提交，客户端就会进行先验证，如果不通过就报错，不会提交到服务器进行验证，如果通过了，才会把请求传到服务器端。

如果你是使用VS2012以上的版本，那么会自带的启用了客户端验证的：【当然你也可以手动添加下面的配置。】

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

我们还是之前的项目：

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;

namespace Server_Side_Validation_IN_MVC.Models
{
  public class StudentServer
  {
    [Required(ErrorMessage="Name为必填项")]
    public string Name { get; set; }

    [Required(ErrorMessage="电子邮件必须")]
    [EmailAddress(ErrorMessage="电子邮件格式不对")]
    public string Email { get; set; }
  }
}

public ActionResult SeverSideIndex()
    {
      return View();
    }

    [HttpPost]
    public ActionResult SeverSideIndex(StudentServer model)
    {
      if (ModelState.IsValid)
      {
        ViewBag.Name = model.Name;
        ViewBag.Email = model.Email;
      }
      return View();

    }

不同的是，这里，我添加视图，不一样：

注意这里一定要勾选引用脚本库，也就是引入Jquery和Jquery插件，这样才能进行客户端验证：
修改一下默认路由：

 public static void RegisterRoutes(RouteCollection routes)
    {
      routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

      routes.MapRoute(
        name: "Default",
        url: "{controller}/{action}/{id}",
        defaults: new { controller = "Student", action = "SeverSideIndex", id = UrlParameter.Optional }
      );
    }

运行项目：

我们在控制器的POST方法中添加一个断点

直接点击按钮：没有调用POST方法，直接在客户端验证了数据的合法性。

输入合法的数据：

断点触发了，也就是说，在客户端验证通过之后，才会提交到服务器进行进一步处理。

好了，这就是客户端验证，比较简单。但注意要引入Jquery插件

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • ASP.NET MVC5使用MiniProfiler监控MVC性能

    ASP.NET MVC5使用MiniProfiler监控MVC性能

    MiniProfiler ,一个简单而有效的迷你剖析器,可以有效的实时监控页面.通过直接引用.Ajax.Iframe形式访问的其它页面进行监控,监控内容包括数据库内容,并可以显示数据库访问的SQL. 1.安装 首先新建一个 asp.net mvc 项目 右键项目,管理NuGet程序包. 安装 MiniProfiler.Mvc4和MiniProfiler ps:MiniProfiler.MVC4的NuGet包(该MVC4包支持MVC5) 或者也可以打开程序包管理控制台 输入命令进行安装 Insta

  • 初识ASP.NET Mvc5+EF7的奇妙之旅

    初识ASP.NET Mvc5+EF7的奇妙之旅

    话说今年微软是很给力的,Win10算是吸引了大众的眼球了,而最新的.NET5框架更是OK. 最新的.NET5进行了开源,同时利用NuGet以及Node和Bower进行了跨平台化:这意味这可以直接在Mac或者Linux上使用.NET进行开发. 而最新的Mvc5和EF框架也算是进行了换脸了,跟之前Mvc4的项目都不一样,如果进行移植除了核心代码可以拷贝过来,其他的统统要重新来过. 最近准备改版一下网站,所以尝试了一把最新的框架:当然由于现在还是预览版所以改动什么的都超大,所以也走了不少弯路:特在此记

  • ASP.NET MVC5验证系列之Remote Validation

    ASP.NET MVC5验证系列之Remote Validation

    大多数的开发者,可能会遇到这样的情况:当我们在创建用户之前,有必要去检查是否数据库中已经存在相同名字的用户.换句话说就是,我们要确保程序中,只有一个唯一的用户名,不能有重复的.相信大多数人都有不同的解决方法,但是ASP.NET MVC中,为我们提供了一个特性,就是Remote Validation,用它可以解决类似这样的问题. Remote Validation调用了一个Ajax请求,可以是GET或者POST方式,接着调用方法,这个方法,至少要有一个参数,并且方法的返回类型是Json格式的.[M

  • ASP.NET MVC5验证系列之客户端验证

    ASP.NET MVC5验证系列之客户端验证

    前面学习了,服务端验证,这篇文章中,我们接着学习客户端验证,客户端的验证,使用Jquery和Jquery插件来实现[jquery.validate.min.js and jquery.validate.unobtrusive.min.js) ] 在服务端验证中,页面必须要提交到服务器,进行验证,如果数据验证不通过,服务器端就会发送一个响应到客户端,然后客户端根据相应的信息,进行处理:而客户端验证则不同,用户输入的数据,只要一提交,客户端就会进行先验证,如果不通过就报错,不会提交到服务器进行验证,

  • ASP.NET MVC5验证系列之Fluent Validation

    ASP.NET MVC5验证系列之Fluent Validation

    前面两篇文章学习到了,服务端验证,和客户端的验证,但大家有没有发现,这两种验证各自都有弊端,服务器端的验证,验证的逻辑和代码的逻辑混合在一起了,如果代码量很大的话,以后维护扩展起来,就不是很方便.而客户端的验证,必须要启用客户端验证,也就是在配置文件中配置相应的节点,并且还要引入Jquery插件.如果人为的在浏览器上,禁用了js脚本,那么客户端验证就不起作用了,所以在这里,我将继续学习另外一个验证,也就是Fluent Validation. Fluent Validation是一个开源的.NET

  • ASP.NET MVC5添加验证（4）

    ASP.NET MVC5添加验证（4）

    有时候我们网站需要添加验证,这一节我们演示下怎样使用ASP.NET MVC5添加验证. 1.在Model类里面添加验证,代码如下: public class Movie { public int ID { get; set; } [StringLength(60,MinimumLength=3,ErrorMessage="主题的长度必须在3到60个字符")] public string Title { get; set; } [Display(Name="Release Da

  • Asp.Mvc 2.0用户客户端验证实例讲解（3）

    Asp.Mvc 2.0用户客户端验证实例讲解（3）

    今天给大家讲解下ASP.NET mvc的客户端验证.通常情况下,我们在页面中对输入的内容多要进行客户端验证,客户端验证一般使用JS进行,这里咱们讲解下使用jquery.validate插件进行客户端验证. 首先咱们看下注册页面的验证效果 以上验证主要包括 1.用户名不能为空 2.密码不能为空,密码长度不能小于5位数 3.确认密码不能为空,确认密码长度不能小于5位,确认密码必须和密码文本框输入的一致 4.邮箱格式必须正确. 以下是使用jquery.validate插件进行验证的代码 [html]

  • ASP.NET MVC下的四种验证编程方式[续篇]

    在<ASP.NET MVC的四种验证编程方式>一文中我们介绍了ASP.NET MVC支持的四种服务端验证的编程方式("手工验证"."标注ValidationAttribute特性"."让数据类型实现IValidatableObject或者IDataErrorInfo"),那么在ASP.NET MVC框架内部是如何提供针对这四种不同编程方式的支持的呢?接下来我们就来聊聊这背后的故事. 一.ModelValidator与ModelVali

  • 使用jQuery.Validate进行客户端验证（初级篇） 不使用微软验证控件的理由

    使用jQuery.Validate进行客户端验证（初级篇） 不使用微软验证控件的理由

    主要理由有以下几点: 1.拖控件太麻烦,这个是微软控件的常用方式,你要使用一个控件你得从工具栏中拖到页面里(当然你也可以不拖手写). 2.必须指定验证对象,验证控件与其他textbox,dropdownlist控件不同的是它是验证其他控件的输入是否有效的,所以必须指定所验证的对象. 3.影响整个页面美观,像一些管理系统总是需要进行大量的用户输入验证,所以就可能导致一个页面上有几十个验证控件严重影响了原来页面里的东西,看起来十分不舒服. 4.ajax验证不方便,现在的系统越来越注重客户的用户体验,

  • ASP.NET Core WebApi中使用FluentValidation验证数据模型的方法

    介绍 验证用户输入是一个Web应用中的基本功能.对于生产系统,开发人员通常需要花费大量时间,编写大量的代码来完成这一功能.如果我们使用FluentValidation构建ASP.NET Core Web API,输入验证的任务将比以前容易的多. FluentValidation是一个非常流行的构建强类型验证规则的.NET库. 配置项目 第一步:下载FluentValidation 我们可以使用Nuget下载最新的 FluentValidation 库 PM> Install-Package Fl

  • ASP.NET没有魔法_ASP.NET MVC 模型验证方法

    在前面的文章中介绍了用户的注册及登录功能,在注册用户时可以通过代码的形式限制用户名及密码的格式,如果不符合要求那么就无法完成操作,如下图: 该功能的原理是Identity基于的Entity Framework组件在添加用户之前对用户提交数据进行校验后给出的错误信息. 数据校验功能在每一个软件系统中都是非常必要的,为了避免用户输入无效或非法数据导致的系统错误,需要在数据进行处理或持久化之前对其进行验证确保数据的正确.有效性. 本文将从以下几点来介绍ASP.NET MVC中的模型验证机制: ● 输入

  • ASP.NET Core 6.0 基于模型验证的数据验证功能

    目录 1 前言 1.1 数据验证的场景 1.2 本文的脉络 2 模型验证 2.1 介绍 2.2 基本使用 (1)自定义模型 (2)控制器代码 (3)测试 2.3 内置特性 3 自定义数据验证 3.1 介绍 3.2 前置准备 3.3 方案1:替换工厂 3.4 方案2:自定义过滤器 (1)自定义过滤器 (2)禁用默认过滤器 (3)启用自定义过滤器 3.5 测试 3.6 总结 4 源码解读 4.1 基本介绍 4.2 MvcServiceCollectionExtensions 4.3 ApiBehav

随机推荐