jquery-validation-Engine 插件应用

 

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]]	验证电话号码
email	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]]	自定义规则验证 'ruleName': { 'regex': RegExp, /* 正则表达式，如果正则能匹配内容表示通过 */ 'alertText': '验证不通过时的提示信息' }
ajax	validate[ajax[ajaxName]]	自定义 ajax 验证 'ajaxName': { 'url': 'phpajax/ajaxValidateFieldUser.php', /* 验证程序地址 */ 'extraData': 'name=eric', /* 额外参数 */ 'alertTextOk': '验证通过时的提示信息', 'alertText': '验证不通过时的提示信息', 'alertTextLoad': '正在验证时的提示信息' } /* * 例： * <input type="text" id="email" class="validate[ajax[ajaxName]]"> * 假设填写的值为：[e-mail] * extraData 设置为：'type=register&verify=abcd' * 提交到后端的 url 为：phpajax/ajaxValidateFieldUser.php?email=[e-mail]&type=register&verify=abcd */ 传输方式：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)