jquery.validate.js remote

jquery.validate.js对于数据的远程验证的使用,官方网址文档较为简陋,实例较为简单,其实jquery.validate.js功能是如此的强,本文章主要讲解remote 的使用方法。

　　

本实例中使用jquery.validate.js验证注册表单，其中验证码与用户名使用remote方式验证，以下为checkreg.js的源代码。

  
  
$(function(){  
    /*表单提交时的处理方式，必需放在验证条件设置前面*/ 
     $.validator.setDefaults({  
         submitHandler: function(){  
            /*使用AJAX方式提交表单*/ 
             $.ajax({  
                 type:"POST",  
                 url:"phpscript/cmd_User.php?cmd=add",  
                 data:{validateNum:$("#validateNum").val(),  
                       username:$("#username").val(),  
                       pwd:$("#pwd").val(),  
                       email:$("#email").val(),  
                       qq:$("#qq").val()  
                      },  
                 dataType:"json",  
                 cache:false,  
                 success:function(json){  
                    if(json.success=="true"){  
                          $("#reginfo").html("注册成功，系统现将为你自动登录。");  
                          $("#reginfo").css("color","green");  
                          setTimeout(sendIndex,1500);  
                     }else{  
                          $("#reginfo").html("注册失败，请检查是否填写正确。");  
                          $("#reginfo").css("color","red");  
                     }  
                 }  
             });  
            //form1.submit();  
         }  
     });  
       
    /*验证条件设置*/ 
     $("#regform1").validate({  
         event:"blur",  
            rules:{  
             validateNum:{required:true,number:true,remote:"phpscript/validateNum.php"},  
             username:{required:true,rangelength:[2,20],remote:"phpscript/exist_User.php"},  
             email:{required:true,email:true,maxlength:250},  
             pwd:{required:true,rangelength:[4,16]},  
             pwd2:{required:true,equalTo:'#pwd'},  
             qq:{required:false,number:true,rangelength:[5,12]}  
            },  
            messages:{  
                 validateNum:{remote:"请输入正确的验证码"},  
                 username:{remote:"用户名已经存在"}  
            }  
     });  
}); 

以下为 validateNum.php 的源代码

  
  
<?php  
Header("Cache-Control","no-store");          
Header("Pragma","no-cache");          
Header("Expires", "0");   
session_start();  
if($_GET["validateNum"]==$_SESSION["validate"]){  
    echo "true";  
}else{  
    echo "false";  
}  
?> 

以下为 exist_User.php 的源代码

  
  
<?php  
Header("Cache-Control","no-store");          
Header("Pragma","no-cache");          
Header("Expires", "0");   
session_start();  
include_once ('../include/mysql.inc.php');  
$mysqli= new mysqli(DBHOST,DBUSER,DBPWD,DBNAME,DBPORT);  
$mysqli->set_charset(DBCHAR);  
$sql = "select * from ".DBPREFIX."users where username='{$_GET['username']}'";  
    $result = $mysqli->query($sql);  
    $count = $mysqli->affected_rows;  
    if($count == 1){  
        echo "false";  
     }else{  
        echo "true";  
     }  
?> 

远程文件 validateNum.php, exist_User.php 文件只能输出 "true" 或 "false"，不能有其它输出，请注意。

本文转自：http://www.janefly.com/html/chengxurensheng/JQuery/2009/0608/2.html