MVC客户端验证的小示例

MVC客户端验证的小示例

 

配置客户端验证的可用性：

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

 
MVC的客户端的验证也利用了实体上的特性标签，如下：

public class Auction
{
 [Required]
 [StringLength(50,ErrorMessage = "Title cannot be longer than 50 characters")]
 public string Title { get; set; }
 
 [Required]
 public string Description { get; set; }

 [Range(1, 10000,ErrorMessage = "The auction's starting price must be at least 1")]
 public decimal StartPrice { get; set; }
 
 public decimal CurrentPrice { get; set; }
 public DateTime EndTime { get; set; }
}

 
被渲染出的View的代码如下：

<h2>Create Auction</h2>
@using (Html.BeginForm())
{
 @Html.ValidationSummary()
 <p>
  @Html.LabelFor(model => model.Title)
  @Html.EditorFor(model => model.Title)
  @Html.ValidationMessageFor(model => model.Title, "*")
 </p>
 <p>
  @Html.LabelFor(model => model.Description)
  @Html.EditorFor(model => model.Description)
  @Html.ValidationMessageFor(model => model.Description, "*")
 </p>
 <p>
  @Html.LabelFor(model => model.StartPrice)
  @Html.EditorFor(model => model.StartPrice)
  @Html.ValidationMessageFor(model => model.StartPrice)
 </p>
 <p>
  @Html.LabelFor(model => model.EndTime)
  @Html.EditorFor(model => model.EndTime)
  @Html.ValidationMessageFor(model => model.EndTime)
 </p>
 <p>
 <input type="submit" value="Create" />
 </p>
}

 
被渲染出的HTML的代码如下：

<form action="/Auctions/Create" method="post" novalidate="novalidate">
 <div class="validation-summary-errors" data-valmsg-summary="true">
  <ul>
   <li>The Description field is required.</li>
   <li>The Title field is required.</li>
   <li>Auction may not start in the past</li>
  </ul>
 </div>
 <p>
  <label for="Title">Title</label>
  <input class="input-validation-error"
    data-val="true"
    data-val-length="Title cannot be longer than 50 characters"
    data-val-length-max="50"
    data-val-required="The Title field is required."
    id="Title" name="Title" type="text" value="">
  <span class="field-validation-error"
    data-valmsg-for="Title"
    data-valmsg-replace="false">*</span>
  </p>
  <p>
   <label for="Description">Description</label>
   <input class="input-validation-error"
    data-val="true"
    data-val-required="The Description field is required."
    id="Description" name="Description" type="text" value="">
   <span class="field-validation-error"
    data-valmsg-for="Description"
    data-valmsg-replace="false">*</span>
  </p>
  <p>
   <label for="StartPrice">StartPrice</label>
   <input data-val="true"
    data-val-number="The field StartPrice must be a number."
    data-val-range="The auction's starting price must be at least 1"
    data-val-range-max="10000"
    data-val-range-min="1"
    data-val-required="The StartPrice field is required."
    id="StartPrice" name="StartPrice" type="text" value="0">
   <span class="field-validation-valid"
    data-valmsg-for="StartPrice"
    data-valmsg-replace="true"></span>
  </p>
  <p>
   <label for="EndTime">EndTime</label>
   <input data-val="true"
    data-val-date="The field EndTime must be a date."
    id="EndTime" name="EndTime" type="text" value="">
   <span class="field-validation-valid"
    data-valmsg-for="EndTime"
    data-valmsg-replace="true"></span>
  </p>
  <p>
   <input type="submit" value="Create">
  </p>
</form>

 

我们看见在最后生成的HTML代码中多出了很多属性，这时候我们引入两个js文件：
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")"type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"type="text/javascript"</script>

 

这两文件会中的代码会根据那些多出的这些属性知道：
哪些input是需要验证的
验证的规则是什么
错误信息是什么
出现错误时应该怎样处理
我们称这个验证方式为隐式验证。