MVC5 + EF6 + Bootstrap3 (16) 客戶端驗證

Slark.NET-博客園 http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-client-side-validation.html

系列教程：MVC5 + EF6 + Bootstrap3

上一節：MVC5 + EF6 + Bootstrap3 (15) 應用ModelState和Data Annotation做服務器端數據驗證

源碼下載：點我下載

 

本節內容比較簡單，在上節服務器端驗證的基礎上介紹客戶端驗證。

客戶端驗證的好處是不用向服務器提交代碼就能顯示出錯誤信息。反應更快，與用戶交互更流暢。

然而，其致命的弱點就是驗證腳本可以在客戶端被隨意修改。因此它是不可靠的。

所以我們這里介紹怎樣給單純的服務器端驗證加上客戶端驗證。

那么我們就基於上一節講的Data Annotation驗證添加客戶端驗證。點此查看。

首先，確認解決方案根目錄下的web.config文件中激活了客戶端驗證：

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

第3行表示激活了客戶端驗證。第4行表示激活Unobstrusive JavaScript。它代表着一種將Html代碼和JavasScript分離開的思想。總體來說就是用代碼分離的思想做客戶端驗證。

然后繼續使用上一節創建的Model和Controller。為了方便大家查看，這里貼出代碼，對代碼的具體解釋點此查看。

Models/DataAnnotationModel.cs

using System.ComponentModel.DataAnnotations;
namespace SlarkInc.Models
{
    public class DataAnnotationModel
    {
        [Required(ErrorMessage = "Name is required")]
        public string Name { get; set; }

        [Required(ErrorMessage = "Email is required")]
        [RegularExpression(@"^\s*([A-Za-z0-9_-]+(\.\w+)*@([\w-]+\.)+\w{2,3})\s*$", ErrorMessage = "Email is invalid")]
        public string Email { get; set; }
    }
}

Controllers/DataValidationController.cs

using System.Web.Mvc;
using SlarkInc.Models;
using System.Text.RegularExpressions;

namespace SlarkInc.Controllers
{
    public class DataValidationController : Controller
    {
        public ActionResult DataAnnotationAction()
        {
            return View();
        }

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

View代碼繼續沿用，不過需要添加客戶端驗證所需的js文件。

Views/DataValidation/DataAnnotationAction.cshtml

@model SlarkInc.Models.DataAnnotationModel
@{
    ViewBag.Title = "DataAnnotationAction";
}
<h2>Data Annotation Validation</h2>
@Html.ValidationSummary()
@using (Html.BeginForm())
{
    if (@ViewData.ModelState.IsValid && ViewBag.Name != null)
    {
        <b>
            Name : @ViewBag.Name
            <br />
            Email: @ViewBag.Email
        </b>
    }
    <fieldset>
        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.Email)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Email)
            @Html.ValidationMessageFor(model => model.Email)
        </div>
        <br />
        <input type="submit" value="Submit" />
    </fieldset>
}
@section Scripts
{
    @Scripts.Render("~/bundles/jqueryval")
}

第36-39行用來添加客戶端驗證所需的js文件。

這一段代碼會調用App_Start文件夾下的BundleConfig.cs文件。文件內容如下：

namespace SlarkInc
{
    public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include( 11                         "~/Scripts/jquery.validate*")); 12 
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/respond.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css"));
        }
    }
}

第10和11行的代碼會被調用。代碼會引入所有符合"~/Scripts/jquery.validate*"條件的js文件。

即以下紅色方框內文件：

按F5運行，輸入以下錯誤信息，可以看到如下驗證提示信息：

點提交按鈕時，頁面沒有刷新，證明是客戶端驗證。

右鍵點擊頁面，選擇查看源代碼。可以看到Scripts.Render("~/bundles/jqueryval")函數向頁面里加入了如下兩個js文件。

<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>

為什么不是之前截圖看到的5個？我推測這和web.config設置以及用的是debug或release編譯模式有關。

在頁面生成的兩個輸入框的代碼如下：

Name:

<div class="editor-field">
            <input class="text-box single-line" data-val="true" data-val-required="Name is required" id="Name" name="Name" type="text" value="" /　　　　　　　　>
            <span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>
        </div>

Email:

<div class="editor-field">
            <input class="text-box single-line" data-val="true" data-val-regex="Email is invalid" data-val-regex-pattern="^\s*([A-Za-z0-9_-]+(\.\　　　　　　　　w+)*@([\w-]+\.)+\w{2,3})\s*$" data-val-required="Email is required" id="Email" name="Email" type="text" value="" />
            <span class="field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span>
        </div>

可以看到驗證所需的信息都在html代碼里，而驗證的函數邏輯都在引入的validate的js文件里。兩部分完全分離，但是又配合得很好。

到此，我們的客戶端驗證就介紹完了。

后面會持續更新，敬請期待。

 

上一節：MVC5 + EF6 + Bootstrap3 (15) 應用ModelState和Data Annotation做服務器端數據驗證

作者：Slark.NET

出處：http://www.cnblogs.com/slark/

本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。如有問題或建議，請多多賜教，非常感謝。