`
ljl_xyf
  • 浏览: 634584 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jQuery Validation Engine 表单验证

 
阅读更多

注意事项：

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

修改版：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, 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 文件

<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]] 验证电话号码
email 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") 更新提示层的位置

 

validationEngine中文版 — jquery强大的表单验证插件

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

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

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

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

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

 

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

引入jquery和插件js、css

  1. <linkrel="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. <inputvalue=""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的包，自己添加。 

 

分享到：
| jquery-validation 使用
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery Validation Engine （ jQuery 表单验证插件）

    - `js` 文件夹：主要的JavaScript文件，如`validationEngine.jquery.js`是核心库，`validationEngine.jquery.min.js`是压缩版本。 - `demo` 文件夹：包含示例代码和演示，可以帮助你快速理解和使用Validation Engine...

    jQuery.validationEngine表单验证中文版

    **jQuery.validationEngine表单验证中文版** jQuery.validationEngine是一款强大的前端表单验证插件，它为开发者提供了便捷的方式来实现表单数据的验证。这个插件以其丰富的功能、友好的用户界面和灵活的自定义能力...

    jQuery.validationEngine 表单验证中文版

    jQuery.validationEngine是一款强大的JavaScript插件，专用于前端表单验证。这款插件以其简洁的API、丰富的验证规则和良好的国际化支持而备受青睐。在中文环境中，它可以为用户提供友好的中文提示，确保用户输入的...

    jquery.validationEngine 控件验证表单跟检测数据库是否有重名

    《jQuery.validationEngine控件在表单验证与数据库重名检测中的应用详解》 在Web开发中，表单验证是不可或缺的一环，它确保了用户输入数据的准确性和完整性。jQuery.validationEngine是一款强大的JavaScript验证...

    jquery表单验证插件validationEngine---个人修改

    **jQuery表单验证插件ValidationEngine详解** 在Web开发中，表单验证是必不可少的一环，它能够确保用户输入的数据符合预设的规则，从而提高数据的准确性和系统的稳定性。ValidationEngine是一款基于jQuery的强大的...

    表单验证jquery插件

    在页面加载完成后，使用 `$.validationEngine('attach')` 方法来初始化表单验证： ```javascript $(document).ready(function() { $("#yourFormId").validationEngine(); }); ``` ### 3.2 配置验证规则 在HTML...

    jquery.validationEngine校验插件

    jQuery ValidationEngine 是一款强大的前端表单验证插件，它极大地简化了网页表单的验证过程，使开发者无需编写复杂的取值和正则表达式比较，即可实现丰富的验证功能。该插件以其直观、易用和高度可定制性而受到广大...

    jQuery-Validation-Engine-master

    jQuery Validation Engine是一款强大的jQuery插件，专用于表单验证。这款控件以其丰富的功能、高度的自定义性和优雅的用户界面而备受推崇。在本文中，我们将深入探讨jQuery Validation Engine的核心概念、安装步骤、...

    （五）struts2- 2.3.15.3 spring3.2.4 mybatis-3.2.3 jquery.validationEngine表单验证

    jQuery.validationEngine则是一个强大的JavaScript库，用于前端表单验证，提供丰富的验证规则和友好的提示效果。 Struts2作为MVC（模型-视图-控制器）架构的一部分，主要用于处理用户的请求并控制应用流程。版本2.3...

    validationEngine验证组件改样式

    validationEngine是一款基于jQuery的表单验证插件，它提供了丰富的验证规则和自定义错误消息功能，使得在网页中实现复杂的用户输入验证变得简单易行。这个压缩包文件可能包含了经过修改后的validationEngine验证组件...

    JQuery.validationEngine表单验证插件(推荐)

    虽然在提供的内容中有些地方由于OCR识别技术的原因，存在个别字识别错误或者漏识别的情况，但整体而言，文档提供的信息足够详细，可以帮助开发者快速掌握JQuery.validationEngine表单验证插件的使用方法，并将其应用...

    表单验证jQuery-Validation-Engine-master

    **jQuery Validation Engine** 是一个强大的JavaScript插件，主要用于前端网页上的表单验证。它通过提供丰富的自定义样式和多种验证规则，帮助开发者实现用户输入数据的有效性和格式验证，确保用户在提交表单前输入...

    jquery.validationEngine.js

    强大的表单验证控件，验证表单的正确性。

    jQuery-Validation-Engine-2.6.2-ciaoca.zip

    jQuery Validation Engine 2.6.2 是一个强大的表单验证插件，由 Ciaoca 进行了中文增强，使得该工具更适合中国用户使用。这个插件基于流行的 JavaScript 库 jQuery，旨在提供一种简单而优雅的方式来验证用户在网页...

    jquery validation 支持zepto第二版

    在IT行业中，前端开发是至关重要的一个领域，而jQuery Validation插件则是JavaScript中用于表单验证的常用工具，它提供了一套完整的解决方案来确保用户输入的数据满足预设的规则。Zepto.js则是一个轻量级的...

    jquery-ui-validation-Engine

    **jQuery UI Validation Engine 插件...它是一个强大的前端验证工具，可以帮助开发者创建高效、易用的表单验证系统，提升网站的用户体验。在实际应用中，可以根据具体需求进行细致的配置和扩展，以满足各种复杂场景。

    jQuery Validation Engine验证控件调用外部函数验证的方法

    jQuery Validation Engine是一款强大的表单验证插件，它允许开发者对用户输入的数据进行各种复杂的验证。在某些情况下，可能需要自定义验证规则，这就涉及到调用外部函数进行验证。本篇文章将详细讲解如何在jQuery ...

    validationEngine 表单验证插件使用实例代码

    `validationEngine`是一款基于jQuery的表单验证插件，它能帮助开发者轻松地实现对用户输入数据的实时验证，提供了一种美观且直观的方式来确保表单数据的有效性。本实例将详细讲解如何使用`validationEngine`插件进行...

    jQuery.Validation.Engine

    **jQuery.Validation.Engine** 是一个基于JavaScript库jQuery的插件，专为网页表单验证提供强大支持。这个插件设计精美，功能丰富，可以帮助开发者轻松创建符合业务规则的表单验证，提升用户体验，确保用户输入的...

    动态表单验证 jquery

    在本文中，我们将深入探讨如何使用jQuery库实现动态表单验证，特别是基于`jquery.validationEngine.js`插件的用法。 jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画效果。在动态表单验证...

Magicbox
Global site tag (gtag.js) - Google Analytics