html中表单的校验的插件,jquery表单验证插件validationEngine「建议收藏」
html中表单的校验的插件,jquery表单验证插件validationEngine「建议收藏」
插件的特色：
封装强悍、例子充足(基本都验证类型都被囊括)、调用轻便
注意事项：
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文件进行合并
【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 文件
载入 JavaScript 文件
给表单加上 ID
…
给控件加上 ID 及 设置验证类型
设置验证
// 直接调用
$(“#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”)
更新提示层的位置
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/188176.html原文链接：https://javaforall.cn