JQuery Validation
出自ProgWiki
jQuery Validation，是一種用戶端的表單欄位驗證的方法。並不限於只能用在ASP.NET MVC3上。有3種提示訊息顯示方式。
- 提示訊息列表
- 輸入欄位的後方顯示提示訊息
- 仿ToolTip顯示的提示訊息（需使用下方的「NuGet程式包-改良ASP.NET MVC驗證訊息顯示」套件）
目錄 |
技術來源
- jQuery
- jQuery plugin: Validation
- 使用jQuery.validate.unobtrusive.js
- Unobtrusive Client Validation in ASP.NET MVC 3
- NuGet程式包-改良ASP.NET MVC驗證訊息顯示
應用
載入套件
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.6.4.js" type="text/javascript"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.js" type="text/javascript"></script> <script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.js" type="text/javascript"></script> <style type="text/css"> .input-validation-error { border: 1px solid #ff0000 } .input-validation-valid { border: 1px solid #00ff00 } .field-validation-error { color: #ff0000 } .field-validation-valid { display: none } .validation-summary-errors { font-weight: bold; color: #ff0000 } .validation-summary-valid { display: none } </style>
使用範例
- 必填欄位
data-val="true" data-val-required="不可空白"
- 數字限定1
data-val="true" data-val-digits="只能輸入數字"
- 數字限定2
data-val="true" data-val-number="必須為有效數字"
- 副檔名限定
data-val="true" data-val-accept="檔名須為.jpg、.gif或.png" data-val-accept-exts="jpg|gif|png"
- 正規化篩選
data-val="true" data-val-regex="車牌格式須為999-999" data-val-regex-pattern="[0-9A-Z]{3}-[0-9A-Z]{3}"
- 日期限定
data-val="true" data-val-date="必須為日期"
- Email限定
data-val="true" data-val-email="必須為Email"
- Url限定
data-val="true" data-val-url="必須為有效網址"
- 欄位長度範圍限定
data-val="true" data-val-length="長度須介於4到8之間" data-val-length-min="4" data-val-length-max="8"
- 欄位值範圍限定
data-val="true" data-val-range="須介於10到100" data-val-range-min="10" data-val-range-max="100"
- 欄位值等同限定
data-val="true" data-val-equalto="必須與上方欄位內容相同" data-val-equalto-other="欄位ID"
與ASP.NET的FormView整合使用
- 例如在FormView之中
<asp:TextBox ID="TextBoxCardNo" runat="server" Text='<%# Bind("CardNo") %>' data-val="true" data-val-required="必填欄位,不可空白" />
- 在Server端如果需要再驗證的話，另外自己做驗證（未完）
- 因為不論是 FormView 的 InsertItem(true) 還是 UpdateItem(true) 都無法在Server端進行資料Insert或Update之前正確的觸發這種表單驗證
- 因為它們其實是在Server端去跑 this.Page.Validate("") ，因此在用戶端的驗證機制無法直接在Server端上使用
using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Text; using System.Text.RegularExpressions; /// <summary> /// FormViewHelper 的摘要描述 /// </summary> public class FormViewHelper { public FormViewHelper() { // // TODO: 在此加入建構函式的程式碼 // } //欄位驗證用 public static bool ClientValidation(FormView FormView1) { if ((FormView1.CurrentMode == FormViewMode.Insert) || (FormView1.CurrentMode == FormViewMode.Edit)) { foreach (Control objControl in FormView1.Row.Controls[0].Controls) { string strType = objControl.GetType().Name; switch (strType) { case "TextBox": { TextBox TextBox1 = objControl as TextBox; string DataVal = TextBox1.Attributes["data-val"]; if ((DataVal != null) && (DataVal == "true")) { //data-val="true" data-val-required="必填欄位,不可空白" if (TextBox1.Attributes["data-val-required"] != null) { if (string.IsNullOrWhiteSpace(TextBox1.Text)) return false; } //data-val="true" data-val-digits="只能輸入數字" if (TextBox1.Attributes["data-val-digits"] != null) { try { Double x = Double.Parse(TextBox1.Text); } catch { return false; } } //data-val="true" data-val-number="必須為有效數字" if (TextBox1.Attributes["data-val-number"] != null) { try { Double x = Double.Parse(TextBox1.Text); } catch { return false; } } //data-val="true" data-val-accept="檔名須為.jpg、.gif或.png" data-val-accept-exts="jpg|gif|png" //data-val="true" data-val-regex="車牌格式須為999-999" data-val-regex-pattern="[0-9A-Z]{3}-[0-9A-Z]{3}" //data-val="true" data-val-date="必須為日期" if (TextBox1.Attributes["data-val-date"] != null) { try { DateTime x = DateTime.Parse(TextBox1.Text); } catch { return false; } } //data-val="true" data-val-email="必須為Email" if (TextBox1.Attributes["data-val-email"] != null) { //if (DataValid.IsValidEmail(TextBox1.Text) == false) // return false; } //data-val="true" data-val-url="必須為有效網址" if (TextBox1.Attributes["data-val-url"] != null) { } //data-val="true" data-val-length="長度須介於4到8之間" data-val-length-min="4" data-val-length-max="8" if (TextBox1.Attributes["data-val-length"] != null) { try { int DataValLengthMin = int.Parse(TextBox1.Attributes["data-val-length-min"]); int DataValLengthMax = int.Parse(TextBox1.Attributes["data-val-length-max"]); int DataValLength = TextBox1.Text.Length; if ((DataValLength < DataValLengthMin) || (DataValLength > DataValLengthMax)) return false; } catch { return false; } } //data-val="true" data-val-range="須介於10到100" data-val-range-min="10" data-val-range-max="100" if (TextBox1.Attributes["data-val-range"] != null) { try { int DataValRangeMin = int.Parse(TextBox1.Attributes["data-val-range-min"]); int DataValRangeMax = int.Parse(TextBox1.Attributes["data-val-range-max"]); int DataVal1 = int.Parse(TextBox1.Text); if ((DataVal1 < DataValRangeMin) || (DataVal1 > DataValRangeMax)) return false; } catch { return false; } } //data-val="true" data-val-equalto="必須與上方欄位內容相同" data-val-equalto-other="欄位ID" if (TextBox1.Attributes["data-val-equalto"] != null) { try { string strID = TextBox1.Attributes["data-val-equalto-other"]; TextBox TextBox2 = FormView1.FindControl(strID) as TextBox; if (TextBox1.Text != TextBox2.Text) return false; } catch { return false; } } } } break; default: break; } } } return true; } }
