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 ~ ~ ~寫到這裏，就寫完了，如果有幸幫助到你，請記得關注我，共同一起見證我們的成長。