jQuery Validation Engine 表單驗證

http://blog.csdn.net/jielione/article/details/7758321

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. <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要修改的地方：

 

calculatedPosition.callerTopPosition += "px";
           calculatedPosition.callerleftPosition += "px";
           calculatedPosition.marginTopSize += "px";
           //add matychen
           if ( $.browser.msie && /6.0/.test(navigator.userAgent) ) {
           $(divFormError).append('<iframe class="iframe" frameborder="0" scr="javascript:false;"></iframe>');
           }
           // add matychen
           $(divFormError).css({
               "top": calculatedPosition.callerTopPosition,
               "left": calculatedPosition.callerleftPosition,
               "marginTop": calculatedPosition.marginTopSize,
               "opacity": 0
           });

validationEngine.jquery.css裏面加入以下代碼： 

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

formvalidator.html如下： 

<!DOCTYPE HTML PUBLIC "-//IETF//DTD LEVEL1//EN">
<html>
  <head>
    <title>formvalidator.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="formValidator/css/validationEngine.jquery.css" type="text/css" />
        <link rel="stylesheet" href="formValidator/css/template.css" type="text/css" />
        <script src="formValidator/jquery.js" type="text/javascript"></script>
        <script src="formValidator/js/jquery.validationEngine-cn.js" type="text/javascript"></script>
        <script src="formValidator/js/jquery.validationEngine.js" type="text/javascript"></script>


<script>
        $(document).ready(function() {
            $("#formID").validationEngine({
            validationEventTriggers:"blur",  //觸發的事件  validationEventTriggers:"keyup blur",
            inlineValidation: true,//是否即時驗證，false爲提交表單時驗證,默認true
            success :  false,//爲true時即使有不符合的也提交表單,false表示只有全部通過驗證了才能提交表單,默認false
            promptPosition: "topRight",//提示所在的位置，topLeft, topRight, bottomLeft,  centerRight, bottomRight
            //failure : function() { alert("驗證失敗，請檢查。");  }//驗證失敗時調用的函數
            //success : function() { callSuccessFunction() },//驗證通過時調用的函數
            });
        });
    </script>
  </head>

  <body>
    <form id="formID" class="formular" method="post" action="">
            <fieldset>
                <legend>User informations</legend>
                <label>
                    <span>Desired username (ajax validation, only karnius is available) : </span>
                    <input value="" class="validate[required,custom[noSpecialCaracters],length[0,20],ajax[ajaxUser]]" type="text" name="user" id="user" />//ajax驗證用戶名的地方
                </label>
                <label>
                    <span>First name (optional)</span>
                    <input value="karnius"  class="validate[optional,custom[onlyLetter],length[0,100]] text-input" type="text" name="firstname" id="firstname" />
                </label>
                <label>
                    <span>Last name : </span>
                    <input value="karnius"  class="validate[required,custom[onlyLetter],length[0,100]] text-input" type="text" id="data[Use6][preferedColor]" name="lastname"  />
                </label>
                <div>
                    <span>Radio Groupe : <br /></span>
                    <span>radio 1: </span>
                    <input class="validate[required] radio" type="radio" name="data[User][preferedColor]"  id="radio1"  value="5">
                    <span>radio 2: </span>
                    <input class="validate[required] radio" type="radio" name="data[User][preferedColor]"  id="radio2"  value="3"/>
                    <span>radio 3: </span>
                    <input class="validate[required] radio" type="radio" name="data[User][preferedColor]"  id="radio3"  value="9"/>
                </div>
                <div>
                    <span>Minimum 2 checkbox : <br /></span>

                    <input class="validate[minCheckbox[2],maxCheckbox[3]] checkbox" type="checkbox"  name="data[User3][preferedColor]" id="data[User3][preferedColor]" value="5">
                    <input class="validate[minCheckbox[2],maxCheckbox[3]] checkbox" type="checkbox"  name="data[User3][preferedColor]" id="data[User3][preferedColor]" value="5">

                    <input class="validate[minCheckbox[2],maxCheckbox[3]] checkbox" type="checkbox" name="data[User3][preferedColor]" id="maxcheck2"  value="3"/>

                    <input class="validate[minCheckbox[2],maxCheckbox[3]] checkbox" type="checkbox" name="data[User3][preferedColor]" id="maxcheck3"  value="9"/>
                </div>
                <label>
                    <span>Date : (format YYYY-MM-DD)</span>
                    <input value="1111-11-11"  class="validate[required,custom[date]] text-input" type="text" name="date"  id="date" />
                </label>
                <label>
                    <span>Favorite sport 1:</span>
                <select name="sport" id="sport"  class="validate[required]"  id="sport"  >
                    <option value="">Choose a sport</option>
                    <option value="option1">Tennis</option>
                    <option value="option2">Football</option>
                    <option value="option3">Golf</option>
                </select>
                </label>
                <label>
                    <span>Favorite sport 2:</span>
                <select name="sport2" id="sport2" multiple class="validate[required]"  id="sport2"  >
                    <option value="">Choose a sport</option>
                    <option value="option1">Tennis</option>
                    <option value="option2">Football</option>
                    <option value="option3">Golf</option>
                </select>
                </label>
                <label>
                    <span>Age : </span>
                    <input value="22"  class="validate[required,custom[onlyNumber],length[0,3]] text-input" type="text" name="age"  id="age" />
                </label>

                <label>
                    <span>Telephone : </span>
                    <input value="1111111"  class="validate[required,custom[telephone]] text-input" type="text" name="telephone"  id="telephone" />
                </label>
                <label>
                    <span>mobilephone : </span>
                    <input value="111111"  class="validate[required,custom[mobilephone]] text-input" type="text" name="telphone"  id="telphone" />
                </label>
                <label>
                    <span>chinese : </span>
                    <input value="asdf"  class="validate[required,custom[chinese]] text-input" type="text" name="chinese"  id="chinese" />
                </label>
                <label>
                    <span>url : </span>
                    <input value="url"  class="validate[required,custom[url]] text-input" type="text" name="url"  id="url" />
                </label>
                <label>
                    <span>zipcode : </span>
                    <input value="zipcode"  class="validate[required,custom[zipcode]] text-input" type="text" name="zipcode"  id="zipcode" />
                </label>
                <label>
                    <span>ip : </span>
                    <input value="ip"  class="validate[required,custom[ip]] text-input" type="text" name="ip"  id="ip" />
                </label>
                <label>
                    <span>qq : </span>
                    <input value="01234"  class="validate[required,custom[qq]] text-input" type="text" name="qq"  id="qq" />
                </label>
            </fieldset>
            <fieldset>
                <legend>Password</legend>
                <label>
                    <span>Password : </span>
                    <input value="karnius"  class="validate[required,length[6,11]] text-input" type="password" name="password"  id="password" />
                </label>
                <label>
                    <span>Confirm password : </span>
                    <input value="karnius"  class="validate[required,confirm[password]] text-input" type="password" name="password2"  id="password2" />
                </label>
            </fieldset>
            <fieldset>
                <legend>Email</legend>
                <label>
                    <span>Email address : </span>
                    <input value="[email protected]"  class="validate[required,custom[email]] text-input" type="text" name="email" id="email"  />
                </label>
                <label>
                    <span>Confirm email address : </span>
                    <input value="[email protected]" class="validate[required,confirm[email]] text-input" type="text" name="email2"  id="email2" />
                </label>
            </fieldset>
            <fieldset>
                <legend>Comments</legend>
                <label>
                    <span>Comments : </span>
                    <textarea value="[email protected]" class="validate[required,length[6,300]] text-input" name="comments" id="comments" /> </textarea>
                </label>

            </fieldset>
            <fieldset>
                <legend>Conditions</legend>
                <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>
                <label>
                    <span class="checkbox">I accept terms of use : </span>
                    <input class="validate[required] checkbox" type="checkbox"  id="agree"  name="agree"/>
                </label>
            </fieldset>
