jQuery Validation

出自 ProgWiki
前往: 導覽搜尋
jQuery Validation

作者
研發者
最初正式版
最新穩定版 1.11.1 / 2013-03-22
最新測試版 /
作業系統 跨平台
系统平台
可用語言
類型 表單欄位驗證
授權協議 MIT
網站 jQuery Validation

jQuery Validation,是一種用戶端的表單欄位驗證的方法。並不限於只能用在ASP.NET MVC上。有3種提示訊息顯示方式。

  1. 提示訊息列表
  2. 輸入欄位的後方顯示提示訊息
  3. 仿ToolTip顯示的提示訊息(需使用下方的「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整合使用

<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;
    }
 
 
}