api 文档:http://code.ciaoca.com/jquery/validation-engine/
一.环境
1.下载jquery-validation-Engine 包
2.引入 js文件
<script type="text/javascript" src='<c:url value="/static/comp/jquery/jquery-1.8.2.min.js"></c:url>'/></script> <script type="text/javascript" src='<c:url value="/static/comp/jQuery-Validation-Engine/js/jquery.validationEngine.js"></c:url>'/></script> <script type="text/javascript" src='<c:url value="/static/comp/jQuery-Validation-Engine/js/languages/jquery.validationEngine-zh_CN.js"></c:url>'/></script>
3、引入css文件
<link type="text/css" rel="stylesheet" href='<c:url value="/static/comp/jQuery-Validation-Engine/css/validationEngine.jquery.css"></c:url>'>
<link type="text/css" rel="stylesheet" href='<c:url value="/static/comp/jQuery-Validation-Engine/css/template.css"></c:url>'>
二.举例
1.jsp页面代码
<form id="userForm" name="userForm" action="/radio/user/addUser" method = "post"> 姓名:<input id="userName" type="text" name="userName" class="validate[required,custom[userName],ajax[validateUserName]]"> <input type="submit" value="添加" /> </form>
2.js 文件
$(function(){ $("#userForm").validationEngine(); }); $.validationEngineLanguage.allRules.userName = { "regex": /^\w{1,5}$/, "alertText": "* 1到5个字母、数字、下划线" }; $.validationEngineLanguage.allRules.validateUserName = { "url": '/radio/user/validateUserName', "alertTextLoad": "* 正在确认用户名是否有其他人使用,请稍等。", "alertText": "* 此用户名已被其他人使用" };
3.如需改变 提示框位置:
验证提示信息的位置,可设置为:"topRight", "bottomLeft", "centerRight", "bottomRight"
$(function(){ $("#userForm").validationEngine( { promptPosition:"centerRight" } ); });
说明:jquery-validation-Engine 可以通过$.validationEngineLanguage.allRules 自定义 验证规则 或 ajax验证
规则:
validate[required] 必填项
validate[required,custom[integer]] 必传且 为整数
validate[maxSize[50]] 最大50个字符
注:验证规则均写在 validate[] 中,如有多条规则,用英文逗号(,)分割。
例:validate[required,minSize[6],custom[onlyLetterNumber]]
名称 | 示例 | 说明 |
---|---|---|
required | validate[required] | 表示必填项 |
groupRequired[string] | validate[groupRequired[grp]] | 在验证组为 grp 的群组,中至少输入或选择一项 |
condRequired[string] | validate[condRequired[ids]] | 当 ids 的某个控件不为空时,那么该控件也为必填项。 可以依赖多项,如: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) |
date[string] | validate[custom[date]] | 验证日期,格式为 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D |
dateFormat[string] | validate[custom[dateFormat]] | 验证日期格式,格式为 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D |
dateTimeFormat[string] | validate[custom[dateTimeFormat]] | 验证日期及时间格式,格式为:YYYY/MM/DD hh:mm:ss AM|PM |
dateRange[string] | validate[dateRange[grp1]] | 验证 grp1 的值是否符合日期范围(开始日期与结束日期) 根据控件的前后位置,如果当前控件在 grp1 元素之后,输入的日期不能是 grp1 日期的过去。 如果当前控件在 grp1 控件之前,输入的日期不能是 grp1 日期的未来。[Demo] |
dateTimeRange[string] | validate[dateTimeRange[grp1]] | 验证日期及时间范围,增加了时间的对比,其他的和 dateRange 一样。 |
past[string] | validate[past[2012/12/20]] | 日期必需是 date 或 date 的过去。date 格式可写作 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D 或 now |
future[string] | validate[future[now]] | 日期必须是 data 或 date 的未来。date 格式可写作 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D 或 now |
equals[string] | validate[equals[id]] | 当前控件的值需与控件 id 的值相同 |
number | validate[custom[number]] | 验证数字 |
integer | validate[custom[integer]] | 验证整数 |
phone | validate[custom[phone]] | 验证电话号码 |
validate[custom[email]] | 验证 E-mail 地址 | |
url | validate[custom[url]] | 验证 url 地址,需以 http://、https:// 或 ftp:// 开头 |
ipv4 | validate[custom[ipv4]] | 验证 ipv4 地址 |
onlyNumberSp | validate[custom[onlyNumberSp]] | 只接受填数字和空格 |
onlyLetterSp | validate[custom[onlyLetterSp]] | 只接受填英文字母、单引号(')和空格 |
onlyLetterNumber | validate[custom[onlyLetterNumber]] | 只接受数字和英文字母 |
custom[自定义规则] | validate[custom[ruleName]] | 自定义规则验证 |
ajax | validate[ajax[ajaxName]] | 自定义 ajax 验证 传输方式:get 传递参数:"fieldId=" + field.attr("id") + "&fieldValue=" + field.val() 额外参数:extraData 可以设置为字符串或对象,会在参数结尾追加 "&extraData" 返回数据格式:json 返回数据内容:[String,Boolean] 第一个值类型为 String,是接收到 fieldId 的值; 第二个值类型为 Boolean,验证通过返回 true,不通过返回 false 具体请参考 [Demo] |
funcCall | validate[funcCall[functionName]] | 调用外部函数验证 functionName(field, rules, i, options) |