天天看點

asp.net 用戶端驗證 前端頁面無效

問題:模型屬性上面增加了注釋,頁面上卻無法驗證。

原因:

1.  沒有加jquery驗證相關js檔案

2.  頁面上寫法不對

解決:

1. 在頁面中加載jquery.js、jquery.validate.js和jquery.validate.unobtrusive.js幾個檔案

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

2. 正确的寫法如下:

<div class="form-group">
     @Html.LabelFor(m => m.MailAddress, new { @class = "col-md-2 control-label" })
     <div class="col-sm-10">
           @Html.TextBoxFor(m => m.MailAddress, new { @class = "form-control", placeholder = "請輸入郵箱" })
           @Html.ValidationMessageFor(m => m.MailAddress, "", new { @class = "text-danger" })
     </div>
</div>
           

注意:文本框不能用<input>标簽寫,不然驗證不了,因為調用HtmlHelper<TModel>的擴充方法EditorForModel會生成與下面類似的HTML。

可以看到,對應着Model對象兩個屬性的<input>元素具有一個“data-val”屬性和一系列以“data-val-”為字首的屬性,前者表示是否需要對使用者輸入的值進行驗證,後者則代表相應的驗證規則。具體來說,去除“data-val-”字首後的屬性名稱對應着采用jQuery驗證時對應的驗證規則名稱。(例,和上面的)

5: <div class="editor-field">
   6:   <input class="text-box single-line" 
   7:          data-val            ="true" 
   8:          data-val-length     ="作為姓名字元串長度不能超過8!" 
   9:          data-val-length-max ="8" 
  10:          data-val-required   ="請輸入姓名!" 
  11:          id="Name" name="Name" type="text" value="" />
  12:   <span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>
  13: </div>
           

參考連結:

1. https://blog.csdn.net/qq121023/article/details/54912175

2. http://www.cnblogs.com/artech/archive/2012/06/18/client-validation-02.html