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
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類