fastadmin nice validator remote验证 json数据 ajax 验证失效

1、背景

最近接触到fastadmin，在处理表单验证方面，fastadmin使用的是Nice-validator验证插件，刚开始用着还挺爽，表单的验证也挺方便，毕竟人家已经提供了很多的验证规则，但是有这么个需求，那就是修改个人信息时需要确保账号的唯一性，也就是唯一性验证，这个人前端也想到了，给了你一个remote()远程验证，这个函数还可以传参数，逗号隔开即可，看起来也挺方便，但用起来有些困难。。。。

2、问题

先谈需求：1、账号唯一性验证 　　2、其它字段的验证　　3、ajax提交　　

再来看看具体遇到哪些问题：

1、远程验证remote 这玩意官网上说　 （图在下面）  　　　返回字符串说是可以直接显示，我后端用的php，我return 字符串也不行，  它说还有统一格式 $this->success('ok')，这样说也行，那行吧，人家官网上说格式统一，那咱试试，结果不显示信息，就是不管是否唯一，后端会返回一个msg，展示到前端页面上给用户看，但是$this->success()返回的是个json（我的这个success（）返回的是json），好吧，json，人家官网也有说json数据咋处理，照着官网的代码走一遍，结果。。。。。。js报错，提示说validator 不是个函数。。。。。我也是醉了，看看jq，有啊，看看jQuery.validator.js也有，顺序也没错。。。。有点让人无语　　　　然后想着用input的失去焦点blur函数来触发这个 验证  于是我就将 $('#form').validator()函数 写在了 blur函数里面，然后   还真别说，真的能用，，，，，

2、remote 能用了，也能显示msg信息了（如何显示msg信息？获取到了data中的msg然后用js添加到页面即可！有没有自动，fastadmin给我们准备好了的那种？不好意思，母鸡啊），但是其他字段的验证规则有失效了。。。。。然后没办法，在看看官方文档吧，就看到验证规则有两种绑定方式，一种是dom，一种是js，我好像两种都用了，那可以理解为啥其它字段的验证规则不能用了，冲突了，只能二选一，可是dom已经绑定了，不想再用js绑定了，这简单啊，把那个validator删掉，直接用jq，当input失去焦点时发起个ajax请求就完事了

3、ajax提交，发现验证成不成功都能发起ajax，毕竟ajax那玩意儿只要单击了就给你发起ajax了，而且ajax提交会导致验证只生效一次，第二次没反应。。。。

 js加载图片：

 3、解决办法

先贴出html

<form id="changepwd-form" class="form-horizontal" role="form" data-toggle="validator"
                                  autocomplete="off">

                                <div class="form-group">
                                    <label for="username" class="control-label col-xs-12 col-sm-2">名称:</label>
                                    <div class="col-xs-12 col-sm-4">
                                        <input type="text"
                                               data-rule="required;"
                                               id="username" name="username"
                                               class="layui-input form-control input-none" placeholder="姓名"
                                               value="{$username}">
                                        <div id="username_msg" style="color: red"></div>
                                    </div></div>

                                <div class="form-group">
                                    <label for="mobile" class="control-label col-xs-12 col-sm-2">联系手机号:</label>
                                    <div class="col-xs-12 col-sm-4">
                                        <input type="text" data-rule="required;mobile" id="mobile" name="mobile"
                                               class="layui-input form-control input-none" placeholder="手机号"
                                               value="{$mobile}">
                                    </div>
                                </div>
　　　　　　　　　　　　　　　　　　  <div class="form-group normal-footer">
                                    <label class="control-label col-xs-12 col-sm-2"></label>
                                    <div class="col-xs-12 col-sm-8 apply-submit">
                                        <button type="button" id="editBtn" class="check-btn">确定修改</button>
                                    </div>
                                </div>
  </form>

js：

<script>
    var flag = true;
    $(function () {
        /*检查名称是否唯一*/
        $('#username').blur(function () {
            /*动态获取用户名*/
            var username = $('#username').val();
            /*构造参数*/
            var params = {
                id: {$info.seller_id},
                username: username
            };
            $.ajax({
                type: "GET",
                url: "{:url('xxxxxxxxxxxx')}",
                data: params,
                dataType: "json",
                success: function (data) {
                    console.log(data)
                    /*显示提示信息*/
                    $('#username_msg').text(data.msg)
                    /*为0  即验证失败  为1即验证通过*/
                    if (data.code == 1) {
                        /*让flag为true*/
                        flag = true
                    } else {
                        /*验证未通过 false*/
                        flag = false
                    }
                },
                error: function (jqXHR) {
                    console.log("Error: " + jqXHR.status);
                }
            });
        })


        $('#editBtn').click(function () {
            /*用  isValid 函数 判断是否通过了验证*/
            $("#changepwd-form").isValid(function (pass) {
                if (pass) {
                    alert("通过！")
                    if (flag) {
                        console.log(33)
                        return false
                        var params = $('#changepwd-form').serializeArray();
                        //加载层
                        var index = layer.load(0, {shade: false});
                        console.log(params)
                        $.ajax({
                            type: "POST",
                            url: "{:url('xxxxxxxxxx')}",
                            data: params,
                            dataType: "json",
                            success: function (data) {
                                layer.close(index);
                                if (data.code == 200) {
                                    layer.msg(data.msg, {
                                        time: 1000 //1秒关闭（如果不配置，默认是3秒）
                                    }, function () {
                                        location.reload()
                                    });
                                }
                                console.log(data)
                            },
                            error: function (jqXHR) {
                                console.log("Error: " + jqXHR.status);
                            }
                        });
                    } else {/*验证未通过*/
                        layer.msg('请检查名称是否唯一');
                    }
                }
            })
        })
        
    })

</script>

php：

返回的是json数据

最重要的是isValid（）这个函数