A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 杨凯233 中级黑马   /  2016-9-23 13:37  /  1989 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

分享一款功能强大的 jQuery 表单验证插件,适用于日常的 E-mail、电话号码、网址等验证及 Ajax 验证,除自身拥有丰富的验证规则外,还可以添加自定义的验证规则。
兼容 IE 6+, Chrome, Firefox, Safari, Opera 10+
完善对 IE8 以下浏览器的支持(错误:对象不支持“indexOf”属性或方法)
使用方法载入 CSS 文件
参数说明[td]
名称
默认值
说明
validationEventTrigger'blur'触发验证的事件,支持事件可参考 jQuery 的事件说明。
PS:如果希望只在表单提交时验证,可以设置为空。或者设置参数 binded:false
bindedtrue是否绑定即时验证
scrolltrue屏幕自动滚动到第一个验证不通过的位置。
focusFirstFieldtrue验证未通过时,是否给第一个不通过的控件获取焦点。
validateNonVisibleFieldsfalse是否验证不可见的元素(如 type="hidden" 的输入框,或多个输入控件在选项卡切换中)
showPromptstrue是否显示提示信息
showArrowtrue是否显示提示信息的箭头
promptPosition'topRight'
提示信息的位置,可设置为:'topRight', 'topLeft', 'bottomRight', 'bottomLeft', 'centerRight', 'centerLeft', 'inline'
可设置更具体的位置,格式为:"方向: X偏移值, Y偏移值"。如:bottomLeft: -20, 5
autoPositionUpdatefalse是否自动调整提示层的位置
autoHidePromptfalse是否自动隐藏提示信息
autoHideDelay100000自动隐藏提示信息的延迟时间 (ms)
fadeDuration0.3隐藏提示信息淡出的时间
addPromptClass''给提示信息增加 class
Ciaoca 增强版中,增加样式如下:
'formError-noArrow' -- 无箭头样式
'formError-text' -- 纯文字样式
'formError-small' -- 精简版样式
'formError-white' -- 白色版样式
可以叠加使用,如:addPromptClass: 'formError-noArrow formError-small'
custom_error_messages{}自定义错误信息内容 [Demo]
maxErrorsPerFieldfalse单个元素显示错误提示的最大数量,值设为数值。默认 false 表示不限制。
showOneMessagefalse是否只显示一个提示信息
doNotShowAllErrosOnSubmitfalse在提交表单时不显示所有的错误信息(建议使用参数 showOneMessage 替代)
addSuccessCssClassToField''验证通过时,给控件增加 class,当再次验证失败时,会去除。
addFailureCssClassToField''验证失败时,给控件增加 class,当再次验证通过时,会去除。
prettySelectfalse是否使用了美化过的 select 选择控件 [Demo]
onFieldSuccessfalse控件验证通过时的回调函数
function(field){}
onFieldFailurefalse控件验证失败时的回调函数
function(field){}
onSuccessfalse在表单验证结果为通过时的回调函数
onFailurefalse在表单验证结果为失败时的回调函数
PS:onSuccess 和 onFailure 请参考 [Demo]
onValidationCompletefalse表单提交验证完成时的回调函数 [Demo]
function(form, valid){},参数:
form:表单元素
valid:验证结果(ture or false)
PS:使用此方法后,表单即使验证通过也不会进行提交,交给定义的回调函数进行操作。
ajaxFormValidationfalse是否使用 Ajax 提交表单(默认使用 GET 方式发送数据)
ajaxFormValidationURLfalse设置 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{}
isErrorfalse
InvalidFields[]
isOverflownfalse表单是否在溢出滚动的元素内(即外部元素设置了 overflow:scroll)
PS:设置为 ture 后,提示内容的插入位置将更改为在验证的控件之前插入;
此时需要在控件外层再套一个元素,并设置 class="inputContainer"
overflownDIV''设置了溢出滚动的元素,格式为 jQuery 的选择器。
usePrefix''使用 ID 前缀
useSuffix''使用 ID 后缀
validateAttribute'class'存放验证规则的属性
bindMethod'bind'
inlineAjaxfalse

HTML5 属性[td]
属性名称
说明
data-validation-engine
设置验证规则
除了使用 class 设置验证规则外,也可以使用该属性来设置验证规则。
data-validation-placeholder
占位符
当位置为必填的控件验证时,值不能为空,也不能为占位符。
data-prompt-position
自定义提示信息的位置,可设置为:"topRight", "topLeft", "bottomRight" "bottomLeft", "centerRight", "centerLeft", "inline"
可设置更具体的位置,格式为:"方向:X偏移值,Y偏移值"。如:data-prompt-position="bottomLeft:20,5"
PS:偏移值可以为负数
data-prompt-target
载入提示信息的容器,值为元素的 id
仅在 promptPosition 或 data-prompt-position 设为 "inline" 是有效。


错误信息属性(实验的)
属性值与验证规则相对应
<!-- 自定义错误信息属性(实验支持) -->  <input type="email" name="email" id="email" data-validation-engine="validate[required,customdata-errormessage-value-missing="E-mail 不能为空"    data-errormessage-custom-error="E-mail 格式应为:[email]someone@nowhere.com">]"   data-errormessage-value-missing="E-mail 不能为空"    data-errormessage-custom-error="E-mail 格式应为:[email]someone@nowhere.com"    data-errormessage="通用的错误提示信息">  [td]
属性名称
对应验证规则
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
data-errormessage通用的错误提示信息

API 接口[td]
名称
示例
说明
attach$('#form_id').validationEngine('attach');绑定表单验证
detach$('#form_id').validationEngine('detach');移除表单验证
validatealert($('#id').validationEngine('validate'));验证控件或表单,返回结果 true 或 false
showPrompt$('#id').validationEngine('showPrompt','提示内容','load'); 在该元素上创建一个提示,3 种状态:'pass', 'error', 'load'
hide$('#id').validationEngine('hide');隐藏改元素及元素内的提示
hideAll$('#id').validationEngine('hideAll');隐藏页面上的所有提示
updatePromptsPosition$('#form_id').validationEngine('updatePromptsPosition')更新提示层的位置

自定义事件
插件增加的自定义事件,可参考 [Demo]
[td]
名称
示例
说明
jqv.form.validating$('#form_id').bind('jqv.form.validating', function(event){});表单验证时
jqv.form.result$('#form_id').bind('jqv.form.result', function(event, errorFound){});表单验证完成。返回参数说明:
errorFound:表单验证不通过(true 或 false)

jqv.field.result$('#field_id').bind('jqv.field.result', function(event, field, isError, promptText){}); 单个控件验证完成。返回参数说明:
field:控件对象
isError:控件验证不通过(true 或 false)
promptText:提示信息


0 个回复

您需要登录后才可以回帖 登录 | 加入黑马