posabsolute-jQuery-Validation-Engine使用总结
下载地址
https://github.com/posabsolute/jQuery-Validation-Engine
这个是我在做CMS时找到的一个jquery插件，自己看了作者的使用手册，记录一下自己的使用心得。
css目录：是插件用到的显示样式需要的css文件所在文件夹
demos目录：是相关demo，例子
js目录:是一些核心的js文件
rundemo.bat是作者写的测试程序windows下的，我运行了，但是报错。我没查找原因，以后再看
rundemo.sh是linux下的测试程序
第一步在表单页面引入相应的文件
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js" type="text/javascript"></script>
或者导入本地的jquery.js
<script type="text/javascript" src="js/jquery-1.6.min.js"></script>
第二步引入本地化文件和验证引擎
下面是本地化文件，我们用中文那就引入 js/jquery.validationEngine-zh_CN.js
<script src="js/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>
下面这个是验证核心文件
<script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
最后引入规则样式
<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>
下面开始举例，我们模拟一个表单form提交到一个servlet中，判断提交的验证码是否正确。如果正确就
跳转到主页，否则提示验证码错误。
第一步。我们需要几个工具类
//AjaxValidationFormResponse这个类用来存储验证信息和负责把验证信息转换成json格式。是作者demo中提供的
public class AjaxValidationFormResponse {
// the html field id
private String id;
// true, the field is valid : the client logic displays a green prompt
// false, the field is invalid : the client logic displays a red prompt
private Boolean status;
// either the string to display in the prompt or an error
// selector to pick the error message from the translation.js
private String error;
public AjaxValidationFormResponse(String fieldId, Boolean s, String err) {
id = fieldId;
status = s;
error = err;
}
public String toString() {
StringBuffer json = new StringBuffer();
json.append("[\"").append(id).append("\",").append(status).append(",\"").append(error.toString()).append("\"]");
return json.toString();
}
}
第二部表单
<form action="/cms/LoginServlet" method="get" id="form1">
<input type="text" name="code" id="code" value="" />
</form>
效果如图
第三部分js代码
<script>
//这个方法是验证请求执行之前被调用
function beforeCall(form, options){
if (console)
console.log("Right before the AJAX form validation call");
return true;
}
// 这个方法是验证后的回调方法
function ajaxValidationCallback(status, form, json, options){
if (console)
console.log(status);
if (status === true) { //这里的status是后台返回的json中的true
window.location="/cms/main.jsp";//验证成功后重定向到main.jsp页面
alert("the form is valid!");
// uncomment these lines to submit the form to form.action
// form.validationEngine('detach');
// form.submit();
// or you may use AJAX again to submit the data
}
}
//这个是调用核心方法，formid是你表单的ID我这里是form1
jQuery(document).ready(function(){
jQuery("#formID").validationEngine({
ajaxFormValidation: true, //使用ajax调用
onAjaxFormComplete: ajaxValidationCallback, //设置验证后的回调函数
onBeforeAjaxFormValidation: beforeCall //设置验证前的调用的函数
});
});
以上是前台代码下面是java代码
String checkcode = req.getParameter("code"); // 接收用户输入的验证码
// 提取刚刚生成的验证码，使用session存储。验证码生成这里不再细说
String Sessioncodes = (String) req.getSession().getAttribute("codes");
这里就用到了前面提到的工具里。AjaxValidationFormResponse，使用了泛型
ArrayList<AjaxValidationFormResponse> errors = new ArrayList<AjaxValidationFormResponse>();
if (!Sessioncodes.equalsIgnoreCase(checkcode))
{
// 验证码不正确。跳转到登陆页面 //如果验证错这里要用false和checkcode,后面会有解释
errors.add(new AjaxValidationFormResponse("code", false,
"checkcode"));
}
else
{//如果验证没错误，这里要用true，“you got it”这个我拷贝例子里的具体我也不清楚
errors.add(new AjaxValidationFormResponse("code", true,
"You got it!"));
}
String json = "true"; //定义一个字符，为啥这是为true我也不知道，照搬开发者的源代码
if (errors.size() != 0) //如果链表里有错误转换为json格式数据
{
json = AjaxValidationFormResponse.genJSON(errors);
}
resp.getWriter().print(json);
============
下面这个方法就是把链表转换为字符串，自己可以用jackson或者gson或者别的工具转换，也可以用这个方法，这个是开发者在demo中用到的
public static String genJSON(ArrayList<AjaxValidationFormResponse> errors) {
StringBuffer json = new StringBuffer();
json.append('[');
for (int i = 0; i < errors.size(); i++) {
AjaxValidationFormResponse err = errors.get(i);
json.append(err.toString());
if (i < errors.size() - 1) {
json.append(',');
}
}
json.append(']');
return json.toString();
}
=============
以上就是大体代码，整个流程，就是js代码 jQuery("#formID").validationEngine，先执行，然后提交到后台验证，不管你验证成功还是失败，都要返回json格式数据，就是把ArrayList<AjaxValidationFormResponse> errors = new ArrayList<AjaxValidationFormResponse>();转换成相应的json返回，验证正确就在errors里加入
errors.add(new AjaxValidationFormResponse("code", true,"这里先自己随便写"));错误就加入
errors.add(new AjaxValidationFormResponse("code", false,"checkcode"));不要验证通过就不加入了，只加入错误的。我就犯了这样的错误，就一直报 ajax erros paraseerror错误，这个是重点
现在说说这里为什么是checkcode,因为在这个的国际化文件里有这个文件
js/languages/jquery.validationEngine-zh_CN.js
打开
看到了吧。我们自己按照他的格式自己添加一个就行
然后后台验证返回后 resp.getWriter().print(json);然后执行js部分的function ajaxValidationCallback函数
当返回中有true时，//new AjaxValidationFormResponse("code", true,"这里先自己随便写")
执行
if (status === true) //这里的status是后台返回的json中的true
window.location="/cms/main.jsp";//验证成功后重定向到main.jsp页面
Thinking-c3t总结
posted @ 2012-05-13 14:58 c3tc3tc3t 阅读(72) 评论(0) 编辑