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

ASP.NET

JavaScript ASP.NET PHP编程正则表达式 AJAX相关 ASP编程 JSP编程编程10000问 CSS/HTML Flex 脚本加解密 web2.0 XML/RSS 网页编辑器相关技巧安全相关网页播放器 Dart Vue.js

上一篇: ASP.NET MVC5验证系列之服务端验... 下一篇:ASP.NET MVC4使用MongoDB制作相册...

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

发布时间：2022-04-16 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了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 }
      );
    }

运行项目：