初始化validation验证插件

初始化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的属性进行验证，基本格式如下

<input value="请输入您的姓名" class="validate[required,custom[noSpecialCaracters],length[0,20],ajax[ajaxUserName]]" type="text" name="user" id="user" /> 

所有的验证规则写在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

• 你还可以在点击提交按钮后才触发验证。

  1. $("#formID").validationEngine({

  2. inlineValidation: false, 

  3. success :  false, 

  4. failure : function(){callFailFunction()}

  5. })

  默认的是在鼠标失去焦点后才开始验证，也就是绑定的是blur事件，那如何改变呢？看下面的配置。

  1. $("#formID").validationEngine({

  2. validationEventTriggers:"keyup blur",  //will validate on keyup and blur   

  3. success :  false, 

  4. failure : function(){callFailFunction()}

  5. })

  validationEventTriggers属性就是修改绑定事件，上面是增加了个keyup，也就是键盘按键起来就触发验证。

  修改提示层的位置

  1. $("#formID").validationEngine({

  2. promptPosition: "topRight", // OPENNING BOX POSITION, IMPLEMENTED: topLeft, topRight, bottomLeft,  centerRight, bottomRight 

  3. success :  false, 

  4. failure : function(){

  5. })

  promptPosition就是控制位置，有5种模式：topLeft, topRight, bottomLeft, centerRight, bottomRight 

  ajax验证模式

  1. $("#formID").validationEngine({

  2. ajaxSubmit: true, 

  3. ajaxSubmitFile: "ajaxSubmit.php", 

  4. ajaxSubmitMessage: "Thank you, we received your inscription!", 

  5. ajaxSubmitExtraData: "securityCode=38709238423&name=john", 

  6. success :  false, 

  7. failure : function(){}

  8. })

  这几个参数很好理解。

  1. ajaxSubmit: true, 提交表单使用ajax提交

  2. ajaxSubmitFile: “ajaxSubmit.php”, 后台脚本

  3. ajaxSubmitMessage 成功后显示的信息

  4. ajaxSubmitExtraData 参数

  这里需要对后台脚本返回的数据进行下说明：
  返回的数据格式是json。
  出现一个错误，产生一个数组，如下：

  1. $arrayError[0][0] = "#email";            // FIELDID 

  2. $arrayError[0][1] = "Your email do not match.. whatever it need to match";     // TEXT ERROR    

  3. $arrayError[0][2] = "error";            // BOX COLOR

   

  如何使用钩子？

  Validation-Engine中的钩子是用来做啥？我们来看一个典型的使用场景：当你的表单字段存在错误时，你希望表单提交前，在表单头部打印出一行“你的表单存在错误，请修改！”。
  也就是说Validation-Engine中的钩子其实可以理解为自定义事件。
  具体来看个demo：http://www.position-relative.net/creation/formValidator/demos/demoHooks.html。

  1. $("#formID").bind("jqv.form.result", function(event , errorFound){

  2.                     if(errorFound) $("#hookError").append("There is some problems with your form");

  3.                 })

  监听jqv.form.result事件，在提交表单前触发。
  errorFound是错误标识符，当为false时，表示表单存在错误。

  Validation-Engine目前支持的钩子（自定义事件）

  • jqv.form.validating:在表单开始验证前

  • jqv.field.result(event, field, errorFound, prompText) :一个表单字段验证后触发

  • jqv.form.result(event, errorFound) : 表单验证后触发

   

 

转载于:https://blog.51cto.com/nekoxiang/1252036