validationEngine 使用

引入文件

环境在 jQuery 下 , 所有先要引入 jQuery 

1 <%--校验样式--%>
2 <link rel="stylesheet" href="<%=basePath%>css/validationEngine.jquery.css">
3 <%--校验及自定义规则规则--%>
4 <script type="text/javascript" src="<%=basePath%>common/jquery-validation/1.14.0/jquery.validationEngine.min.js"></script>

链接：http://pan.baidu.com/s/1qYLQgTQ 密码：5lw3 

已经添加部分自定义校验

 

使用 两种方式:

1 普通校验
2 <input class="form-control" type="text" data-validation-engine="validate[required]"/>
3 
4 自定义校验
5 <input class="form-control" type="text" data-validation-engine="validate[required,custom[chinaId]]"/>

<input class="form-control" type="text" data-validation-engine="validate[required,ajax[ajaxRegisterCheck]]"/>

<input type="text" class="validate[required]">

 

 

初始化 参数调用:

1  　　$("#form").validationEngine('attach', {
2             relative: true,
3             overflownDIV: "#divPostion",
4             isOverflown:true, 
　　　　　　　　overflownDIV: $('#divPostion'), 
　　　　　　　　autoHidePrompt:true, 
　　　　　　　　autoHideDelay: 5000, // 显示时间 
5             promptPosition: "topLeft" // 验证弹出框的位置，topRight,topLeft,bottomRight,bottomLeft,centerRight,centerLeft,inline
6         });

 

初始化 直接调用:

1 // 直接调用
2 $('#form').validationEngine();

 

取消校验 :

// 取消校验
$("#form").validationEngine("detach");

 

 

 

验证类型说明 

名称	示例	说明
required	validate[required]	表示必填项
groupRequired[string]	validate[groupRequired[grp]]	在验证组为 grp 的群组，中至少输入或选择一项
condRequired[string]	validate[condRequired[ids]]	当 ids 的某个控件不为空时，那么该控件也为必填项。 可以依赖多项，如：validate[condRequired[id1,id2]][Demo]
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 日期的未来。[Demo]
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]]	自定义规则验证 'ruleName': { 'regex': RegExp, /* 正则表达式，如果正则能匹配内容表示通过 */ 'alertText': '验证不通过时的提示信息' }
ajax	validate[ajax[ajaxName]]	自定义 ajax 验证 'ajaxName': { 'url': "<%=basePath%>systemParam/ajaxVerify.action", /* 验证程序地址 */ 'extraData': 'name=eric', /* 额外参数 */ 'alertTextOk': '验证通过时的提示信息', 'alertText': '验证不通过时的提示信息', 'alertTextLoad': '正在验证时的提示信息' } /* * 例： * <input type="text" id="email" class="validate[ajax[ajaxName]]"> * 假设填写的值为：study4Java.com * extraData 设置为：'type=register' * 提交到后端的 url 为：<%=basePath%>systemParam/ajaxVerify.action?fieldId=email&fieldValue=study4Java.com&type=register */   传输方式：get 传递参数："fieldId=" + field.attr("id") + "&fieldValue=" + field.val() 额外参数：extraData 可以设置为字符串或对象，会在参数结尾追加 "&extraData" 返回数据格式：数组 返回数据内容：[String,Boolean,String] 第一个值类型为 String，是接收到 fieldId 的值； 第二个值类型为 Boolean，验证通过返回 true，不通过返回 false 第三个值类型为 String，是弹出的提示信息,为空则显示声明时的信息； 具体请参考 [Demo]
funcCall	validate[funcCall[functionName]]	调用外部函数验证 functionName(field, rules, i, options)

 

 

参数说明:

 

 

 

名称	默认值	说明
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	{}	自定义错误信息内容 [Demo]
maxErrorsPerField	false	单个元素显示错误提示的最大数量，值设为数值。默认 false 表示不限制。
showOneMessage	false	是否只显示一个提示信息
doNotShowAllErrosOnSubmit	false	在提交表单时不显示所有的错误信息（建议使用参数 showOneMessage 替代）
addSuccessCssClassToField	''	验证通过时，给控件增加 class，当再次验证失败时，会去除。
addFailureCssClassToField	''	验证失败时，给控件增加 class，当再次验证通过时，会去除。
prettySelect	false	是否使用了美化过的 select 选择控件 [Demo]
onFieldSuccess	false	控件验证通过时的回调函数 function(field){}
onFieldFailure	false	控件验证失败时的回调函数 function(field){}
onSuccess	false	在表单验证结果为通过时的回调函数
onFailure	false	在表单验证结果为失败时的回调函数 PS：onSuccess 和 onFailure 请参考 [Demo]
onValidationComplete	false	表单提交验证完成时的回调函数 [Demo] 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）[Demo] function(status, form, json, options){}
onBeforeAjaxFormValidation	$.noop	表单提交验证通过后，Ajax 提交之前的回调函数 [Demo] 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