<!-- S日志內容-->

jQuery插件之表單驗證插件validationEngine(個人感覺好用)

2010年05月03日 評論( 0 )|瀏覽( 125 ) 點 擊查看原文

功能：Tooltip效果網頁表單校驗，效果如下圖：

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

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

這個插件支持大部分的瀏覽器，但由于有使用到了css3的陰影和圓角樣式，所以在IE瀏覽器下無法看到圓角和陰影效果(萬惡的IE)。

插件包含三個文件：

jquery.validationEngine.js //插件主JS文件

jquery.validationEngine-cn.js //驗證規則JS文件

validationEngine.jquery.css //樣式表文件

?

使用方法：

( 1 ) 引入jquery和插件js、css文件

---------------------------------------------------------------------------------------------------------------------

<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css" media="screen" charset="utf-8" />

<script src="js/jquery.js" type="text/javascript"></script>

<script src="js/jquery.validationEngine-cn" type="text/javascript"></script>

<script src="js/jquery.validationEngine.js" type="text/javascript"></script>

---------------------------------------------------------------------------------------------------------------------

?

( 2 ) 初始化插件

在頁面head區域加入如下代碼：

---------------------------------------------------------------------------------------------------------------------

$(document).ready(function() {

$("#formID").validationEngine() ; //formID是你要驗證的表單ID

})

---------------------------------------------------------------------------------------------------------------------

?

( 3 ) 添加表單元素驗證規則

驗證規則寫在表單元素的class屬性內即可。如驗證text文本框：

---------------------------------------------------------------------------------------------------------------------

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

---------------------------------------------------------------------------------------------------------------------

注：本例使用4個驗證規則，各規則之間以“,”分隔。

required：不可為空

custom[noSpecialCaracters]：不能有特殊字符(這是一個自定義規則，自定義規則格式為custom[自定義規則 名]，其中自定義規則在jquery.validationEngine-cn文件中定義。

length[0,20]：長度必須在0-20位之間。

ajax[ajaxUser]：這是一個Ajax驗證，后面詳細說明。

?

( 4 ) 驗證觸發

你可以在點擊提交按鈕后才觸發驗證

---------------------------------------------------------------------------------------------------------------------

$("#formID").validationEngine({

inlineValidation: false, //在這里修改

success : false,

failure : function() { callFailFunction() }

})

---------------------------------------------------------------------------------------------------------------------

?

默認的是在鼠標失去焦點后才開始驗證，也就是綁定的是blur事件，可修改。

---------------------------------------------------------------------------------------------------------------------

$("#formID").validationEngine({

validationEventTriggers:"keyup blur", //這里增加了個keyup，也就是鍵盤按鍵起來就觸發驗證

success : false,

failure : function() { callFailFunction() }

})

---------------------------------------------------------------------------------------------------------------------

?

( 5) 修改錯誤提示層位置

---------------------------------------------------------------------------------------------------------------------

$("#formID").validationEngine({

promptPosition: "topRight", // 有5種模式 topLeft, topRight, bottomLeft, centerRight, bottomRight

success : false,

failure : function() {

})

---------------------------------------------------------------------------------------------------------------------

?

( 6) Ajax驗證

---------------------------------------------------------------------------------------------------------------------

<input name="login_name" type="text" class="validate[ajax[ajaxUser]] text" id="login_name" >

---------------------------------------------------------------------------------------------------------------------

此驗證要實現：在文本框中輸入用戶名，文本框失去焦點時檢測用戶名是否已被注冊，如果已被注冊顯示提示“用戶名已被使用”，如果還沒有被注 冊則顯示提示“用戶名可以使用”。

?

此處使用了驗證規則ajax[ajaxUser] ，看看jquery.validationEngine-cn中驗證規則定義：

---------------------------------------------------------------------------------------------------------------------

"ajaxUser":{

"file":"validateUser.asp" //后臺腳本文件，插件會POST三個參數：validateError；validateId；validateValue，后臺腳本直接 request即可

"alertTextOk":"* 用戶名可以使用.",

"alertTextLoad":"* 檢查中, 請稍后...",

"alertText":"* 用戶名已被使用."

},

---------------------------------------------------------------------------------------------------------------------

說明：后臺腳本文件必須返回json格式數據。

插件官方提供的示例為php腳本，代碼如下：

---------------------------------------------------------------------------------------------------------------------

<?php

$validateValue=$_POST['validateValue']; //獲取post參數：文本框值

$validateId=$_POST['validateId']; //獲取post參數：文本框ID

$validateError=$_POST['validateError'];

$arrayToJs = array(); //定義json返回數組，順序必須為validateId、validateError、returnValue

$arrayToJs[0] = $validateId;

$arrayToJs[1] = $validateError;

if($validateValue =="karnius"){ //如果輸入值=karnius

$arrayToJs[2] = "true"; // 返回 TRUE

echo '{"jsonValidateReturn":'.json_encode($arrayToJs).'}'; // 驗證成功返回json數組

}else{

for($x=0;$x<1000000;$x++){

if($x == 990000){

$arrayToJs[2] = "false"; // 返回 TRUE

echo '{"jsonValidateReturn":'.json_encode($arrayToJs).'}'; // 驗證失敗返回json數組

}

}

}

?>

---------------------------------------------------------------------------------------------------------------------

由于本人程序使用的是ASP，參考官方提供的php后臺腳本編寫ASP代碼如下：

---------------------------------------------------------------------------------------------------------------------

<%

validateValue = request("validateValue")

validateId = request("validateId")

validateError = request("validateError")

sql="select * from Cms_Personnel where login_name='"&validateValue&"'"

dbCon.sqlStr = sql

set rs = dbCon.rsDB()

if not rs.eof then

response.Write("{'jsonValidateReturn':['"&validateId&"','"&validateError&"','false']}")

else

response.Write("{'jsonValidateReturn':['"&validateId&"','"&validateError&"','true']}")

end if

%>

---------------------------------------------------------------------------------------------------------------------

說明：php的json_encode(mixed $value )函數能對變量進行JSON 編碼。

asp中只要Rsponse

{"jsonValidateReturn":["validateId","validateError","returnValue"]}

形式字串即可。

注意response的JSON數組元素順序，必須是 validateId、validateError、returnValue 。

---------------------------------------------------------------------------------------------------------------------

最終效果如下：

?

再附一段JAVA的Ajax后臺腳本代碼:

---------------------------------------------------------------------------------------------------------------------

public String vali() {

ActionContext ac = ActionContext.getContext();

HttpServletRequest request = (HttpServletRequest) ac.get(ServletActionContext.HTTP_REQUEST);

String validateId = request.getParameter("validateId"); //獲取插件post參數validateId

logger.info("vali() - String validateId=" + validateId);

String validateValue = request.getParameter("validateValue"); //獲取插件post參數validateValue

String validateError = request.getParameter("validateError"); //獲取插件post參數validateError

logger.info("vali() - String validateError=" + validateError);

jsonValidateReturn.add(validateId);

jsonValidateReturn.add(validateError);

if(validateValue.equals("chen"))

jsonValidateReturn.add("true");

else

jsonValidateReturn.add("false");

return SUCCESS;

}

Form ValidationEngine