名称 | 默认值 | 说明 |
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 |
属性名称 | 说明 |
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" 是有效。 |
属性名称 | 对应验证规则 |
data-errormessage-value-missing |
|
data-errormessage-type-mismatch |
|
data-errormessage-pattern-mismatch |
|
data-errormessage-range-underflow |
|
data-errormessage-range-overflow |
|
data-errormessage-custom-error |
|
data-errormessage | 通用的错误提示信息 |
名称 | 示例 | 说明 |
attach | $('#form_id').validationEngine('attach'); | 绑定表单验证 |
detach | $('#form_id').validationEngine('detach'); | 移除表单验证 |
validate | alert($('#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') | 更新提示层的位置 |
名称 | 示例 | 说明 |
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:提示信息 |
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) | 黑马程序员IT技术论坛 X3.2 |