<input class="submit" type="submit" value="Validate & Send the form!"/>
<hr/>
</form>
  </body>
</html>

jquery.validationEngine-cn.js如下： 

(function($) {
    $.fn.validationEngineLanguage = function() {};
    $.validationEngineLanguage = {
        newLang: function() {
            $.validationEngineLanguage.allRules =   {"required":{               // Add your regex rules here, you can take telephone as an example
                        "regex":"none",
                        "alertText":"* 非空選項.",
                        "alertTextCheckboxMultiple":"* 請選擇一個單選框.",
                        "alertTextCheckboxe":"* 請選擇一個複選框."},
                    "length":{
                        "regex":"none",
                        "alertText":"* 長度必須在 ",
                        "alertText2":" 至 ",
                        "alertText3": " 之間."},
                    "maxCheckbox":{
                        "regex":"none",
                        "alertText":"* 最多選擇 ",//官方文檔這裏有問題
                        "alertText2":" 項."},
                    "minCheckbox":{
                        "regex":"none",
                        "alertText":"* 至少選擇 ",
                        "alertText2":" 項."},
                    "confirm":{
                        "regex":"none",
                        "alertText":"* 兩次輸入不一致,請重新輸入."},
                    "telephone":{
                        "regex":"/^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/",
                        "alertText":"* 請輸入有效的電話號碼,如:010-29292929."},
                    "mobilephone":{
                        "regex":"/(^0?[1][358][0-9]{9}$)/",
                        "alertText":"* 請輸入有效的手機號碼."},
                    "email":{
                        "regex":"/^[a-zA-Z0-9_\.\-]+\@([a-zA-Z0-9\-]+\.)+[a-zA-Z0-9]{2,4}$/",
                        "alertText":"* 請輸入有效的郵件地址."},
                    "date":{
                         "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)$/",
                         "alertText":"* 請輸入有效的日期,如:2008-08-08."},
                    "ip":{
                         "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]?)$/",
                         "alertText":"* 請輸入有效的IP."},
                    "chinese":{
                        "regex":"/^[\u4e00-\u9fa5]+$/",
                        "alertText":"* 請輸入中文."},
                    "url":{
                        "regex":"/^[a-zA-z]:\\/\\/[^s]$/",//這些驗證請自己加強
                        "alertText":"* 請輸入有效的網址."},
                    "zipcode":{
                        "regex":"/^[1-9]\d{5}$/",
                        "alertText":"* 請輸入有效的郵政編碼."},
                    "qq":{
                        "regex":"/^[1-9]\d{4,9}$/",
                        "alertText":"* 請輸入有效的QQ號碼."},
                    "onlyNumber":{
                        "regex":"/^[0-9]+$/",
                        "alertText":"* 請輸入數字."},
                    "onlyLetter":{
                        "regex":"/^[a-zA-Z]+$/",
                        "alertText":"* 請輸入英文字母."},
                    "noSpecialCaracters":{
                        "regex":"/^[0-9a-zA-Z]+$/",
                        "alertText":"* 請輸入英文字母和數字."},
                    "ajaxUser":{
                        "file":"validate.action",//ajax驗證用戶名，會post如下參數：validateError    ajaxUser；validateId user；validateValue  cccc
                        "alertTextOk":"* 帳號可以使用.",
                        "alertTextLoad":"* 檢查中, 請稍後...",
                        "alertText":"* 帳號不能使用."},
                    "ajaxName":{
                        "file":"validateUser.php",
                        "alertText":"* This name is already taken",
                        "alertTextOk":"* This name is available",
                        "alertTextLoad":"* Loading, please wait"}
                    }
        }
    }
})(jQuery);

