解决使用Validform插件，datatype里用ajax验证数据是否已经存在时出现的问题

       这几天写项目的时候，后台引用了一个网上的模版文件，而模版文件中，对与表单的验证，恰好使用了Validform这个插件，对于这种插件，我不得不说，好用是好用，就是坑太多，一不小心掉进去，就很难受了，百度了半天也不一定有好的结果。

       这不，今天下午，我就掉到了坑里，各种调试，各种百度，浪费了我大量的时间才搞定。其实我觉得吧，表单验证那么简单的问题，没必要费那么大力气，我大概是运气不好，百度了很多都没有得到完美的解释，根据正常的逻辑来，又因为Validform本身存在的坑无法绕过，所以我写这篇博客，以示后来者，希望遇到相同或者相似问题的人能看到这篇文章，节约时间。

      先说说问题：

 这是一个input框，我想先验证字符长度是否符合条件，再验证输入的用户名是不是在数据库已存在，若是存在则提示相应文字，若不存在则通过：



       代码：

<input type="text" class="input-text col-xs-12" value="" placeholder=""  id="user-name" name="username" datatype="username" nullmsg="用户名不能为空" errormsg="用户名为2到16位字符">

     可以看到我给datatype命名为username，根据Validform插件的规则 ，下面的js我是这样写的：

     错误的示范1：

datatype:{
username:function(gets,obj,curform,regxp){
var reg = /^\w{2,16}$/;
if(!reg.test(gets)) {
return false;
}
//验证用户名是否存在
$.ajax({
url:"doAdminGetAction.php?act=checkAdminExist",
data:{"username":gets},
dataType:'json',
type:'post',
success:function(data){
if(data.status == 0){
console.log(data.info)
return "此用户已存在";
}else{
console.log(data.info)
return true;
}

},
error:function(data){
console.log(data);
}
});
}
},

     在这里我首先申明：我的后台验证是没有问题的，我在ajax的success里打印了后台传过来的数据，都是正确的。
     但并没有什么卵用，本来根据Validform的使用规则，如果我return true则证明验证通过，我return false或者任意字段则证明验证不成功，会提示默认信息（input标签内errormsg里的值)或者提示的我编写的任意字段。但是经过实验，每次验证除了在控制台打印验证的正确信息，Validform本身并没有对我在success里做的操作有任何反应

   香菇蓝瘦，经过一番百度，我发现网上别人的解决方案没有在ajax的success里做直接的return true或者false或者是返回字符串的操作，都是在ajax外面做了return的操作，所以根据这个提示，我将代码改进成这样：
     

 错误的示范2：

datatype:{
username:function(gets,obj,curform,regxp){
var reg = /^\w{2,16}$/;
if(!reg.test(gets)) {
return false;
}
//验证用户名是否存在
var result;
$.ajax({
url:"doAdminGetAction.php?act=checkAdminExist",
data:{"username":gets},
dataType:'json',
type:'post',
success:function(data){
if(data.status == 0){
console.log(data.info)
result = data.info;
}else{
console.log(data.info)
result = true;
}

},
error:function(data){
console.log(data);
}
});
   console.log(data);
return result;

}
},

    结果还是没卵用，测试结果跟之前一模一样，用户名的重复验证形同虚设，输入数据库中已存在的用户名，会在控制台打印出“用户名已存在的信息”，但表单验证依然是通过的，很无奈，我在ajax里将result赋值，return result之前打印了result，结果
result的值竟然是undefine!!!!

     这个意思就是ajax中success里对result的赋值是没用的，程序直接跳过了ajax的验证，将结果返回给了Validform进行处理，
这是为什么呢？大家都知道ajax是异步提交，而与后台交互获取数据是需要时间的，这个时间远多余程序执行的时间，所以就会出现result跳过ajax的赋值，直接返回给插件，所以只需在ajax里加入
                                 async:false,
加上这个条件，则执行ajax时，会停掉除ajax外的所有程序，这样就能在result进行正确的赋值后再返回给插件处理。
因此，根据这个，我将代码修改成这样：

 正确的示范：

datatype:{
username:function(gets,obj,curform,regxp){
var reg = /^\w{2,16}$/;
if(!reg.test(gets)) {
return false;
}
//验证用户名是否存在
var result;
$.ajax({
url:"doAdminGetAction.php?act=checkAdminExist",
data:{"username":gets},
dataType:'json',
type:'post',
async:false,
success:function(data){
if(data.status == 0){
console.log(data.info)
result = data.info;
}else{
console.log(data.info)
result = true;
}

},
error:function(data){
console.log(data);
}
});

return result;

}
},

   运行一下，ok!





所以，总结一下就两点：
1. return true 或者 false  或者返回字符串,要写在ajax外面
2.ajax一定要加上async:false,   因为ajax默认这个的值为true

附上完整的前后端代码：
前端js：

//表单验证提交
$("#form-admin-add").Validform({
tiptype:2,
tipSweep:false,
submitForm:true,
ignoreHidden:true,
postonce:true,
ajaxPost:true,
datatype:{
username:function(gets,obj,curform,regxp){
var reg = /^\w{2,16}$/;
if(!reg.test(gets)) {
return false;
}
//验证用户名是否存在
var result;
$.ajax({
url:"doAdminGetAction.php?act=checkAdminExist",
data:{"username":gets},
dataType:'json',
type:'post',
async:false,
success:function(data){
if(data.status == 0){
console.log(data.info)
result = data.info;
}else{
console.log(data.info)
result = true;
}

},
error:function(data){
console.log(data);
}
});

return result;

}
},
callback:function(data){
console.log(da
9f53
ta);
//form[0].submit();
if(data.status==1){
layer.msg(data.info, {icon: data.status,time: 1000}, function(){
location.reload();//刷新页面
});
}else if(data.status==3){
layer.msg(data.info, {icon: data.status,time: 1000});
}else{
layer.msg(data.info, {icon: data.status,time: 3000});
}
var index =parent.$("#iframe").attr("src");
parent.layer.close(index);
//
}
});

后端代码：

if($act == 'checkAdminExist'){
$username = $_POST['username'];
$sql = "select id from shiguang_admin where username='{$username}'";
$rows = fetchOne($link,$sql);//获取是否有这个用户
if($rows){
echo ajaxReturn(0, "此管理员名已存在");
}else{
echo ajaxReturn(1, "此管理员名可用");
}
}

/**
 * 返回ajax需求的数据
 * @param int $status
 * @param char $msg
 * @param string/array $data
 * @param string $type
 * @return string  所需格式字符串
 */
function ajaxReturn($status,$msg,$data=null,$type="json"){
    $res = [
        'info'=>$msg,
        'status'=>$status,
        'data'=>$data
    ];
    if($type == "json"){
        header('Content-type: application/json');
        return json_encode($res);
    }else if($type == "xml"){
        header('Content-Type:text/xml; charset=utf-8');
        return arrayToXml($res);
    }else{
        exit("无此数据格式");
    }
    
}