解决使用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(data);
		//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("无此数据格式");
    }
    
}