jQuery Validation Engine 表单验证
来源:互联网 发布:手机号码短信接收软件 编辑:程序博客网 时间:2024/05/17 22:26
转载至:http://code.ciaoca.com/jquery/validation_engine/
功能强大的 jQuery 表单验证插件,适用于日常的 E-mail、电话号码、网址等验证及 Ajax 验证,除自身拥有丰富的验证规则外,还可以添加自定义的验证规则。
兼容 IE 6+, Chrome, Firefox, Safari, Opera 10+
- 版本:
- jQuery v1.7+
- jQuery Validation Engine v2.6.2
- 注意事项:
- 相对 2.2.4 的版本也有较大改动,插件升级请检查原程序
- Validation Engine 2.2.4 中文文档
- 相对 2.2.4 版本的一些区别:
- 部分参数功能发生变化;
- 输入控件可以不写 id 属性;
- 参数 onSuccess 和 onFailure 改为只在表单提交时触发;
- 验证规则 past[date](过去) 与 future[date](未来) 对调;
- API 接口验证控件均使用 "validate",移除 "validateField";
- API 接口隐藏提示均使用 "hide" 移除 "hidePrompt",保留 "hideAll"。
- Ciaoca 中文增强版:
- 根据中文字体优化样式
- 增加多款验证样式
- 增加针对中文的验证规则
- 移除无用的验证规则示例
- 修复 IE8 以下的支持(错误:对象不支持“indexOf”属性或方法)
查看 Demo
修改版:jQuery Validation Engine v2.6.2 By Ciaoca
原 版:jQuery Validation Engine v2.6.2
【文档目录】
【使用方法】
载入 CSS 文件
<link rel="stylesheet" href="css/validationEngine.jquery.css">
载入 JavaScript 文件
<script src="js/jquery.js"></script> <script src="js/jquery.validationEngine-zh_CN.js"></script> <script src="js/jquery.validationEngine.js"></script> <!-- jquery.validationEngine-zh_CN.js 为配置文件,可根据需求自行调整或增加,也可以更换为其他语言配置文件 -->
给表单加上 ID
<!-- ID 须设置在 form 标签中 --> <form id="form_id" ...> ... </form>
给控件添加验证类型
<!-- 验证规则默认使用 class 属性 validate[required] 表示该项必须填写 --> <input type="text" class="validate[required]"> <input type="checkbox" class="validate[required]"> <select class="validate[required]"></select>; <textarea class="validate[required]"></textarea>
设置验证
// 直接调用 $("#form_id").validationEngine(); // 自定义参数调用 $("#form_id").validationEngine("attach",{ promptPosition:"centerRight", scroll:false });
支持链式操作
$("#form_id").validationEngine().css({border:"2px solid #000"});
【验证类型】
注:验证规则均写在 validate[] 中,如有多条规则,用英文逗号(,)分割。
例:validate[required,minSize[6],custom[onlyLetterNumber]]
可以依赖多项,如: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)datevalidate[custom[date]]验证日期,格式为 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-DdateFormatvalidate[custom[dateFormat]]验证日期格式,格式为 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-DdateTimeFormatvalidate[custom[dateTimeFormat]]验证日期及时间格式,格式为:YYYY/MM/DD hh:mm:ss AM|PMdateRange[name]validate[dateRange[grp1]]验证 grp1 的值是否符合日期范围(开始日期与结束日期)根据控件的前后位置,如果当前控件在 grp1 元素之后,输入的日期不能是 grp1 日期的过去。
如果当前控件在 grp1 控件之前,输入的日期不能是 grp1 日期的未来。[Demo]
dateTimeRange[name]validate[dateTimeRange[grp1]]验证日期及时间范围,增加了时间的对比,其他的和 dateRange 一样。past[date]validate[past[2012/12/20]]日期必需是 date 或 date 的过去。date 格式可写作 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D 或 nowfuture[date]validate[future[now]]日期必须是 data 或 date 的未来。date 格式可写作 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D 或 nowequalsvalidate[equals[id]]当前控件的值需与控件 id 的值相同numbervalidate[custom[number]]验证数字integervalidate[custom[integer]]验证整数phonevalidate[custom[phone]]验证电话号码emailvalidate[custom[email]]验证 E-mail 地址urlvalidate[custom[url]]验证 url 地址,需以 http://、https:// 或 ftp:// 开头ipv4validate[custom[ipv4]]验证 ipv4 地址onlyNumberSpvalidate[custom[onlyNumberSp]]只接受填数字和空格onlyLetterSpvalidate[custom[onlyLetterSp]]只接受填英文字母、单引号(')和空格onlyLetterNumbervalidate[custom[onlyLetterNumber]]只接受数字和英文字母custom[其他规则]validate[custom[ruleName]]自定义规则验证"ruleName":{
"regex":/*正则表达式*/,
"alertText":"验证不通过时的提示信息"
}
ajaxvalidate[ajax[ajaxName]]自定义 ajax 验证"ajaxName":{
"url":"phpajax/ajaxValidateFieldUser.php", /*验证程序地址*/
"extraData":"name=eric", /*额外参数*/
"alertTextOk":"验证通过时的提示信息",
"alertText":"验证不通过时的提示信息",
"alertTextLoad":"正在验证时的提示信息"
}
传输方式:get
传递参数:"fieldId=" + field.attr("id") + "&fieldValue=" + field.val() + "&extraData=" + extraData
返回数据格式:json
返回数据内容:[String,Boolean]
第一个值类型为 String,是接收到 fieldId 的值;
第二个值类型为 Boolean,验证通过返回 true,不通过返回 false
具体请参考 [Demo]
funcCallvalidate[funcCall[functionName]]调用外部函数验证functionName(field, rules, i, options)
Ciaoca 增强版增加验证规则:
【options 参数说明】
PS:如果希望只在表单提交时验证,可以设置为空。或者设置参数 binded:false
bindedtrue是否绑定即时验证scrolltrue屏幕自动滚动到第一个验证不通过的位置。focusFirstFieldtrue验证未通过时,是否给第一个不通过的控件获取焦点。validateNonVisibleFieldsfalse是否验证不可见的元素(如多个输入控件在选项卡切换中)showPromptstrue是否显示提示信息showArrowtrue是否显示提示信息的箭头promptPosition"topRight"提示信息的位置,可设置为:"topRight", "topLeft", "bottomRight" "bottomLeft", "centerRight", "centerLeft", "inline"
可设置更具体的位置,格式为:"方向:X偏移值,Y偏移值"。如:bottomLeft:-20,5
autoPositionUpdatefalse是否自动调整提示层的位置autoHidePromptfalse是否自动隐藏提示信息autoHideDelay100000自动隐藏提示信息的延迟时间(单位:ms)fadeDuration0.3隐藏提示信息淡出的时间addPromptClass""给提示信息增加 classCiaoca 增强版中,增加样式如下:
"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 属性】
设置验证规则
除了使用 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,custom[email]]" data-errormessage-value-missing="E-mail 不能为空" data-errormessage-custom-error="E-mail 格式应为:someone@nowhere.com" data-errormessage="通用的错误提示信息">
- required
- groupRequired
- condRequired
- past
- future
- dateRange
- dateTimeRange
- creditCard
- equals
- minSize
- min
- minCheckbox
- maxSize
- max
- maxCheckbox
- custom
- ajax
- funcCall
【API 接口】
【自定义事件】
插件增加的自定义事件,可参考 [Demo]
errorFound:表单是否通过验证(true 或 false)
jqv.field.result$("#field_id").bind("jqv.field.result",function(event,field,isError,promptText){...});单个控件验证完成。返回参数说明:field:控件对象
isError:控件是否通过验证(true 或 false)
promptText:提示信息
相关信息
作者网站:http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/
相关文档:Github 中文文档
授权协议:MIT
- jQuery Validation Engine 表单验证
- jQuery Validation Engine 表单验证
- jQuery Validation Engine 表单验证
- jQuery Validation Engine 表单验证
- jQuery Validation Engine 表单验证
- jQuery Validation Engine 表单验证
- jQuery Validation Engine 表单验证
- jQuery Validation Engine 表单验证
- jQuery Validation Engine 表单验证
- jQuery Validation Engine 表单验证
- jQuery Validation Engine 表单验证
- jQuery Validation Engine 表单验证
- jQuery Validation Engine 表单验证
- jQuery Validation Engine 表单验证
- jQuery Validation Engine 表单验证
- jQuery Validation Engine 表单验证
- jquery validation Engine表单验证
- Form表单验证用户名jQuery-Validation-Engine
- TextView使用超链接去掉下划线
- Java 格式化时间 SimpleDateFormat
- 常用正则表达式大全,手机、电话、邮箱、身份证(最严格的验证)、IP地址、网址、日期等,一般前台js验证
- iOS学习笔记——导航栏与标签栏结合
- Python 的VIM 的简单设置
- jQuery Validation Engine 表单验证
- Error: Socket descriptor not found. Hint: the problem might be solved applyi...
- android项目目录说明
- android下MediaPlayer的使用
- Android精美登录界面设计
- android_基础_java回调函数
- 在CentOS下编译最新CUDA5.5例子代码出错解决办法
- IOS中线程与进程的概念
- Android仿微信气泡聊天界面设计