jQuery插件之表单验证插件validationEngine
<div style="font-size: 16px;">功能：Tooltip效果网页表单校验，效果如下图：http://b33.photo.store.qq.com/http_imgload.cgi?/rurl4_b=fe4361fe6253a87d44279f18a59fe0e2ab4f08ccdd290f377df920e1c19e7ccf577db1647b8abd74c5062095e429ca4a067dbebc011b446d823edeae67d474687816dd5b7d91a27535b79d2accc9e8f41a41d2f5&a=37&b=33
普通验证的例子：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,length,ajax]" type="text" name="user" id="user" />
---------------------------------------------------------------------------------------------------------------------
注：本例使用4个验证规则，各规则之间以“,”分隔。
required：不可为空
custom：不能有特殊字符(这是一个自定义规则，自定义规则格式为custom[自定义规则名]，其中自定义规则在jquery.validationEngine-cn文件中定义。
length：长度必须在0-20位之间。
ajax：这是一个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] text" id="login_name" >
---------------------------------------------------------------------------------------------------------------------
此验证要实现：在文本框中输入用户名，文本框失去焦点时检测用户名是否已被注册，如果已被注册显示提示“用户名已被使用”，如果还没有被注册则显示提示“用户名可以使用”。
此处使用了验证规则ajax ，看看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 = $validateId;
$arrayToJs = $validateError;
if($validateValue =="karnius"){ //如果输入值=karnius
$arrayToJs = "true"; // 返回 TRUE
echo '{"jsonValidateReturn":'.json_encode($arrayToJs).'}'; // 验证成功返回json数组
}else{
for($x=0;$x<1000000;$x++){
if($x == 990000){
$arrayToJs = "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。
---------------------------------------------------------------------------------------------------------------------
最终效果如下：
http://b30.photo.store.qq.com/http_imgload.cgi?/rurl4_b=fe4361fe6253a87d44279f18a59fe0e25d421eac10c17226f6d9df9775a8a583df5cde3331515f9d48f9b82258d47c2083ff25c97eadd1a7815885a82796de46b2374beb1c9b886abea2e95afc9b30b15a790c4c&a=37&b=30
http://b40.photo.store.qq.com/http_imgload.cgi?/rurl4_b=fe4361fe6253a87d44279f18a59fe0e215f58b89faf1ef2367a6843f75a274bac76f8ebd955eeba695d4b8d7dd05a626f17ae0405dd170c92b5619674df788da55bba2fad87aae613b3460e908f42428ee421055&a=34&b=40
再附一段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;
}
---------------------------------------------------------------------------------------------------------------------
页:
[1]