posabsolute-jQuery-Validation-Engine使用总结

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总结