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]] | 验证电话号码 |
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]] |
自定义规则验证
|
ajax | validate[ajax[ajaxName]] |
自定义 ajax 验证
/*
传输方式: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偏移值"。如: |
autoPositionUpdate | false | 是否自动调整提示层的位置 |
autoHidePrompt | false | 是否自动隐藏提示信息 |
autoHideDelay | 100000 | 自动隐藏提示信息的延迟时间 (ms) |
fadeDuration | 0.3 | 隐藏提示信息淡出的时间 |
addPromptClass | '' |
给提示信息增加 class
Ciaoca 增强版中,增加样式如下: 'formError-noArrow' -- 无箭头样式 'formError-text' -- 纯文字样式 'formError-small' -- 精简版样式 'formError-white' -- 白色版样式 可以叠加使用,如: |
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 |
转载于:https://www.cnblogs.com/mutouyang/p/7095550.html
validationEngine 使用相关推荐
- jquery 表单验证 ajax提交,jquery.validationEngine ajax验证 不通过也提交表单
今天用到了jquery.validationEngine ajax验证,碰到了一个让人很郁闷的问题 ajax验证不通过时也提交表单,在网上找了半天也没找到答案,让人很 没办法,看源码了 调试了半天,终 ...
- jQuery.validationEngine插件使用
2019独角兽企业重金招聘Python工程师标准>>> jQuery.validationEngine plugin是一个旨在校验表单元素的javascript插件.目前在IE6-8 ...
- validationEngine中文版 — jquery强大的表单验证插件
中文汉化版,官方只有英文的.同时根据中国国情修改了部分验证规则. 这个插件支持大部分的浏览器,但由于有使用到了css3的阴影和圆角样式,所以在IE浏览器下无法看到圆角和阴影效果(万恶的IE). 官方下 ...
- JQuery.validationEngine表单验证插件
一.说明 JQuery.validationEngine表单验证控件功能强大,自带了样式显示模式: 1.字符类型:非空验证.最大长度.最小长度.相等判断.数字和空格.数字和英文字母 2.数字类型:数字 ...
- jquery.validationEngine 自定义验证的使用方法
一: 自定义验证规则 (1) 方法1 ,定义验证规则 $.validationEngineLanguage.allRules.name = {"regex": /^\w{5,10 ...
- jquery validation engine ajax,validationEngine ajax验证 java
参考资料: http://code.ciaoca.com/jquery/validation_engine/ http://www.cnblogs.com/aijun/archive/2011/03/ ...
- html中表单的校验的插件,jquery表单验证插件validationEngine
插件的特色: 封装强悍.例子充足(基本都验证类型都被囊括).调用轻便 注意事项: 1.演示版本为 v2.2.4: 2.v2.0 以下的版本参数并不完全通用: 对 validationEngine.jq ...
- jQuery.validationEngine.js学习
项目中使用到了这个插件,抽了个空,看了一下. (function($){ var method ={} $.fn.validationEngine = function(){} $.validatio ...
- validationEngine验证
$("#jixiaokaopingForm").validationEngine({ ajaxSubmit: true, //是否ajax提交beforeSubmit:functi ...
最新文章
- 【PP】SAP库存决定
- EnterpriseDB Replication,复制Oracle数据测试(1)
- 学python编脚本_python 学习写脚本
- python软件设置代码字体的大小_Pycharm4.5设置字体大小以及背景颜色的方法
- Codeforces 148D:Bag of mice 概率DP
- EO CAT软件下载数据
- eclipse ADT
- 联想ThinkPad SL410(28428KC)与2842-EWC区别
- Python获取对象所占内存大小方法
- AutoJs学习-传感器图像
- 华硕路由器修改 Hosts 以达到局域网内自定义解析
- 基于WPF的科学计算器程序
- 2021-2027全球与中国智能办公室系统市场现状及未来发展趋势
- JNLP文件详细说明
- JavaScript判断输入值是否为素数
- echarts r 地图_pyecharts自定义地图
- python可以开发app吗-python可以写APP吗(python能做手机软件吗)
- 计算机视觉中的多视图几何 -- 2D射影几何与变换 --无穷远直线、虚圆点及其对偶以及恢复图像的仿射性质
- linux安装mq系统参数,Linux安装及配置WebSphere MQ 7.5
- (翻译)Pachyderm介绍-建造一个现代的Hadoop