validation怎么用_什么是确认validation

2022-11-09 16:11:21 浏览数 (1)

引入文件

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

代码语言:javascript复制
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

已经添加部分自定义校验

使用 两种方式:

代码语言:javascript复制
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]]"/>
代码语言:javascript复制
<input class="form-control" type="text" data-validation-engine="validate[required,ajax[ajaxRegisterCheck]]"/>
代码语言:javascript复制
代码语言:javascript复制
<input type="text" class="validate[required]">

初始化 参数调用:

代码语言:javascript复制
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         });

初始化 直接调用:

代码语言:javascript复制
1 // 直接调用
2 $('#form').validationEngine();

取消校验 :

代码语言:javascript复制
// 取消校验
$("#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

转载于:https://www.cnblogs.com/mutouyang/p/7095550.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/186179.html原文链接:https://javaforall.cn

0 人点赞