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数据
