Jquery engine ajax验证

本人搜索了Jquery engine ajax用法，基本上都是前篇一律的文章，而且很多都是不尽人意的，所以特来 写了一篇。

特别提示：使用的Jquery Engine版本是2.6.2

1、前台页面

html表单如下

 <form action="" id="formId">
    <input type="text" name="code" id="code" placeholder="验证码" class="validate[required,ajax[ajaxUserBaseCall]]">
 </form>

引入的js库、css如下

<link rel="stylesheet" href="/css/validationEngine.css">
<script src="/js/jquery-1.8.2.min.js"></script>
<script src="/js/jquery.validationEngine-zh_CN.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.validationEngine.js"></script>

页面js如下

  $('#formId').validationEngine({
           promptPosition: 'centerRight',
       });

       $('#formId').submit(function () {
           $(this).validationEngine('validate');
       });

2、js文件

jquery.validationEngine-zh_CN.js文件如下

"ajaxUserBaseCall": {
                    "url": "/login/isRightIndentifyingCode",
                    // you may want to pass extra data on the ajax call
                  //  "extraDataDynamic" : ['#code'],
                    "alertText": "* 此名称已被其他人使用",
                    "alertTextOk": "* 此帐号名称可以使用",
                    "alertTextLoad": "* 正在确认名称是否有其他人使用，请稍等。"
                },

3、服务器端处理

页面调用指定的url验证地址，传递两个参数，名称为：fieldId,fieldValue，对应的值为元素的ID和VALUE，这两个参数是默认传递的，服务器端根据这两个参数实现判断逻辑，然后返回包含三个元素的数组：元素ID、检查是否通过(true or false)、提示信息。注意，字符串需要使用双引号引起来。

java后台代码如下

   @ResponseBody
    @RequestMapping("isRightIndentifyingCode")
    public Object isright(String fieldId, String fieldValue, HttpServletRequest request){
        JSONArray jsonArray = new JSONArray();
        boolean flag = false;

        System.out.println(fieldId);
        System.out.println(fieldValue);

        String indentifyingCode = indentifyingCodeServiceI.getIndentifyingCode(1);
        if (fieldValue.equals(indentifyingCode)) {
            flag = true;
        }
        jsonArray.put(fieldId);
        jsonArray.put(flag);
        return jsonArray;
    }

1、这里值得注意的是,如果想要传递其它参数，使用的形式如下， "extraDataDynamic" : ['#email'],
其中email表示的是标签的id，表示传递的其它参数.

"ajaxUserBaseCall": {
                    "url": "/login/isRightIndentifyingCode",
                    // you may want to pass extra data on the ajax call
                 "extraDataDynamic" : ['#email'],
                    "alertText": "* 此名称已被其他人使用",
                    "alertTextOk": "* 此帐号名称可以使用",
                    "alertTextLoad": "* 正在确认名称是否有其他人使用，请稍等。"
                },

2、注意传递回去的是json数据。
我引入的jar包是：org.json.jar
gradle 依赖如下

// https://mvnrepository.com/artifact/org.json/json
compile group: 'org.json', name: 'json', version: '20160807'

maven依赖如下：

<!-- https://mvnrepository.com/artifact/org.json/json -->
<dependency>
    <groupId>org.json</groupId>
    <artifactId>json</artifactId>
    <version>20160807</version>
</dependency>

参考地址：
http://blog.csdn.net/jijunwu/article/details/19576345
http://code.ciaoca.com/jquery/validation-engine/