jQuery Validation Engine 表單驗證

来源:http://www.cnblogs.com/niuboren/archive/2016/12/12/6163181.html
-Advertisement-
Play Games

功能強大的 jQuery 表單驗證插件，適用於日常的 E-mail、電話號碼、網址等驗證及 Ajax 驗證，除自身擁有豐富的驗證規則外，還可以添加自定義的驗證規則。 相容 IE 6+, Chrome, Firefox, Safari, Opera 10+ 版本： jQuery v1.7+ jQuer ...


功能強大的 jQuery 表單驗證插件，適用於日常的 E-mail、電話號碼、網址等驗證及 Ajax 驗證，除自身擁有豐富的驗證規則外，還可以添加自定義的驗證規則。

相容 IE 6+, Chrome, Firefox, Safari, Opera 10+

  • 版本：
  • jQuery v1.7+
  • jQuery Validation Engine v2.6.2
  • 相對 2.2.4 版本的一些區別：
  • 部分參數功能發生變化；
  • 輸入控制項可以不寫 id 屬性；
  • 參數 onSuccess 和 onFailure 改為只在表單提交時觸發；
  • 驗證規則 past[date]（過去） 與 future[date]（未來） 對調；
  • API 介面驗證控制項均使用 "validate"，移除 "validateField"；
  • API 介面隱藏提示均使用 "hide" 移除 "hidePrompt"，保留 "hideAll"。
  • Ciaoca 中文增強版：
  • 根據中文字體優化樣式
  • 增加多款驗證樣式
  • 增加針對中文的驗證規則
  • 移除無用的驗證規則示例
  • 完善對 IE8 以下瀏覽器的支持（錯誤：對象不支持“indexOf”屬性或方法）

使用方法

 

載入 CSS 文件

  1. <link rel="stylesheet" href="css/validationEngine.jquery.css">
複製

載入 JavaScript 文件

  1. <script src="js/jquery.js"></script> 
    <script src="js/jquery.validationEngine-zh_CN.js"></script> 
    <script src="js/jquery.validationEngine.js"></script> 
    <!-- jquery.validationEngine-zh_CN.js 為配置文件，可根據需求自行調整或增加，也可以更換為其他語言配置文件 --> 
複製

給表單加上 ID

  1. <!-- ID 須設置在 form 標簽中 --> 
    <form id="form_id" ...> 
    ... 
    </form> 
複製

給控制項添加驗證類型

  1. <!-- 
    驗證規則預設使用 class 屬性 
    validate[required] 表示該項必須填寫 
    --> 
    <input type="text" class="validate[required]"> 
    <input type="checkbox" class="validate[required]"> 
    <select class="validate[required]"></select>; 
    <textarea class="validate[required]"></textarea> 
複製

設置驗證

  1. // 直接調用 
    $('#form_id').validationEngine(); 
     
    // 自定義參數調用 
    $('#form_id').validationEngine('attach', { 
      promptPosition: 'centerRight', 
      scroll: false 
    });
複製

支持鏈式操作

  1. $('#form_id').validationEngine().css({border:'2px solid #000'});
複製

線上實例

基礎示例
綜合示例 實例預覽
擴展必填驗證 實例預覽
日期類型驗證 實例預覽
正則驗證 實例預覽
多種輸入控制項的驗證 實例預覽
單選框、覆選框的驗證 實例預覽
多表單驗證 實例預覽
DIV 容器 實例預覽
不再需要 ID 屬性 實例預覽
較好體驗的中文表單 實例預覽
參數配置
全局設置 實例預覽
自動隱藏提示信息 實例預覽
自定義提示信息內容 實例預覽
提示信息的數量 實例預覽
只顯示一個提示信息 實例預覽
靜默處理 實例預覽
顯示溢出限制 實例預覽
驗證回調函數（阻斷提交） 實例預覽
驗證回調函數（不阻斷提交） 實例預覽
data 屬性
自定義提示信息內容 實例預覽
提示層的位置 實例預覽
調整提示層的位置 實例預覽
API 介面
顯示提示信息 實例預覽
改變提示層位置 實例預覽
動態綁定 實例預覽
自定義事件 實例預覽
Ajax 驗證
AJAX PHP 驗證 實例預覽
AJAX PHP 驗證及提交 實例預覽
附錄
 [插件支持] selectbox 實例預覽