$(document).ready(function() {
    $.validationEngineLanguage.newLang()
});

 

 

部分jquery.validationEngine.js 

/* AJAX VALIDATION HAS ITS OWN UPDATE AND BUILD UNLIKE OTHER RULES */
            if(!ajaxisError){
                $.ajax({
                    type: "POST",
                    url: postfile,
                    async: true,
                    data: "validateValue="+fieldValue+"&validateId="+fieldId+"&validateError="+customAjaxRule,//+extraData,//自己把其中的+extraData去掉了，不然後面的ajax驗證有問題。
                    beforeSend: function(){     // BUILD A LOADING PROMPT IF LOAD TEXT EXIST
                        if($.validationEngine.settings.allrules[customAjaxRule].alertTextLoad){

                            if(!$("div."+fieldId+"formError")[0]){
                                return $.validationEngine.buildPrompt(ajaxCaller,$.validationEngine.settings.allrules[customAjaxRule].alertTextLoad,"load");
                            }else{
                                $.validationEngine.updatePromptText(ajaxCaller,$.validationEngine.settings.allrules[customAjaxRule].alertTextLoad,"load");
                            }
                        }
                    },

 

struts.xml文件： 

        <struts>
    <package name="json" extends="json-default">
        <!--驗證-->
        <action name="validate" class="com.bw30.zjvote.action.ValidateAction"
            method="vali">
            <result type="json">
            <param name="excludeProperties">msg</param>//jsonplugin-0.32.jar
            </result>
        </action>

    </package>
</struts>

validateAction 

public String vali() {
        ActionContext ac = ActionContext.getContext();
        HttpServletRequest request = (HttpServletRequest) ac
        .get(ServletActionContext.HTTP_REQUEST);
        String validateId = request.getParameter("validateId");
        logger.info("vali() - String validateId=" + validateId);

        String validateValue = request.getParameter("validateValue");
        String validateError = request.getParameter("validateError");
        logger.info("vali() - String validateError=" + validateError);
                //注意下面的順序，感覺這是個缺陷之一，不過可以在jquery.validationEngine.js更改，
        jsonValidateReturn.add(validateId);
        jsonValidateReturn.add(validateError);
        if(validateValue.equals("chen"))
        jsonValidateReturn.add("true");
        else
            jsonValidateReturn.add("false");
        return SUCCESS;
    }

 

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

success: function(data){                    // GET SUCCESS DATA RETURN JSON
                        data = eval( "("+data+")");             // GET JSON DATA FROM PHP AND PARSE IT
                        ajaxisError = data.jsonValidateReturn[2];//這裏官方文檔寫死了，可以根據自己需求更改。
                        customAjaxRule = data.jsonValidateReturn[1];//這裏官方文檔寫死了，可以根據自己需求更改。
                        ajaxCaller = $("#"+data.jsonValidateReturn[0])[0];
                        fieldId = ajaxCaller;
                        ajaxErrorLength = $.validationEngine.ajaxValidArray.length;
                        existInarray = false;

                         if(ajaxisError == "false"){            // DATA FALSE UPDATE PROMPT WITH ERROR;

                            _checkInArray(false)                // Check if ajax validation alreay used on this field

                            if(!existInarray){                  // Add ajax error to stop submit
                                $.validationEngine.ajaxValidArray[ajaxErrorLength] =  new Array(2);
                                $.validationEngine.ajaxValidArray[ajaxErrorLength][0] = fieldId;
                                $.validationEngine.ajaxValidArray[ajaxErrorLength][1] = false;
                                existInarray = false;
                            }

用到了jsonplugin-0.32.jar這個包在附件裏面，其他struts的包，自己添加。