初始化validation验证插件

$(document).ready(function() { 

$("#formID").validationEngine() ; //formID是你要验证的表单ID 

}) 

如果需要更改验证规则和添加ajax验证函数之类的需要在汉化js中进行更改。

所有的参数表格都是摘抄于http://www.im486.net/Validation_Engine.html自己也收集了一些感觉不够完整,看到该网站上面收集到的参数比较完整,所以摘抄了下来。

options 参数

validationEventTrigger "blur" 触发验证的事件,支持事件可参考 jQuery 的事件说明。
scroll true 屏幕自动滚动到第一个未通过验证的位置
focusFirstField true 验证未通过时,第一个未通过的控件是否设置为焦点
promptPosition "topRight" 验证提示信息的位置,可设置为:"topRight", "bottomLeft", "centerRight", "bottomRight"
autoPositionUpdate false 是否自动调整提示层的位置
bindMethod "bind" 验证事件的绑定方式,可设置为:bind, live 
binded false 是否已经绑定其他事件,设为 true 将不进行验证。
inlineAjax false
ajaxFormValidation false 使用 Ajax 验证表单
ajaxFormValidationURL false 设置 Ajax 验证的 URL,默认使用 form 的 action 属性
ajaxValidCache {}
onAjaxFormComplete $.noop 表单提交,Ajax 验证完成后的行为(Function)
onBeforeAjaxFormValidation $.noop 表单提交验证规则通过后,Ajax 验证之前的行为(Function)
onValidationComplete false 表单提交验证完成时的行为(Function)可以得到两个参数:表单元素 和 验证结果(ture or false)
onSuccess false 实时验证所有项目都通过时,发生的行为(Function)
onFailure false 实时验证有未通过项目时,发生的行为(Function)PS:onSuccess 和 onFailure 在禁用实时验证时无效。
isOverflown false 表单是否在溢出滚动的元素内(即外部元素设置了 overflow:scroll)
overflownDIV "" 设置了溢出滚动的元素,格式为 jQuery 的选择器。
showArrow true
isError false
InvalidFields []

验证规则

Validation验证是通过class的属性进行验证,基本格式如下

 

所有的验证规则写在validate[]内,有多种验证,用逗号隔开,

常用的验证参数

名称 示例 说明
required validate[required] 必填项
optional validate[optional] 可选项。若不输入,不要求必填,若有输入,则验证其是否符合要求。
dateRange[name] validate[dateRange[grp1]] 验证日期范围
dateTimeRange[name] validate[dateTimeRange[grp1]] 验证日期及时间范围
minSize[int] validate[minSize[6]] 最少输入字符数
maxSize[int] validate[maxSize[20]] 最多输入字符数
groupRequired[name] validate[groupRequired[grp2]] 群组中至少输入一项
min[int] validate[min[1]] 最小值(数值的最小值)
max[int] validate[max[9999]] 最大值(数值的最大值)
past[date] validate[past[2012/12/20]] 日期必需在 date 或 date 的将来。格式为 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D 或 now。
future[date] validate[future[now]] 日期必须在 data 或 date 的过去。
maxCheckbox[int] validate[maxCheckbox[2]] 最多选取的项目数(用于Checkbox)
minCheckbox validate[minCheckbox[2]] 最少选取的项目数(用于Checkbox)
equals validate[equals[id]] 当前控件值需与 id 这个控件的值相同
phone validate[custom[phone]] 验证电话号码
email validate[custom[email]] 验证 Email 地址
integer validate[custom[integer]] 验证整数
number validate[custom[number]] 验证数字
date validate[custom[date]] 验证日期
dateFormat validate[custom[dateFormat]] 验证日期格式
dateTimeFormat validate[custom[dateTimeFormat]] 验证日期及时间格式,格式为:YYYY/MM/DD hh:mm:ss AM|PM
ipv4 validate[custom[ipv4]] 验证 ipv4 地址
url validate[custom[url]] 验证 url 地址,需以 http://、https:// 或 ftp:// 开头
onlyNumberSp validate[custom[onlyNumberSp]] 只接受填数字和空格
onlyLetterSp validate[custom[onlyLetterSp]] 只接受填英文字母(大小写)和单引号(')
onlyLetterNumber validate[custom[onlyLetterNumber]] 只接受数字和英文字母
ajax validate[ajax[ajaxUserCallPhp]] 在验证规则中自定义 

"ajaxUserCallPhp":{

"url":"phpajax/ajaxValidateFieldUser.php",

"extraData":"name=eric",

"alertTextOk":"* 此帐号名称可以使用",

"alertText":"* 此名称已被其他人使用",

"alertTextLoad":"* 正在确认帐号名称是否有其他人使用,请稍等。"

}

funcCall validate[funcCall[functionName]] 调用外部函数

Validation Engine的API 方法参数

名称 示例 说明
attach $("#form_id").validationEngine("attach"); 注册表单验证事件
detach $("#form_id").validationEngine("detach"); 取消注册表单验证事件
validate alert($("#form_id").validationEngine("validate")); 验证表单,返回结果 true 或 false
validateField alert($("#form_id").validationEngine("validateField","#element_id")); 验证单个控件,返回结果 true 或 false
showPrompt $("#element_id").validationEngine("showPrompt","提示内容","load"); 在该元素上创建一个提示内容,3 种状态:"pass", "error", "load"
hidePrompt $("#element_id").validationEngine("hidePrompt"); 隐藏该元素的提示内容
hide $("#form_id").validationEngine("hide"); 关闭表单中的提示
hideAll $("#form_id").validationEngine("hideAll"); 关闭页面上的所有提示
updatePromptsPosition $("#form_id").validationEngine("updatePromptsPosition") 更新提示层的位置

错误信息显示属性

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