jQuery Validation Engine 表单验证

清疚 2022-08-13 13:47 250阅读 0赞

注意事项：

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][Demo]

修改版：[jQuery Validation Engine v2.2.4 中文版][jQuery Validation Engine v2.2.4]

原　版：[jQuery Validation Engine v2.2.4][jQuery Validation Engine v2.2.4 1]

## 【options 参数说明】（可选） ##

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>默认值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>validationEventTrigger</td> 
   <td>"blur"</td> 
   <td>触发验证的事件，支持事件可参考 jQuery 的事件说明。 <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> PS：如果希望只在表单提交时验证，可以设置为空。</p> </td> 
  </tr> 
  <tr> 
   <td>scroll</td> 
   <td>true</td> 
   <td>屏幕自动滚动到第一个验证不通过的位置</td> 
  </tr> 
  <tr> 
   <td>focusFirstField</td> 
   <td>true</td> 
   <td>验证未通过时，是否给第一个不通过的控件获取焦点</td> 
  </tr> 
  <tr> 
   <td>promptPosition</td> 
   <td>"topRight"</td> 
   <td>验证提示信息的位置，可设置为："topRight", "bottomLeft", "centerRight", "bottomRight"</td> 
  </tr> 
  <tr> 
   <td>autoPositionUpdate</td> 
   <td>false</td> 
   <td>是否自动调整提示层的位置</td> 
  </tr> 
  <tr> 
   <td>bindMethod</td> 
   <td>"bind"</td> 
   <td>验证事件的绑定方式，可设置为：bind, live <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> PS：设置 live 似乎绑定事件无效，但是表单提交时能验证，建议不修改。<a href="http://code.ciaoca.com/jquery/validation_engine/demo/demos/demoLiveEvent.html" style="color:rgb(202,0,0); text-decoration:none" rel="nofollow">[Demo]</a></p> </td> 
  </tr> 
  <tr> 
   <td>binded</td> 
   <td>false</td> 
   <td>是否已经绑定其他事件，设为 true 将不进行验证。</td> 
  </tr> 
  <tr> 
   <td>inlineAjax</td> 
   <td>false</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>ajaxFormValidation</td> 
   <td>false</td> 
   <td>使用 Ajax 验证表单</td> 
  </tr> 
  <tr> 
   <td>ajaxFormValidationURL</td> 
   <td>false</td> 
   <td>设置 Ajax 验证的 URL，默认使用 form 的 action 属性</td> 
  </tr> 
  <tr> 
   <td>ajaxValidCache</td> 
   <td>{}</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>onAjaxFormComplete</td> 
   <td>$.noop</td> 
   <td>表单提交，Ajax 验证完成后的行为（Function）<a href="http://code.ciaoca.com/jquery/validation_engine/demo/demos/demoAjaxSubmitPHP.html" style="color:rgb(202,0,0); text-decoration:none" rel="nofollow">[Demo]</a></td> 
  </tr> 
  <tr> 
   <td>onBeforeAjaxFormValidation</td> 
   <td>$.noop</td> 
   <td>表单提交验证规则通过后，Ajax 验证之前的行为（Function）<a href="http://code.ciaoca.com/jquery/validation_engine/demo/demos/demoAjaxSubmitPHP.html" style="color:rgb(202,0,0); text-decoration:none" rel="nofollow">[Demo]</a></td> 
  </tr> 
  <tr> 
   <td>onValidationComplete</td> 
   <td>false</td> 
   <td>表单提交验证完成时的行为（Function） <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> 可以得到两个参数：表单元素 和 验证结果（ture or false）<a href="http://code.ciaoca.com/jquery/validation_engine/demo/demos/demoValidationComplete.html" style="color:rgb(202,0,0); text-decoration:none" rel="nofollow">[Demo]</a></p> </td> 
  </tr> 
  <tr> 
   <td>onSuccess</td> 
   <td>false</td> 
   <td>实时验证所有项目都通过时，发生的行为（Function）<a href="http://code.ciaoca.com/jquery/validation_engine/demo/demos/demoLiveStatus.html" style="color:rgb(202,0,0); text-decoration:none" rel="nofollow">[Demo]</a></td> 
  </tr> 
  <tr> 
   <td>onFailure</td> 
   <td>false</td> 
   <td>实时验证有未通过项目时，发生的行为（Function）<a href="http://code.ciaoca.com/jquery/validation_engine/demo/demos/demoLiveStatus.html" style="color:rgb(202,0,0); text-decoration:none" rel="nofollow">[Demo]</a> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> PS：onSuccess 和 onFailure 在禁用实时验证时无效。例如 validationEventTrigger 设为空，或 bindMethod 设为 live</p> </td> 
  </tr> 
  <tr> 
   <td>isOverflown</td> 
   <td>false</td> 
   <td>表单是否在溢出滚动的元素内（即外部元素设置了 overflow:scroll） <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> PS：设置为 ture 后，提示内容的插入位置将更改为在验证的控件之前插入；</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> 　　此时需要在控件外层再套一个元素，并设置 class="inputContainer"</p> </td> 
  </tr> 
  <tr> 
   <td>overflownDIV</td> 
   <td>""</td> 
   <td>设置了溢出滚动的元素，格式为 jQuery 的选择器。</td> 
  </tr> 
  <tr> 
   <td>showArrow</td> 
   <td>true</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>isError</td> 
   <td>false</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>InvalidFields</td> 
   <td>[]</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

