jQuery插件之表单验证插件validationEngine整合struts2 AJAX验证
jQuery插件之表单验证插件validationEngine


普通验证的例子：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":"* 用户名已被使用."

},

-------