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=""? />
---------------------------------------------
注：本例使用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验证
---------------------------------------------
?
?
再附一段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;??
}?
---------------------------------------------