[插件支持] datepicker 實例預覽
[多語言] 日文 實例預覽

驗證類型

註：驗證規則均寫在 validate[] 中，如有多條規則，用英文逗號(,)分割。

例：validate[required,minSize[6],custom[onlyLetterNumber]]

 

名稱示例說明
required validate[required] 表示必填項
groupRequired[string] validate[groupRequired[grp]] 在驗證組為 grp 的群組，中至少輸入或選擇一項
condRequired[string] validate[condRequired[ids]] 當 ids 的某個控制項不為空時，那麼該控制項也為必填項。

可以依賴多項，如：validate[condRequired[id1,id2]
minSize[int] validate[minSize[6]] 最少輸入字元數
maxSize[int] validate[maxSize[20]] 最多輸入字元數
min[int] validate[min[1]] 最小值（該項為數字的最小值，註意與 minSize 的區分）
max[int] validate[max[9999]] 最大值（該項為數字的最大值，註意與 maxSize 的區分）
minCheckbox[int] validate[minCheckbox[2]] 最少選取的項目數（用於 Checkbox）
maxCheckbox[int] validate[maxCheckbox[2]] 最多選取的項目數（用於 Checkbox）
date[string] validate[custom[date]] 驗證日期，格式為 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D
dateFormat[string] validate[custom[dateFormat]] 驗證日期格式，格式為 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D
dateTimeFormat[string] validate[custom[dateTimeFormat]] 驗證日期及時間格式，格式為：YYYY/MM/DD hh:mm:ss AM|PM
dateRange[string] validate[dateRange[grp1]] 驗證 grp1 的值是否符合日期範圍（開始日期與結束日期）

根據控制項的前後位置，如果當前控制項在 grp1 元素之後，輸入的日期不能是 grp1 日期的過去。

如果當前控制項在 grp1 控制項之前，輸入的日期不能是 grp1 日期的未來。
dateTimeRange[string] validate[dateTimeRange[grp1]] 驗證日期及時間範圍，增加了時間的對比，其他的和 dateRange 一樣。
past[string] validate[past[2012/12/20]] 日期必需是 date 或 date 的過去。date 格式可寫作 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D 或 now
future[string] validate[future[now]] 日期必須是 data 或 date 的未來。date 格式可寫作 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D 或 now
equals[string] validate[equals[id]] 當前控制項的值需與控制項 id 的值相同
number validate[custom[number]] 驗證數字
integer validate[custom[integer]] 驗證整數
phone validate[custom[phone]] 驗證電話號碼
email validate[custom[email]] 驗證 E-mail 地址
url validate[custom[url]] 驗證 url 地址，需以 http://、https:// 或 ftp:// 開頭
ipv4 validate[custom[ipv4]] 驗證 ipv4 地址
onlyNumberSp validate[custom[onlyNumberSp]] 只接受填數字和空格
onlyLetterSp validate[custom[onlyLetterSp]] 只接受填英文字母、單引號（'）和空格
onlyLetterNumber validate[custom[onlyLetterNumber]] 只接受數字和英文字母
custom[自定義規則] validate[custom[ruleName]]

自定義規則驗證  

  1. 'ruleName': { 
  2.   'regex': RegExp, 
  3.   /* 正則表達式，
  4.   如果正則能匹配內容表示通過 */ 
  5.   'alertText': '驗證不通過時的提示信息' 
  6. }
複製

 
ajax validate[ajax[ajaxName]]

自定義 ajax 驗證 

  1. 'ajaxName': { 
  2.   'url': 'phpajax/ajaxValidateFieldUser.php', 
  3.   /* 驗證程式地址 */ 
  4.   'extraData': 'name=eric', /* 額外參數 */ 
  5.   'alertTextOk': '驗證通過時的提示信息', 
  6.   'alertText': '驗證不通過時的提示信息', 
  7.   'alertTextLoad': '正在驗證時的提示信息' 
  8. } 
  9. /* 
  10.  * 例： 
  11.  * <input type="text" id="email" 
  12.  class="validate[ajax[ajaxName]]"> 
  13.  * 假設填寫的值為：[email protected] 
  14.  * extraData 設置為：'type=register&verify=abcd' 
  15.  * 提交到後端的 url 為：phpajax/ajaxValidateFieldUser
  16.  [email protected]&type=register
  17.  &verify=abcd 
  18.  */ 複製

 

傳輸方式：get

傳遞參數："fieldId=" + field.attr("id") + "&fieldValue=" + field.val()

額外參數：extraData 可以設置為字元串或對象，會在參數結尾追加 "&extraData"

返回數據格式：json

返回數據內容：[String,Boolean]

第一個值類型為 String，是接收到 fieldId 的值；

第二個值類型為 Boolean，驗證通過返回 true，不通過返回 false
funcCall validate[funcCall[functionName]] 調用外部函數驗證

functionName(field, rules, i, options)

Ciaoca 增強版增加驗證規則：

名稱示例說明
chinese validate[custom[chinese]] 只接受中文漢字
chinaId validate[custom[chinaId]] 驗證身份證號碼（僅支持 18 位的身份證號碼）
chinaIdLoose validate[custom[chinaIdLoose]] 驗證身份證號碼（支持 15 及 18 位的身份證號碼）
chinaZip validate[custom[chinaZip]] 驗證郵政編碼
qq validate[custom[qq]] 驗證 QQ 號碼

參數說明

名稱預設值說明
validationEventTrigger 'blur' 觸發驗證的事件，支持事件可參考 jQuery 的事件說明。

PS：如果希望只在表單提交時驗證，可以設置為空。或者設置參數 binded:false
binded true 是否綁定即時驗證
scroll true 屏幕自動滾動到第一個驗證不通過的位置。
focusFirstField true 驗證未通過時，是否給第一個不通過的控制項獲取焦點。
validateNonVisibleFields false 是否驗證不可見的元素（如 type="hidden" 的輸入框，或多個輸入控制項在選項卡切換中）
showPrompts true 是否顯示提示信息
showArrow true 是否顯示提示信息的箭頭
promptPosition 'topRight'

提示信息的位置，可設置為：'topRight', 'topLeft', 'bottomRight', 'bottomLeft', 'centerRight', 'centerLeft', 'inline'

可設置更具體的位置，格式為："方向: X偏移值, Y偏移值"。如：bottomLeft: -20, 5
autoPositionUpdate false 是否自動調整提示層的位置
autoHidePrompt false 是否自動隱藏提示信息
autoHideDelay 100000 自動隱藏提示信息的延遲時間 (ms)
fadeDuration 0.3 隱藏提示信息淡出的時間
addPromptClass '' 給提示信息增加 class

Ciaoca 增強版中，增加樣式如下：

'formError-noArrow' -- 無箭頭樣式

'formError-text' -- 純文字樣式

'formError-small' -- 精簡版樣式

'formError-white' -- 白色版樣式

可以疊加使用，如：addPromptClass: 'formError-noArrow formError-small'
custom_error_messages {} 自定義錯誤信息
maxErrorsPerField false 單個元素顯示錯誤提示的最大數量，值設為數值。預設 false 表示不限制。
showOneMessage false 是否只顯示一個提示信息
doNotShowAllErrosOnSubmit false 在提交表單時不顯示所有的錯誤信息（建議使用參數 showOneMessage 替代）
addSuccessCssClassToField '' 驗證通過時，給控制項增加 class，當再次驗證失敗時，會去除。
addFailureCssClassToField '' 驗證失敗時，給控制項增加 class，當再次驗證通過時，會去除。
prettySelect false 是否使用了美化過的 select 選擇控制項
onFieldSuccess false 控制項驗證通過時的回調函數

function(field){}
onFieldFailure false 控制項驗證失敗時的回調函數

function(field){}
onSuccess false 在表單驗證結果為通過時的回調函數
onFailure false 在表單驗證結果為失敗時的回調函數

PS：onSuccess 和 onFailure
onValidationComplete false 表單提交驗證完成時的回調函數

function(form, valid){}，參數：

form：表單元素

valid：驗證結果（ture or false）

PS：使用此方法後，表單即使驗證通過也不會進行提交，交給定義的回調函數進行操作。
ajaxFormValidation false 是否使用 Ajax 提交表單（預設使用 GET 方式發送數據）
ajaxFormValidationURL false 設置 Ajax 提交的 URL，預設使用 form 的 action 屬性
ajaxFormValidationMethod 'get' 設置 Ajax 提交時，發送數據的方式
onAjaxFormComplete $.noop 表單提交，Ajax 驗證完成後的行為（Function       

function(status, form, json, options){}
onBeforeAjaxFormValidation $.noop 表單提交驗證通過後，Ajax 提交之前的回調函數

function(form, options){}
ajaxValidCache {}  
isError false  
InvalidFields []  
isOverflown false 表單是否在溢出滾動的元素內（即外部元素設置了 overflow:scroll）

PS：設置為 ture 後，提示內容的插入位置將更改為在驗證的控制項之前插入；

　　此時需要在控制項外層再套一個元素，並設置 class="inputContainer"
overflownDIV '' 設置了溢出滾動的元素，格式為 jQuery 的選擇器。
usePrefix '' 使用 ID 首碼
useSuffix '' 使用 ID 尾碼
validateAttribute 'class' 存放驗證規則的屬性
bindMethod 'bind'  
inlineAjax false  

HTML5 屬性

屬性名稱說明
data-validation-engine

設置驗證規則

除了使用 class 設置驗證規則外，也可以使用該屬性來設置驗證規則。
data-validation-placeholder

占位符

當位置為必填的控制項驗證時，值不能為空，也不能為占位符。
data-prompt-position

自定義提示信息的位置，可設置為："topRight", "topLeft", "bottomRight" "bottomLeft", "centerRight", "centerLeft", "inline"

可設置更具體的位置，格式為："方向:X偏移值,Y偏移值"。如：data-prompt-position="bottomLeft:20,5"

PS：偏移值可以為負數
data-prompt-target

載入提示信息的容器，值為元素的 id

僅在 promptPosition 或 data-prompt-position 設為 "inline" 是有效。

錯誤信息屬性（實驗的）

屬性值與驗證規則相對應

  1. <!-- 自定義錯誤信息屬性（實驗支持） --> 
    <input type="email" name="email" id="email" data-validation-engine="validate[required,custom[email]]" 
      data-errormessage-value-missing="E-mail 不能為空"  
      data-errormessage-custom-error="E-mail 格式應為：[email protected]"  
      data-errormessage="通用的錯誤提示信息">
    複製
 
屬性名稱對應驗證規則
data-errormessage-value-missing
  • required
  • groupRequired
  • condRequired
data-errormessage-type-mismatch
  • past
  • future
  • dateRange
  • dateTimeRange
data-errormessage-pattern-mismatch
  • creditCard
  • equals
data-errormessage-range-underflow
  • minSize
  • min
  • minCheckbox
data-errormessage-range-overflow
  • maxSize
  • max
  • maxCheckbox
data-errormessage-custom-error
  • custom
  • ajax
  • funcCall
data-errormessage 通用的錯誤提示信息

API 介面

名稱示例說明
attach $('#form_id').validationEngine('attach'); 綁定表單驗證
detach $('#form_id').validationEngine('detach'); 移除表單驗證
validate alert($('#id').validationEngine('validate')); 驗證控制項或表單，返回結果 true 或 false
showPrompt $('#id').validationEngine('showPrompt','提示內容','load'); 在該元素上創建一個提示，3 種狀態：'pass', 'error', 'load'
hide $('#id').validationEngine('hide'); 隱藏改元素及元素內的提示
hideAll $('#id').validationEngine('hideAll'); 隱藏頁面上的所有提示
updatePromptsPosition $('#form_id').validationEngine('updatePromptsPosition') 更新提示層的位置

自定義事件

插件增加的自定義事件

名稱示例說明
jqv.form.validating $('#form_id').bind('jqv.form.validating', function(event){}); 表單驗證時
jqv.form.result $('#form_id').bind('jqv.form.result', function(event, errorFound){}); 表單驗證完成。返回參數說明：

errorFound：表單驗證不通過（true 或 false）
jqv.field.result $('#field_id').bind('jqv.field.result', function(event, field, isError, promptText){}); 單個控制項驗證完成。返回參數說明：

field：控制項對象

isError：控制項驗證不通過（true 或 false）

promptText：提示信息

 

下載

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Java性能優化權威指南-讀書筆記（五）-JVM性能調優-吞吐量
    吞吐量是指，應用程式的TPS: 每秒多少次事務，QPS: 每秒多少次查詢等性能指標。 吞吐量調優就是減少垃圾收集器消耗的CPU周期數，從而將更多的CPU周期用於執行應用程式。 CMS吞吐調優 CMS包括Minor GC所帶來的開銷應該小於10%，如果垃圾收集的開銷在3%或更少，說明通過調優吞吐量，提 ...
  • 人機猜拳（這是最近的一個總結）
    人機猜拳是我自己原創的一段代碼，我剛學完do-while，知識有限，但自己感覺寫的這段代碼是我的一個小巔峰，發出來讓大家看看，新手能學到東西的話是極好的，然後更多的是想讓一些老鳥給點建議。這個寫代碼很枯燥，最近一直在寫，自己是深有體會，後來我就在練習的時候在自己的代碼里寫一些有趣的內容，下麵你們能看 ...
  • 遍歷問題 codevs
    1029 遍歷問題 1029 遍歷問題 時間限制: 1 s 空間限制: 128000 KB 題目等級 : 鑽石 Diamond 1029 遍歷問題 1029 遍歷問題 時間限制: 1 s 空間限制: 128000 KB 題目等級 : 鑽石 Diamond 時間限制: 1 s 空間限制: 128000 ...
  • django-資料庫[ 配置 ]
    os:mac, django1.9.5, python3.5 database:mysql 0.背景 django內置的database如下: 要註意的是無論選擇使用哪個資料庫伺服器，都必須下載和安裝對應的資料庫適配器 1.安裝 我們選擇mysql作為資料庫伺服器 因為MySQLdb並不支持Pyth ...
  • 階乘0問題
    Problem 1 - Time Limit : 1s Memory Limit : 512M Code Limit : 128KDescription我們定義階乘N!=1×2×3×...×N，並且0!=1。現在我們想知道對於N!的階乘結尾總共有多少個0。Input一行一個整數N。Output0的個 ...
  • 分散式事務解決方案
    ...
  • 多態 （ 向上造型、向下造型)
    實現多態的前提 1。 要有繼承 2。 要有方法重寫,沒有也可以，但是沒有的話 就沒有意義 3。 要有父類引用 指向子類對象 如： 父類 f=new 子類(); * 多態中的成員訪問特點 * A, 成員變數 編譯看左邊， 運行看左邊 * B, 構造方法 創建子類對象的時候，，訪問 父類的構造方法， 對 ...
  • Three.js 入門指南(核心對象)
    推薦大家可以看看這個：http://wenku.baidu.com/link?url=RQU2exzV_EF3GATc3bzQU2o9LGMuCmiN5nUJth5SLG3E2TrxtBLQodJU_kZgfJjd9ljtR5XhZlHdzoHJ6kLeAF4uC9dttM1sNer60lg09gS ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類