分享一款功能强大的 jQuery 表单验证插件，适用于日常的 E-mail、电话号码、网址等验证及 Ajax 验证，除自身拥有丰富的验证规则外，还可以添加自定义的验证规则。

兼容 IE 6+, Chrome, Firefox, Safari, Opera 10+

完善对 IE8 以下浏览器的支持（错误：对象不支持“indexOf”属性或方法）
使用方法载入 CSS 文件
参数说明[td]

名称	默认值	说明
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

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');	移除表单验证
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')	更新提示层的位置

自定义事件

插件增加的自定义事件，可参考 [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：提示信息

分享一款功能强大的 jQuery 表单验证插件，适用于日常的 E-mail、电话号码、网址等验证及 Ajax 验证，除自身拥有丰富的验证规则外，还可以添加自定义的验证规则。

兼容 IE 6+, Chrome, Firefox, Safari, Opera 10+

完善对 IE8 以下浏览器的支持（错误：对象不支持“indexOf”属性或方法）
使用方法载入 CSS 文件
参数说明[td]

名称	默认值	说明
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

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');	移除表单验证
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')	更新提示层的位置

自定义事件

插件增加的自定义事件，可参考 [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：提示信息