jQuery Validation Engine 表单验证
- ·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文件进行合并
修改版：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, livePS：设置 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”) | 更新提示层的位置 |
近期评论