資料驗證 ValidationSummary、ValidationMessageFor

 

ValidationSummary、ValidationMessageFor、ValidationMessage、

Validation、ValidationFor是用來產生HTML表單欄位驗證訊息的容器。

錯誤訊息是由Model Binding時Model Binder發現錯誤反應到頁面上。

MVC資料驗證框架具有前後端驗證能力。

因此常常伴隨著表單欄位存在。

 

一、ValidationMessageFor

例如：@Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })

說明：使用指定的訊息和 HTML 屬性，傳回指定運算式所表示之每一個資料欄位的驗證錯誤訊息 HTML 標記。

程式碼：

@model LoginOut.Models.RegisterViewModel
@{
    ViewBag.Title = "註冊";
}

<h2>@ViewBag.Title.</h2>

@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
    @Html.AntiForgeryToken()
    <h4>建立新的帳戶。</h4>
    <hr />
    <div class="form-group">
        @Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Password, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.PasswordFor(m => m.Password, new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.Password, "", new { @class = "text-danger" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.ConfirmPassword, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.PasswordFor(m => m.ConfirmPassword, new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.ConfirmPassword, "", new { @class = "text-danger" })
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" class="btn btn-default" value="註冊" />
        </div>
    </div>
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

呈現：

 

二、ValidationSummary 

例如：@Html.ValidationSummary("資料驗證結果型式1：", new { @class = "text-danger" })

說明：顯示摘要層級錯誤

程式碼：

@model LoginOut.Models.RegisterViewModel
@{
    ViewBag.Title = "註冊";
}

<h2>@ViewBag.Title.</h2>

@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
    @Html.AntiForgeryToken()
    <h4>建立新的帳戶。</h4>
    <hr />
    @Html.ValidationSummary("資料驗證結果型式1：", new { @class = "text-danger" })@*加入此程式碼*@
    <br />
    @Html.ValidationSummary(false,"資料驗證結果型式2：", new { @class = "text-danger" })@*加入此程式碼*@
    <br />
    @Html.ValidationSummary(true, "資料驗證結果型式3：", new { @class = "text-danger" })@*加入此程式碼*@
    <div class="form-group">
        @Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Password, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.PasswordFor(m => m.Password, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.ConfirmPassword, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.PasswordFor(m => m.ConfirmPassword, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" class="btn btn-default" value="註冊" />
        </div>
    </div>
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

呈現：當按下註冊案按鈕後

發現

 @Html.ValidationSummary("資料驗證結果型式1：", new { @class = "text-danger" })與

@Html.ValidationSummary(false,"資料驗證結果型式2：", new { @class = "text-danger" })

結果是一樣的

當excludePropertyErrors為true時則表示不會顯示模型層級錯誤，所以

@Html.ValidationSummary(true, "資料驗證結果型式3：", new { @class = "text-danger" })

Summary摘要層級錯誤則不會顯現出來

 

最後範例中黃色框框所 include 的 @Scripts.Render("~/bundles/jqueryval") 套件，

這其實是多餘的，他是用於前端驗證的套件，但在此範例中並不會用到。