validationengine
validationEngine
- ·jQuery v1.4.4+
注意事项:
1.演示版本为 v2.2.4;
2.v2.0 以下的版本参数并不完全通用;
对 validationEngine.jquery.css 文件进行修改,修改如下:
1.提示内容字体改为宋体;
2.去除中各浏览器的私有属性(各浏览器已经支持圆角和阴影,不再需要加私有属性)。
对 jquery.validationEngine.js 文件进行修改,修改如下:
1.将 312 行的 field.focus(); 注释掉,当有输入控件在 Table 内部时,验证会导致回到顶部的现象;
对 jquery.validationEngine-zh_CN.js 文件进行修改,修改如下:
1.修改部分提示文字;
2.增加两个对中文字符的验证规则:minSizeCN 和 maxSizeCN;
3.去除 "validate2fields": {"alertText":"* 请输入 HELLO"},
将以上两个JS文件进行合并
查看 Demo
修改版:jQuery Validation Engine v2.2.4 中文版
原 版:jQuery Validation Engine v2.2.4
【options 参数说明】(可选)
名称 | 默认值 | 说明 |
---|---|---|
validationEventTrigger | "blur" | 触发验证的事件,支持事件可参考 jQuery 的事件说明。
PS:如果希望只在表单提交时验证,可以设置为空。 |
scroll | true | 屏幕自动滚动到第一个验证不通过的位置 |
focusFirstField | true | 验证未通过时,是否给第一个不通过的控件获取焦点 |
promptPosition | "topRight" | 验证提示信息的位置,可设置为:"topRight", "bottomLeft", "centerRight", "bottomRight" |
autoPositionUpdate | false | 是否自动调整提示层的位置 |
bindMethod | "bind" | 验证事件的绑定方式,可设置为:bind, live
PS:设置 live 似乎绑定事件无效,但是表单提交时能验证,建议不修改。[Demo] |
binded | false | 是否已经绑定其他事件,设为 true 将不进行验证。 |
inlineAjax | false | |
ajaxFormValidation | false | 使用 Ajax 验证表单 |
ajaxFormValidationURL | false | 设置 Ajax 验证的 URL,默认使用 form 的 action 属性 |
ajaxValidcache | {} | |
onAjaxFormComplete | $.noop | 表单提交,Ajax 验证完成后的行为(Function)[Demo] |
onBeforeAjaxFormValidation | $.noop | 表单提交验证规则通过后,Ajax 验证之前的行为(Function)[Demo] |
onValidationComplete | false | 表单提交验证完成时的行为(Function)
可以得到两个参数:表单元素 和 验证结果(ture or false)[Demo] |
onSuccess | false | 实时验证所有项目都通过时,发生的行为(Function)[Demo] |
onFailure | false | 实时验证有未通过项目时,发生的行为(Function)[Demo]
PS:onSuccess 和 onFailure 在禁用实时验证时无效。例如 validationEventTrigger 设为空,或 bindMethod 设为 live |
isOverflown | false | 表单是否在溢出滚动的元素内(即外部元素设置了 overflow:scroll)
PS:设置为 ture 后,提示内容的插入位置将更改为在验证的控件之前插入; 此时需要在控件外层再套一个元素,并设置 class="inputcontainer" |
overflownDIV | "" | 设置了溢出滚动的元素,格式为 jQuery 的选择器。 |
showArrow | true | |
isERROR | false | |
InvalidFields | [] |
【使用方法】
载入 CSS 文件
<link rel="stylesheet" href="css/validationEngine.jquery.css">
载入 javaScript 文件
<script src="js/jquery.validationEngine.js"></script>
<script src="js/jquery.validationEngine-zh_CN.js"></script>
<!--
jquery.validationEngine-zh_CN.js 该文件为提示文字和自定义验证规则;
修改版已经将这两个文件合并,只需要载入 jquery.validationEngine.js;
另外,jQuery 插件当然还需要载入 jQuery 库,版本需在 jQuery 1.4.4 以上。
-->
给表单加上 ID
<form id="form_id" ...>
...
</form>
<!-- ID 必须设置在 Form 标签中,否则无效 -->
给控件加上 ID 及 设置验证类型
<input id="test_1" name="test_1" type="text" class="validate[required]">
<input id="test_2" name="test_2" type="checkbox" class="validate[required]">
<textarea id="test_3" name="test_3" class="validate[required]"><textarea>
<!--
validate[required] 表示必须填写
控件必须要设置 ID,但并不要求与 Name 相同
-->
设置验证
// 直接调用
$("#form_id").validationEngine();
// 自定义参数调用
$("#form_id").validationEngine("attach",{
promptPosition:"centerRight",
scroll:false
});
【验证类型】
<!--
注:验证规则均写在 validate[] 中,如有多条规则,用英文逗号(,) 分割。
例:validate[required,minSize[6],custom[onlyLetterNumber]]
-->
名称 | 示例 | 说明 |
---|---|---|
required | validate[required] | 表示必填项 |
optional | validate[optional] | 表示可选项。若不输入,不要求必填,若有输入,则验证其是否符合要求。 |
dateRange[name] | validate[dateRange[grp1]] | 验证日期范围 |
dateTimeRange[name] | validate[dateTimeRange[grp1]] | 验证日期及时间范围 |
minSize[int] | validate[minSize[6]] | 最少输入字符数 |
maxSize[int] | validate[maxSize[20]] | 最多输入字符数 |
groupRequired[name] | validate[groupRequired[grp2]] | 群组中至少输入一项 |
min[int] | validate[min[1]] | 最小值(该项为数字的最小值,注意与 minSize 的区分) |
max[int] | validate[max[9999]] | 最大值(该项为数字的最大值,注意与 maxSize 的区分) |
past[date] | validate[past[2012/12/20]] | 日期必需在 date 或 date 的未来。date 格式可写作 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D 或 now |
future[date] | validate[future[now]] | 日期必须在 data 或 date 的过去。date 格式可写作 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D 或 now |
maxCheckbox[int] | validate[maxCheckbox[2]] | 最多选取的项目数(用于Checkbox) |
minCheckbox | validate[minCheckbox[2]] | 最少选取的项目数(用于Checkbox) |
equals | validate[equals[id]] | 当前控件值需与 id 这个控件的值相同 |
phone | validate[custom[phone]] | 验证电话号码 |
validate[custom[email]] | 验证 Email 地址 | |
integer | validate[custom[integer]] | 验证整数 |
number | validate[custom[number]] | 验证数字 |
date | validate[custom[date]] | 验证日期,格式为 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D |
dateFormat | validate[custom[dateFormat]] | 验证日期格式,格式为 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D |
dateTimeFormat | validate[custom[dateTimeFormat]] | 验证日期及时间格式,格式为:YYYY/MM/DD hh:mm:ss AM|PM |
ipv4 | validate[custom[ipv4]] | 验证 ipv4 地址 |
url | validate[custom[url]] | 验证 url 地址,需以 http://、https:// 或 ftp:// 开头 |
onlyNumberSp | validate[custom[onlyNumberSp]] | 只接受填数字和空格 |
onlyLetterSp | validate[custom[onlyLetterSp]] | 只接受填英文字母(大小写)和单引号(') |
onlyLetterNumber | validate[custom[onlyLetterNumber]] | 只接受数字和英文字母 |
ajax | validate[ajax[ajaxUserCallPhp]] | 在验证规则中自定义
"ajaxUserCallPhp":{ "url":"phpajax/ajaxValidateFieldUser.php", "extraData":"name=eric", "alertTextOk":"* 此帐号名称可以使用", "alertText":"* 此名称已被其他人使用", "alertTextLoad":"* 正在确认帐号名称是否有其他人使用,请稍等。" } |
funcCall | validate[funcCall[functionName]] | 调用外部函数 |
【API 方法】
名称 | 示例 | 说明 |
---|---|---|
attach | $("#form_id").validationEngine("attach"); | 注册表单验证事件 |
detach | $("#form_id").validationEngine("detach"); | 取消注册表单验证事件 |
validate | alert($("#form_id").validationEngine("validate")); | 验证表单,返回结果 true 或 false |
validateField | alert($("#form_id").validationEngine("validateField","#element_id")); | 验证单个控件,返回结果 true 或 false |
showPrompt | $("#element_id").validationEngine("showPrompt","提示内容","load"); | 在该元素上创建一个提示内容,3 种状态:"pass", "error", "load" |
hidePrompt | $("#element_id").validationEngine("hidePrompt"); | 隐藏该元素的提示内容 |
hide | $("#form_id").validationEngine("hide"); | 关闭表单中的提示 |
hideAll | $("#form_id").validationEngine("hideAll"); | 关闭页面上的所有提示 |
updatePromptsPosition | $("#form_id").validationEngine("updatePromptsPosition") | 更新提示层的位置 |
相关阅读
HTML头部 head元素用于定义文档的头部信息,出现在 <head>...</head> 标签之间的内容,是文档的头部信息。头部定义的内容不会在浏览
Excel中,表格跟计算公式混合着用是最为常见的一种手段,接下来请欣赏seo实验室小编给大家网络收集整理的excel表格计算公式的教程,希
socket编程是网络常用的编程,我们通过在网络中创建socket关键字来实现网络间的通信,通过收集大量的资料,通过这一章节,充分的了解sock
Mysql配置文件my.cnf 安装了mysql没有my.cnf文件的情况 1、可以把mysql的示例配置文件,如my-medium.cnf拷贝到/etc/my.cnf,再去修改
Socket的来龙去脉 下面的分析主要是参阅了计算机网络(谢希仁第7版)进行总结的,从系统调用—>应用编程接口API—>套接字接口来分析So