jquery.validate 遠程驗證remote使用詳解

目的：

試了一下遠程驗證，試了好幾次，得出小結，可以記錄下，提醒以防繞路。

----------------直接貼圖，省事明了----------------

1.引用js

 

2.demo的html

<form action="/user/save" method="post" class="form form-horizontal" id="form-member-add">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>用戶名：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" placeholder="XXX" id="username" name="username">
            </div>
        </div>
</form>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript">
$(function(){    
    $("#form-member-add").validate({
        rules: {
            username: {
                required: true,
                minlength: 2,
                maxlength: 8,
                remote: {
                    url: '/verifyUsername',
                    type: 'post',
                    data: {
                        "name": function () {
                            return $("input[name='username']").val();
                        }
                    }
                }
            }
        },
        messages: {
            username: {
                required: '請輸入用戶名',
                remote: '用戶已存在'
            }
        },
        onkeyup: false,
        focusCleanup: true,
        success: "valid",
        submitHandler: function (form) {
            $(form).ajaxSubmit(function (data) {});            
        }
    });
});
</script>

⚠️注意：這個地方很多人都會出現不行的問題，所以，注意第24行的data里面的“name”，要和后台程序接口的參數名一致，url后面不用加參數，js會自己拼接請求。

3.demo程序接口

    @PostMapping("/verifyUsername")
    @ResponseBody
    public boolean verifyUsername(@RequestParam(value = "name",defaultValue = "") String name){
        if(StringUtils.isNotEmpty(name)) {
            return userService.verifyUsername(name);
        }

        return false;
    }

⚠️注意：js只接受true和false

4.結果

只要第2條“注意”的內容知道了，基本上也就沒什么問題了。