jQuery插件之表单验证插件validationEngine

功能：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;  
} 

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