5分钟学会jQuery Validate之remote用法

                                             jQuery Validate之 remote用法

一、前言

       之前博客已介绍过 jQuery Validate插件的使用 以及 自定义(正则)校验的使用；

              如有想了解的小伙伴，请前往以下链接：

              5分钟学会jQuery Validate之自定义(正则)校验

              5分钟学会jQuery Validate表单校验使用

       今天呢，在这里解锁下 jQuery Validate插件的 remote属性用法；

       remote：支持异步(ajax)校验；  eg：用户注册时，判断 手机号/用户名 是否存在。

       在此记录一下，分享给大家。

二、remote用法

/**
 * form表单 - remote用法
 *    flagSubmit：防止表单重复提交标识
 */
var flagSubmit = true;
function validateForm(){

    $("#prodForm").validate({

        // 是否验证后提交表单 true:只验证不提交表单
        debug: false,

        // 错误信息显示的位置
        errorPlacement: function(error, element) {
            // 将错误信息放在验证的元素后面
            error.appendTo(element.parent());
            // 自定义显示样式
            error.css("color", "#ff0000");
        },

        // 验证成功后提交表单
        submitHandler: function(form) {
            if(prodFormAjax){
                // 置为false,防止重复提交表单
                prodFormAjax = false;
                form.submit();
            }
        },

        // 校验规则
        rules: {
            mobile: {
                required: true,
                remote:{
                    type: "GET",
                    url: "/yys/checkParams",
                    data:{
                        mobile : function() {
                            return $("#mobile").val();
                        }
                    }
                }
            }
        },

        // 校验提示信息
        messages: {
            mobile: {
                required: '请填写手机号',
                remote: '手机号已注册'
            }
        }
    });

}

    /**
     * Controller - 查询手机号/用户是否重复
     */

    // 方式一
    @RequestMapping("/checkParams")
    @ResponseBody
    public boolean checkParams(HttpServletRequest request, String params) {
        List<SellerVo> list = sellerService.checkParams(params);
        if(CollectionUtils.isEmpty(list)) {
            return true;
        }
        return false;
    }


    // 方式二
    @RequestMapping("/checkParams")
    @ResponseBody
    public String checkParams(HttpServletRequest request, String params) {
        List<SellerVo> list = sellerService.checkParams(params);
        if(CollectionUtils.isEmpty(list)) {
            return "true";
        }
        return "false";
    }


    // 方式三
    @RequestMapping("/checkParams")
    public void checkParams(HttpServletResponse response String params) {
        PrintWriter pw = response.getWriter();
        List<SellerVo> list = sellerService.checkParams(params);
        if(CollectionUtils.isEmpty(list)) {
            pw.println(true);
            return;
        }
        pw.println(false);
    }

                       Now ~ ~ ~写到这里，就写完了，如果有幸帮助到你，请记得关注我，共同一起见证我们的成长。