快捷導(dǎo)航

ASP.NET MVC5驗(yàn)證系列之客戶端驗(yàn)證

更新時(shí)間：2016年07月21日 09:16:34 作者：灰太狼的夢(mèng)想

這篇文章主要為大家詳細(xì)介紹了ASP.NET MVC5驗(yàn)證系列之客戶端驗(yàn)證，感興趣的小伙伴們可以參考一下

前面學(xué)習(xí)了，服務(wù)端驗(yàn)證，這篇文章中，我們接著學(xué)習(xí)客戶端驗(yàn)證，客戶端的驗(yàn)證，使用Jquery和Jquery插件來實(shí)現(xiàn)【jquery.validate.min.js and jquery.validate.unobtrusive.min.js) 】

在服務(wù)端驗(yàn)證中，頁(yè)面必須要提交到服務(wù)器，進(jìn)行驗(yàn)證，如果數(shù)據(jù)驗(yàn)證不通過，服務(wù)器端就會(huì)發(fā)送一個(gè)響應(yīng)到客戶端，然后客戶端根據(jù)相應(yīng)的信息，進(jìn)行處理；而客戶端驗(yàn)證則不同，用戶輸入的數(shù)據(jù)，只要一提交，客戶端就會(huì)進(jìn)行先驗(yàn)證，如果不通過就報(bào)錯(cuò)，不會(huì)提交到服務(wù)器進(jìn)行驗(yàn)證，如果通過了，才會(huì)把請(qǐng)求傳到服務(wù)器端。

如果你是使用VS2012以上的版本，那么會(huì)自帶的啟用了客戶端驗(yàn)證的：【當(dāng)然你也可以手動(dòng)添加下面的配置?！?br />

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

我們還是之前的項(xiàng)目：

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為必填項(xiàng)")]
    public string Name { get; set; }

    [Required(ErrorMessage="電子郵件必須")]
    [EmailAddress(ErrorMessage="電子郵件格式不對(duì)")]
    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();

    }

不同的是，這里，我添加視圖，不一樣：

注意這里一定要勾選引用腳本庫(kù)，也就是引入Jquery和Jquery插件，這樣才能進(jìn)行客戶端驗(yàn)證：
修改一下默認(rèn)路由：

 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 }
      );
    }

運(yùn)行項(xiàng)目：