## 【使用方法】 ##

### 载入 CSS 文件 ###

### 载入 JavaScript 文件 ###

### 给表单加上 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>

### 设置验证 ###

// 直接调用 
    $("#form_id").validationEngine(); 
     
    // 自定义参数调用 
    $("#form_id").validationEngine("attach",{  
        promptPosition:"centerRight", 
        scroll:false 
    });

## 【验证类型】 ##

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>示例</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>required</td> 
   <td>validate[required]</td> 
   <td>表示必填项</td> 
  </tr> 
  <tr> 
   <td>optional</td> 
   <td>validate[optional]</td> 
   <td>表示可选项。若不输入，不要求必填，若有输入，则验证其是否符合要求。</td> 
  </tr> 
  <tr> 
   <td>dateRange[name]</td> 
   <td>validate[dateRange[grp1]]</td> 
   <td>验证日期范围</td> 
  </tr> 
  <tr> 
   <td>dateTimeRange[name]</td> 
   <td>validate[dateTimeRange[grp1]]</td> 
   <td>验证日期及时间范围</td> 
  </tr> 
  <tr> 
   <td>minSize[int]</td> 
   <td>validate[minSize[6]]</td> 
   <td>最少输入字符数</td> 
  </tr> 
  <tr> 
   <td>maxSize[int]</td> 
   <td>validate[maxSize[20]]</td> 
   <td>最多输入字符数</td> 
  </tr> 
  <tr> 
   <td>groupRequired[name]</td> 
   <td>validate[groupRequired[grp2]]</td> 
   <td>群组中至少输入一项</td> 
  </tr> 
  <tr> 
   <td>min[int]</td> 
   <td>validate[min[1]]</td> 
   <td>最小值（该项为数字的最小值，注意与 minSize 的区分）</td> 
  </tr> 
  <tr> 
   <td>max[int]</td> 
   <td>validate[max[9999]]</td> 
   <td>最大值（该项为数字的最大值，注意与 maxSize 的区分）</td> 
  </tr> 
  <tr> 
   <td>past[date]</td> 
   <td>validate[past[2012/12/20]]</td> 
   <td>日期必需在 date 或 date 的未来。date 格式可写作 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D 或 now</td> 
  </tr> 
  <tr> 
   <td>future[date]</td> 
   <td>validate[future[now]]</td> 
   <td>日期必须在 data 或 date 的过去。date 格式可写作 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D 或 now</td> 
  </tr> 
  <tr> 
   <td>maxCheckbox[int]</td> 
   <td>validate[maxCheckbox[2]]</td> 
   <td>最多选取的项目数（用于Checkbox）</td> 
  </tr> 
  <tr> 
   <td>minCheckbox</td> 
   <td>validate[minCheckbox[2]]</td> 
   <td>最少选取的项目数（用于Checkbox）</td> 
  </tr> 
  <tr> 
   <td>equals</td> 
   <td>validate[equals[id]]</td> 
   <td>当前控件值需与 id 这个控件的值相同</td> 
  </tr> 
  <tr> 
   <td>phone</td> 
   <td>validate[custom[phone]]</td> 
   <td>验证电话号码</td> 
  </tr> 
  <tr> 
   <td>email</td> 
   <td>validate[custom[email]]</td> 
   <td>验证 Email 地址</td> 
  </tr> 
  <tr> 
   <td>integer</td> 
   <td>validate[custom[integer]]</td> 
   <td>验证整数</td> 
  </tr> 
  <tr> 
   <td>number</td> 
   <td>validate[custom[number]]</td> 
   <td>验证数字</td> 
  </tr> 
  <tr> 
   <td>date</td> 
   <td>validate[custom[date]]</td> 
   <td>验证日期，格式为 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D</td> 
  </tr> 
  <tr> 
   <td>dateFormat</td> 
   <td>validate[custom[dateFormat]]</td> 
   <td>验证日期格式，格式为 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D</td> 
  </tr> 
  <tr> 
   <td>dateTimeFormat</td> 
   <td>validate[custom[dateTimeFormat]]</td> 
   <td>验证日期及时间格式，格式为：YYYY/MM/DD hh:mm:ss AM|PM</td> 
  </tr> 
  <tr> 
   <td>ipv4</td> 
   <td>validate[custom[ipv4]]</td> 
   <td>验证 ipv4 地址</td> 
  </tr> 
  <tr> 
   <td>url</td> 
   <td>validate[custom[url]]</td> 
   <td>验证 url 地址，需以 http://、https:// 或 ftp:// 开头</td> 
  </tr> 
  <tr> 
   <td>onlyNumberSp</td> 
   <td>validate[custom[onlyNumberSp]]</td> 
   <td>只接受填数字和空格</td> 
  </tr> 
  <tr> 
   <td>onlyLetterSp</td> 
   <td>validate[custom[onlyLetterSp]]</td> 
   <td>只接受填英文字母（大小写）和单引号(')</td> 
  </tr> 
  <tr> 
   <td>onlyLetterNumber</td> 
   <td>validate[custom[onlyLetterNumber]]</td> 
   <td>只接受数字和英文字母</td> 
  </tr> 
  <tr> 
   <td>ajax</td> 
   <td>validate[ajax[ajaxUserCallPhp]]</td> 
   <td>在验证规则中自定义 <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> "ajaxUserCallPhp":{ </p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> "url":"phpajax/ajaxValidateFieldUser.php",</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> "extraData":"name=eric",</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> "alertTextOk":"* 此帐号名称可以使用",</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> "alertText":"* 此名称已被其他人使用",</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> "alertTextLoad":"* 正在确认帐号名称是否有其他人使用，请稍等。"</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> }</p> </td> 
  </tr> 
  <tr> 
   <td>funcCall</td> 
   <td>validate[funcCall[functionName]]</td> 
   <td>调用外部函数</td> 
  </tr> 
 </tbody> 
</table>

## 【API 方法】 ##

<table style="font-family:Arial; font-size:14px; line-height:26px; color:rgb(0,0,0)"> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>示例</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>attach</td> 
   <td>$("#form_id").validationEngine("attach");</td> 
   <td>注册表单验证事件</td> 
  </tr> 
  <tr> 
   <td>detach</td> 
   <td>$("#form_id").validationEngine("detach");</td> 
   <td>取消注册表单验证事件</td> 
  </tr> 
  <tr> 
   <td>validate</td> 
   <td>alert($("#form_id").validationEngine("validate"));</td> 
   <td>验证表单，返回结果 true 或 false</td> 
  </tr> 
  <tr> 
   <td>validateField</td> 
   <td>alert($("#form_id").validationEngine("validateField","#element_id"));</td> 
   <td>验证单个控件，返回结果 true 或 false</td> 
  </tr> 
  <tr> 
   <td>showPrompt</td> 
   <td>$("#element_id").validationEngine("showPrompt","提示内容","load");</td> 
   <td>在该元素上创建一个提示内容，3 种状态："pass", "error", "load"</td> 
  </tr> 
  <tr> 
   <td>hidePrompt</td> 
   <td>$("#element_id").validationEngine("hidePrompt");</td> 
   <td>隐藏该元素的提示内容</td> 
  </tr> 
  <tr> 
   <td>hide</td> 
   <td>$("#form_id").validationEngine("hide");</td> 
   <td>关闭表单中的提示</td> 
  </tr> 
  <tr> 
   <td>hideAll</td> 
   <td>$("#form_id").validationEngine("hideAll");</td> 
   <td>关闭页面上得所有提示</td> 
  </tr> 
  <tr> 
   <td>updatePromptsPosition</td> 
   <td>$("#form_id").validationEngine("updatePromptsPosition")</td> 
   <td>更新提示层的位置</td> 
  </tr> 
 </tbody> 
</table>

# [validationEngine中文版 — jquery强大的表单验证插件][validationEngine_ _ jquery] #

中文汉化版，官方只有英文的。同时根据中国国情修改了部分验证规则。

这个插件支持大部分的浏览器，但由于有使用到了css3的阴影和圆角样式，所以在IE浏览器下无法看到圆角和阴影效果（万恶的IE）。

官方下载地址：[http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/][http_www.position-absolute.com_articles_jquery-form-validator-because-form-validation-is-a-mess]

普通验证的例子：[http://www.position-relative.net/creation/formValidator/][http_www.position-relative.net_creation_formValidator]

ajax验证的例子：[http://www.position-relative.net/creation/formValidator/demoSubmit.html][http_www.position-relative.net_creation_formValidator_demoSubmit.html]

## 一：简单说明下使用教程： ##

#### 引入jquery和插件js、css ####

1.  <link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css" media="screen" charset="utf-8" /> 
2.  <script src="js/jquery.js" type="text/javascript"></script> 
3.  <script src="js/jquery.validationEngine-en.js" type="text/javascript"></script> 
4.  <script src="js/jquery.validationEngine.js" type="text/javascript"></script>

jquery.validationEngine-en.js是语言文件，所有的提示都在这个文件找的到，可以很方便的转成其他语言，同时你也可以在这个文件内定制属于自己的验证规则。

#### 初始化插件 ####

1.  $(document).ready(function() \{  
2.  $("\#formID").validationEngine() 
3.  \})

验证规则是写在表单元素的class属性内。比如下面：

1.  <input value="" class="validate\[required,custom\[noSpecialCaracters\],length\[0,20\],ajax\[ajaxUser\]\]"type="text" name="user" id="user" />

验证规则非常多样，基本上包含了所有的数据类型的验证。  
所有的验证规则写在validate\[\]内，有多种验证，用逗号隔开，这里简要说明下常用的验证规则。

1.  required：值不可以为空
2.  length\[0,100\] ：文字允许长度
3.  confirm\[fieldID\] ：匹配其他的表单元素的值，fieldID就是其他表单元素的id，这个主要用于再次确认密码
4.  telephone ：数据格式要求符合电话格式
5.  email ： 数据格式要求符合email 格式
6.  onlyNumber ：只允许输入数字
7.  noSpecialCaracters ：不允许出现特殊字符
8.  onlyLetter ： 只能是字母
9.  date ：必须符合日期格式YYYY-MM-DD

#### 你还可以在点击提交按钮后才触发验证。 ####

1.  $("\#formID").validationEngine(\{  
2.  inlineValidation: false,
3.  success :  false,
4.  failure : function() \{  callFailFunction()  \} 
5.  \})

#### 默认的是在鼠标失去焦点后才开始验证，也就是绑定的是blur事件，那如何改变呢？看下面的配置。 ####

1.  $("\#formID").validationEngine(\{  
2.  validationEventTriggers:"keyup blur",  //will validate on keyup and blur  
3.  success :  false,
4.  failure : function() \{  callFailFunction()  \} 
5.  \})

validationEventTriggers属性就是修改绑定事件，上面是增加了个keyup，也就是键盘按键起来就触发验证。

#### 修改提示层的位置 ####

1.  $("\#formID").validationEngine(\{  
2.  promptPosition: "topRight", // OPENNING BOX POSITION, IMPLEMENTED: topLeft, topRight, bottomLeft,  centerRight, bottomRight
3.  success :  false,
4.  failure : function() \{  
5.  \})

promptPosition就是控制位置，有5种模式：topLeft, topRight, bottomLeft, centerRight, bottomRight

#### ajax验证模式 ####

1.  $("\#formID").validationEngine(\{  
2.   ajaxSubmit: true,
3.    ajaxSubmitFile: "ajaxSubmit.php",
4.    ajaxSubmitMessage: "Thank you, we received your inscription!",
5.   ajaxSubmitExtraData: "securityCode=38709238423&name=john",
6.   success :  false,
7.   failure : function() \{\} 
8.  \})

这几个参数很好理解。

1.  ajaxSubmit: true, 提交表单使用ajax提交
2.  ajaxSubmitFile: “ajaxSubmit.php”, 后台脚本
3.  ajaxSubmitMessage 成功后显示的信息
4.  ajaxSubmitExtraData 参数

这里需要对后台脚本返回的数据进行下说明：  
返回的数据格式是json。  
出现一个错误，产生一个数组，如下：

1.  $arrayError\[0\]\[0\] = "\#email";            // FIELDID
2.  $arrayError\[0\]\[1\] = "Your email do not match.. whatever it need to match";     // TEXT ERROR   
3.  $arrayError\[0\]\[2\] = "error";            // BOX COLOR

二：修改过的地方

解决ie6下select遮挡div的办法   
jquery.validationEngine.js要修改的地方：

Xml代码

1.  calculatedPosition.callerTopPosition += "px";   
2.             calculatedPosition.callerleftPosition += "px";   
3.             calculatedPosition.marginTopSize += "px";   
4.             //add matychen    
5.             if ( $.browser.msie && /6.0/.test(navigator.userAgent) ) \{   
6.             $(divFormError).append('**<iframe** class="iframe" frameborder="0" scr="javascript:false;"**></iframe>**');   
7.             \}   
8.             // add matychen   
9.             $(divFormError).css(\{   
10.                "top": calculatedPosition.callerTopPosition,   
11.                "left": calculatedPosition.callerleftPosition,   
12.                "marginTop": calculatedPosition.marginTopSize,   
13.                "opacity": 0   
14.            \});

validationEngine.jquery.css里面加入以下代码：

Java代码

1.  .iframe \{   
2.      position: absolute;    
3.      width: expression(**this**.parentNode.offsetWidth+\\'px\\');    
4.      height: expression(**this**.parentNode.offsetHeight-32\+\\'px\\');   
5.      z-index: -1;   
6.      top: expression(((parseInt(**this**.parentNode.currentStyle.borderTopWidth)||0)\*-1)+\\'px\\');   
7.      left: expression(((parseInt(**this**.parentNode.currentStyle.borderLeftWidth)||0)\*-1)+\\'px\\');   
8.  \}

formvalidator.html如下：

Java代码

1.  <!DOCTYPE HTML PUBLIC "-//IETF//DTD LEVEL1//EN">   
2.  <html>   
3.    <head>   
4.      <title>formvalidator.html</title>   
5.         
6.      <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">   
7.      <meta http-equiv="description" content="this is my page">   
8.      <meta http-equiv="content-type" content="text/html; charset=UTF-8">   
9.          <link rel="stylesheet" href="formValidator/css/validationEngine.jquery.css" type="text/css" />   
10.         <link rel="stylesheet" href="formValidator/css/template.css" type="text/css" />   
11.         <script src="formValidator/jquery.js" type="text/javascript"></script>   
12.         <script src="formValidator/js/jquery.validationEngine-cn.js" type="text/javascript"></script>   
13.         <script src="formValidator/js/jquery.validationEngine.js" type="text/javascript"></script>   
14.   
15.   
16. <script>     
17.         $(document).ready(function() \{   
18.             $("\#formID").validationEngine(\{   
19.             validationEventTriggers:"blur",  //触发的事件  validationEventTriggers:"keyup blur",   
20.             inlineValidation: **true**,//是否即时验证，false为提交表单时验证,默认true   
21.             success :  **false**,//为true时即使有不符合的也提交表单,false表示只有全部通过验证了才能提交表单,默认false   
22.             promptPosition: "topRight",//提示所在的位置，topLeft, topRight, bottomLeft,  centerRight, bottomRight   
23.             //failure : function() \{ alert("验证失败，请检查。");  \}//验证失败时调用的函数   
24.             //success : function() \{ callSuccessFunction() \},//验证通过时调用的函数   
25.             \});   
26.         \});   
27.     </script>    
28.   </head>   
29.      
30.   <body>   
31.     <form id="formID" **class**="formular" method="post" action="">   
32.             <fieldset>   
33.                 <legend>User informations</legend>   
34.                 <label>   
35.                     <span>Desired username (ajax validation, only karnius is available) : </span>   
36.                     <input value="" **class**="validate\[required,custom\[noSpecialCaracters\],length\[0,20\],ajax\[ajaxUser\]\]" type="text" name="user" id="user" />//ajax验证用户名的地方   
37.                 </label>   
38.                 <label>   
39.                     <span>First name (optional)</span>   
40.                     <input value="karnius"  **class**="validate\[optional,custom\[onlyLetter\],length\[0,100\]\] text-input" type="text" name="firstname" id="firstname" />   
41.                 </label>   
42.                 <label>   
43.                     <span>Last name : </span>   
44.                     <input value="karnius"  **class**="validate\[required,custom\[onlyLetter\],length\[0,100\]\] text-input" type="text" id="data\[Use6\]\[preferedColor\]" name="lastname"  />   
45.                 </label>   
46.                 <div>   
47.                     <span>Radio Groupe : <br /></span>   
48.                     <span>radio 1: </span>   
49.                     <input **class**="validate\[required\] radio" type="radio" name="data\[User\]\[preferedColor\]"  id="radio1"  value="5">   
50.                     <span>radio 2: </span>   
51.                     <input **class**="validate\[required\] radio" type="radio" name="data\[User\]\[preferedColor\]"  id="radio2"  value="3"/>   
52.                     <span>radio 3: </span>   
53.                     <input **class**="validate\[required\] radio" type="radio" name="data\[User\]\[preferedColor\]"  id="radio3"  value="9"/>   
54.                 </div>   
55.                 <div>   
56.                     <span>Minimum 2 checkbox : <br /></span>   
57.                    
58.                     <input **class**="validate\[minCheckbox\[2\],maxCheckbox\[3\]\] checkbox" type="checkbox"  name="data\[User3\]\[preferedColor\]" id="data\[User3\]\[preferedColor\]" value="5">   
59.                     <input **class**="validate\[minCheckbox\[2\],maxCheckbox\[3\]\] checkbox" type="checkbox"  name="data\[User3\]\[preferedColor\]" id="data\[User3\]\[preferedColor\]" value="5">   
60.                        
61.                     <input **class**="validate\[minCheckbox\[2\],maxCheckbox\[3\]\] checkbox" type="checkbox" name="data\[User3\]\[preferedColor\]" id="maxcheck2"  value="3"/>   
62.                    
63.                     <input **class**="validate\[minCheckbox\[2\],maxCheckbox\[3\]\] checkbox" type="checkbox" name="data\[User3\]\[preferedColor\]" id="maxcheck3"  value="9"/>   
64.                 </div>   
65.                 <label>   
66.                     <span>Date : (format YYYY-MM-DD)</span>   
67.                     <input value="1111-11-11"  **class**="validate\[required,custom\[date\]\] text-input" type="text" name="date"  id="date" />   
68.                 </label>   
69.                 <label>   
70.                     <span>Favorite sport 1:</span>   
71.                 <select name="sport" id="sport"  **class**="validate\[required\]"  id="sport"  >   
72.                     <option value="">Choose a sport</option>   
73.                     <option value="option1">Tennis</option>   
74.                     <option value="option2">Football</option>   
75.                     <option value="option3">Golf</option>   
76.                 </select>   
77.                 </label>   
78.                 <label>   
79.                     <span>Favorite sport 2:</span>   
80.                 <select name="sport2" id="sport2" multiple **class**="validate\[required\]"  id="sport2"  >   
81.                     <option value="">Choose a sport</option>   
82.                     <option value="option1">Tennis</option>   
83.                     <option value="option2">Football</option>   
84.                     <option value="option3">Golf</option>   
85.                 </select>   
86.                 </label>   
87.                 <label>   
88.                     <span>Age : </span>   
89.                     <input value="22"  **class**="validate\[required,custom\[onlyNumber\],length\[0,3\]\] text-input" type="text" name="age"  id="age" />   
90.                 </label>   
91.                        
92.                 <label>   
93.                     <span>Telephone : </span>   
94.                     <input value="1111111"  **class**="validate\[required,custom\[telephone\]\] text-input" type="text" name="telephone"  id="telephone" />   
95.                 </label>   
96.                 <label>   
97.                     <span>mobilephone : </span>   
98.                     <input value="111111"  **class**="validate\[required,custom\[mobilephone\]\] text-input" type="text" name="telphone"  id="telphone" />   
99.                 </label>   
100.                 <label>   
101.                     <span>chinese : </span>   
102.                     <input value="asdf"  **class**="validate\[required,custom\[chinese\]\] text-input" type="text" name="chinese"  id="chinese" />   
103.                 </label>   
104.                 <label>   
105.                     <span>url : </span>   
106.                     <input value="url"  **class**="validate\[required,custom\[url\]\] text-input" type="text" name="url"  id="url" />   
107.                 </label>   
108.                 <label>   
109.                     <span>zipcode : </span>   
110.                     <input value="zipcode"  **class**="validate\[required,custom\[zipcode\]\] text-input" type="text" name="zipcode"  id="zipcode" />   
111.                 </label>   
112.                 <label>   
113.                     <span>ip : </span>   
114.                     <input value="ip"  **class**="validate\[required,custom\[ip\]\] text-input" type="text" name="ip"  id="ip" />   
115.                 </label>   
116.                 <label>   
117.                     <span>qq : </span>   
118.                     <input value="01234"  **class**="validate\[required,custom\[qq\]\] text-input" type="text" name="qq"  id="qq" />   
119.                 </label>   
120.             </fieldset>   
121.             <fieldset>   
122.                 <legend>Password</legend>   
123.                 <label>   
124.                     <span>Password : </span>   
125.                     <input value="karnius"  **class**="validate\[required,length\[6,11\]\] text-input" type="password" name="password"  id="password" />   
126.                 </label>   
127.                 <label>   
128.                     <span>Confirm password : </span>   
129.                     <input value="karnius"  **class**="validate\[required,confirm\[password\]\] text-input" type="password" name="password2"  id="password2" />   
130.                 </label>   
131.             </fieldset>   
132.             <fieldset>   
133.                 <legend>Email</legend>   
134.                 <label>   
135.                     <span>Email address : </span>   
136.                     <input value="ced@hotmail.com"  **class**="validate\[required,custom\[email\]\] text-input" type="text" name="email" id="email"  />   
137.                 </label>   
138.                 <label>   
139.                     <span>Confirm email address : </span>   
140.                     <input value="ced@hotmail.com" **class**="validate\[required,confirm\[email\]\] text-input" type="text" name="email2"  id="email2" />   
141.                 </label>   
142.             </fieldset>   
143.             <fieldset>   
144.                 <legend>Comments</legend>   
145.                 <label>   
146.                     <span>Comments : </span>   
147.                     <textarea value="ced@hotmail.com" **class**="validate\[required,length\[6,300\]\] text-input" name="comments" id="comments" /> </textarea>   
148.                 </label>   
149.   
150.             </fieldset>   
151.             <fieldset>   
152.                 <legend>Conditions</legend>   
153.                 <div **class**="infos">Checking **this** box indicates that you accept terms of use. If you **do** not accept these terms, **do** not use **this** website : </div>   
154.                 <label>   
155.                     <span **class**="checkbox">I accept terms of use : </span>   
156.                     <input **class**="validate\[required\] checkbox" type="checkbox"  id="agree"  name="agree"/>   
157.                 </label>   
158.             </fieldset>   
159. <input **class**="submit" type="submit" value="Validate & Send the form!"/>   
160. <hr/>   
161. </form>   
162.   </body>   
163. </html>

jquery.validationEngine-cn.js如下：

Java代码

1.    
2.    
3.  (function($) \{   
4.      $.fn.validationEngineLanguage = function() \{\};   
5.      $.validationEngineLanguage = \{   
6.          newLang: function() \{   
7.              $.validationEngineLanguage.allRules =   \{ "required":\{               // Add your regex rules here, you can take telephone as an example   
8.                          "regex":"none",   
9.                          "alertText":"\* 非空选项.",   
10.                         "alertTextCheckboxMultiple":"\* 请选择一个单选框.",   
11.                         "alertTextCheckboxe":"\* 请选择一个复选框."\},   
12.                     "length":\{   
13.                         "regex":"none",   
14.                         "alertText":"\* 长度必须在 ",   
15.                         "alertText2":" 至 ",   
16.                         "alertText3": " 之间."\},   
17.                     "maxCheckbox":\{   
18.                         "regex":"none",   
19.                         "alertText":"\* 最多选择 ",//官方文档这里有问题   
20.                         "alertText2":" 项."\},       
21.                     "minCheckbox":\{   
22.                         "regex":"none",   
23.                         "alertText":"\* 至少选择 ",   
24.                         "alertText2":" 项."\},       
25.                     "confirm":\{   
26.                         "regex":"none",   
27.                         "alertText":"\* 两次输入不一致,请重新输入."\},           
28.                     "telephone":\{   
29.                         "regex":"/^(0\[0-9\]\{2,3\}\\-)?(\[2-9\]\[0-9\]\{6,7\})+(\\-\[0-9\]\{1,4\})?$/",   
30.                         "alertText":"\* 请输入有效的电话号码,如:010-29292929."\},   
31.                     "mobilephone":\{   
32.                         "regex":"/(^0?\[1\]\[358\]\[0-9\]\{9\}$)/",   
33.                         "alertText":"\* 请输入有效的手机号码."\},      
34.                     "email":\{   
35.                         "regex":"/^\[a-zA-Z0-9\_\\.\\-\]+\\@(\[a-zA-Z0-9\\-\]+\\.)+\[a-zA-Z0-9\]\{2,4\}$/",   
36.                         "alertText":"\* 请输入有效的邮件地址."\},      
37.                     "date":\{   
38.                          "regex":"/^((\[0-9\]\{3\}\[1-9\]|\[0-9\]\{2\}\[1-9\]\[0-9\]\{1\}|\[0-9\]\{1\}\[1-9\]\[0-9\]\{2\}|\[1-9\]\[0-9\]\{3\})-(((0\[13578\]|1\[02\])-(0\[1-9\]|\[12\]\[0-9\]|3\[01\]))|((0\[469\]|11)-(0\[1-9\]|\[12\]\[0-9\]|30))|(02-(0\[1-9\]|\[1\]\[0-9\]|2\[0-8\]))))|(((\[0-9\]\{2\})(0\[48\]|\[2468\]\[048\]|\[13579\]\[26\])|((0\[48\]|\[2468\]\[048\]|\[3579\]\[26\])00))-02-29)$/",   
39.                          "alertText":"\* 请输入有效的日期,如:2008-08-08."\},   
40.                     "ip":\{   
41.                          "regex":"/^(?:(?:25\[0-5\]|2\[0-4\]\[0-9\]|\[01\]?\[0-9\]\[0-9\]?)\\.)\{3\}(?:25\[0-5\]|2\[0-4\]\[0-9\]|\[01\]?\[0-9\]\[0-9\]?)$/",   
42.                          "alertText":"\* 请输入有效的IP."\},   
43.                     "chinese":\{   
44.                         "regex":"/^\[\\u4e00-\\u9fa5\]+$/",   
45.                         "alertText":"\* 请输入中文."\},   
46.                     "url":\{   
47.                         "regex":"/^\[a-zA-z\]:\\\\/\\\\/\[^s\]$/",//这些验证请自己加强   
48.                         "alertText":"\* 请输入有效的网址."\},   
49.                     "zipcode":\{   
50.                         "regex":"/^\[1-9\]\\d\{5\}$/",   
51.                         "alertText":"\* 请输入有效的邮政编码."\},   
52.                     "qq":\{   
53.                         "regex":"/^\[1-9\]\\d\{4,9\}$/",   
54.                         "alertText":"\* 请输入有效的QQ号码."\},   
55.                     "onlyNumber":\{   
56.                         "regex":"/^\[0-9\]+$/",   
57.                         "alertText":"\* 请输入数字."\},   
58.                     "onlyLetter":\{   
59.                         "regex":"/^\[a-zA-Z\]+$/",   
60.                         "alertText":"\* 请输入英文字母."\},   
61.                     "noSpecialCaracters":\{   
62.                         "regex":"/^\[0-9a-zA-Z\]+$/",   
63.                         "alertText":"\* 请输入英文字母和数字."\},      
64.                     "ajaxUser":\{   
65.                         "file":"validate.action",//ajax验证用户名，会post如下参数：validateError    ajaxUser；validateId user；validateValue  cccc   
66.                         "alertTextOk":"\* 帐号可以使用.",     
67.                         "alertTextLoad":"\* 检查中, 请稍后...",   
68.                         "alertText":"\* 帐号不能使用."\},      
69.                     "ajaxName":\{   
70.                         "file":"validateUser.php",   
71.                         "alertText":"\* This name is already taken",   
72.                         "alertTextOk":"\* This name is available",      
73.                         "alertTextLoad":"\* Loading, please wait"\}                      
74.                     \}      
75.         \}   
76.     \}   
77. \})(jQuery);   
78.   
79. $(document).ready(function() \{     
80.     $.validationEngineLanguage.newLang()   
81. \});

部分jquery.validationEngine.js

Java代码

1.  /\* AJAX VALIDATION HAS ITS OWN UPDATE AND BUILD UNLIKE OTHER RULES \*/      
2.              **if**(!ajaxisError)\{   
3.                  $.ajax(\{   
4.                      type: "POST",   
5.                      url: postfile,   
6.                      async: **true**,   
7.                      data: "validateValue="\+fieldValue+"&validateId="\+fieldId+"&validateError="\+customAjaxRule,//+extraData,//自己把其中的+extraData去掉了，不然后面的ajax验证有问题。   
8.                      beforeSend: function()\{     // BUILD A LOADING PROMPT IF LOAD TEXT EXIST                       
9.                          **if**($.validationEngine.settings.allrules\[customAjaxRule\].alertTextLoad)\{   
10.                            
11.                             **if**(!$("div."\+fieldId+"formError")\[0\])\{                                 
12.                                 **return** $.validationEngine.buildPrompt(ajaxCaller,$.validationEngine.settings.allrules\[customAjaxRule\].alertTextLoad,"load");   
13.                             \}**else**\{   
14.                                 $.validationEngine.updatePromptText(ajaxCaller,$.validationEngine.settings.allrules\[customAjaxRule\].alertTextLoad,"load");   
15.                             \}   
16.                         \}   
17.                     \},

struts.xml文件：

Java代码

1.          <struts>   
2.      <**package** name="json" **extends**="json-default">   
3.             
4.          <action name="validate" **class**="com.bw30.zjvote.action.ValidateAction"  
5.              method="vali">   
6.              <result type="json">   
7.              <param name="excludeProperties">msg</param>//jsonplugin-0.32.jar   
8.              </result>   
9.          </action>   
10.            
11.     </**package**>   
12. </struts>

validateAction

Java代码

1.  **public** String vali() \{   
2.          ActionContext ac = ActionContext.getContext();   
3.          HttpServletRequest request = (HttpServletRequest) ac   
4.          .get(ServletActionContext.HTTP\_REQUEST);   
5.          String validateId = request.getParameter("validateId");   
6.          logger.info("vali() - String validateId=" + validateId);   
7.    
8.          String validateValue = request.getParameter("validateValue");   
9.          String validateError = request.getParameter("validateError");   
10.         logger.info("vali() - String validateError=" + validateError);   
11.                 //注意下面的顺序，感觉这是个缺陷之一，不过可以在jquery.validationEngine.js更改，  
12.         jsonValidateReturn.add(validateId);   
13.         jsonValidateReturn.add(validateError);   
14.         **if**(validateValue.equals("chen"))   
15.         jsonValidateReturn.add("true");   
16.         **else**  
17.             jsonValidateReturn.add("false");   
18.         **return** SUCCESS;   
19.     \}

jquery.validationEngine.js要更改的地方：

Java代码

1.  success: function(data)\{                    // GET SUCCESS DATA RETURN JSON   
2.                          data = eval( "("\+data+")");             // GET JSON DATA FROM PHP AND PARSE IT   
3.                          ajaxisError = data.jsonValidateReturn\[2\];//这里官方文档写死了，可以根据自己需求更改。   
4.                          customAjaxRule = data.jsonValidateReturn\[1\];//这里官方文档写死了，可以根据自己需求更改。   
5.                          ajaxCaller = $("\#"\+data.jsonValidateReturn\[0\])\[0\];   
6.                          fieldId = ajaxCaller;   
7.                          ajaxErrorLength = $.validationEngine.ajaxValidArray.length;   
8.                          existInarray = **false**;   
9.                             
10.                          **if**(ajaxisError == "false")\{            // DATA FALSE UPDATE PROMPT WITH ERROR;   
11.                                
12.                             \_checkInArray(**false**)                // Check if ajax validation alreay used on this field  
13.                                
14.                             **if**(!existInarray)\{                  // Add ajax error to stop submit                   
15.                                 $.validationEngine.ajaxValidArray\[ajaxErrorLength\] =  **new** Array(2);   
16.                                 $.validationEngine.ajaxValidArray\[ajaxErrorLength\]\[0\] = fieldId;   
17.                                 $.validationEngine.ajaxValidArray\[ajaxErrorLength\]\[1\] = **false**;   
18.                                 existInarray = **false**;   
19.                             \}

用到了jsonplugin-0.32.jar这个包在附件里面，其他struts的包，自己添加。

![formValidator][]

[Demo]: http://code.ciaoca.com/jquery/validation_engine/demo/index.html
[jQuery Validation Engine v2.2.4]: http://code.ciaoca.com/jquery/validation_engine/version/formValidator2.2.4_ciaoca.rar
[jQuery Validation Engine v2.2.4 1]: http://code.ciaoca.com/jquery/validation_engine/version/formValidator2.2.4.rar
[validationEngine_ _ jquery]: http://www.cnblogs.com/aijun/archive/2011/03/21/1989991.html
[http_www.position-absolute.com_articles_jquery-form-validator-because-form-validation-is-a-mess]: http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/
[http_www.position-relative.net_creation_formValidator]: http://www.position-relative.net/creation/formValidator/
[http_www.position-relative.net_creation_formValidator_demoSubmit.html]: http://www.position-relative.net/creation/formValidator/demoSubmit.html
[formValidator]: http://www.36ria.com/wp-content/uploads/2010/03/formValidator-431x400.png