Jquery engine ajax验证

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

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

1、前台页面

html表单如下

 

引入的js库、css如下





页面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依赖如下:



    org.json
    json
    20160807

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

你可能感兴趣的:(Jquery engine ajax验证)