JQuery插件validate的Remote使用

  JQuery.validate.js 在表单验证中经常使用,初学,对于其中Remote的使用说明一下.

1. 基本解释

    JQuery主要用于DOM树和CSS树的检索和后面的操作的一套方法,JQuery.validate.js是对JQuery的一个插件,可以认为是对JQuery在某个特殊场景下的扩展,而Validate就是对表单验证提供的扩展。

2. 场景解释

    用户进行注册用户的时候,要异步的判断用户名是否存在,给出提示信息。

3. 通过案例学习

      Html和JavaScript结合的脚本.

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 
  4 <head>
  5     <script src="../includes/libraries/javascript/jquery.js" type="text/javascript" charset="utf-8" ></script>
  6     <script src="../includes/libraries/javascript/jquery.plugins/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
  7         
  8     <script type="text/javascript">
  9         $().ready(function() {
 10             $("#signupForm").validate({
 11             
 12                 debug: false,
 13                 onkeyup:false,
 14                 /*忽略某些元素不做验证*/
 15                 //ignore: ".ignore",
 16                 
 17                 /*  更改错误信息显示的位置
 18                     Default:
 19                     errorPlacement: function(error, element) {  
 20                         error.appendTo(element.parent());  
 21                     }    
 22                     error.appendTo(element.parent());
 23                 */
 24                 /*
 25                 submitHandle: function(form){
 26                         alert("submited!");
 27                         form.submit();},
 28                 */
 29                 rules: {
 30                     /*
 31                     firstname: { 
 32                         required: function(){ return true;}},
 33                     */
 34                     
 35                     firstname: {
 36                         required: true,
 37                         remote: {
 38                             url: "Learn.php",
 39                             type: "post",
 40                             //DataType: "json",
 41                             data: {
 42                                 firstname: function(){
 43                                     return $("#firstname").val();
 44                                 }
 45                             }}},
 46                         
 47                     phonenum: {
 48                         required: true,
 49                         digits: true,
 50                         rangelength: [11,11]},
 51                         
 52                     email: {
 53                         required: true,
 54                         email: true},
 55                     
 56                    password: {
 57                         required: true,
 58                         minlength: 5},
 59                         
 60                    confirm_password: {
 61                         required: true,
 62                         minlength: 5,
 63                         equalTo: "#password"}
 64                 },
 65                 
 66                 messages: {
 67                     firstname: {
 68                         required: "请输入姓名",
 69                         remote: "请输入姓名,remote"},
 70                     
 71                     phonenum: {
 72                         required: "请输入手机号",
 73                         digits: "存在字符,非法手机号",
 74                         rangelength: "手机号位数不对"},
 75                         
 76                     email: {
 77                         required: "请输入Email地址",
 78                         email: "请输入正确的email地址"},
 79                     
 80                     password: {
 81                         required: "请输入密码",
 82                         minlength: jQuery.format("密码不能小于{0}个字 符")},
 83                         
 84                     confirm_password: {
 85                         required: "请输入确认密码",
 86                         minlength: "确认密码不能小于5个字符",
 87                         equalTo: "两次输入密码不一致不一致"}
 88                 },
 89                 
 90                 submitHandler: function(form){
 91                         alert("验证通过");}    
 92         
 93             });
 94         });            
 95     </script>
 96 
 97 </head>
 98 
 99 <body>
100     
101 
102     <form id="signupForm" method="post" action="">
103         <p>
104             <label for="firstname">姓氏</label>
105             <input id="firstname" name="firstname" />
106         </p>
107         
108         <p>
109             <label for="phonenum">手机</label>
110             <input id="phonenum" name="phonenum" />
111         </p>
112         
113         <p>
114             <label for="email">邮件</label>
115             <input id="email" name="email"  />
116         </p>
117      
118         <p>
119             <label for="password">密码</label>
120             <input id="password" name="password" type="password"  />
121         </p>
122       
123         <p>
124             <label for="confirm_password">确认密码</label>
125             <input id="confirm_password" name="confirm_password" type="password"  />
126         </p>
127         
128         <p>
129             <input class="submit" type="submit" value="提交"/>
130         </p>
131         
132     </form>
133 </body>
134 </html>

     

     后台PHP代码 BaseFunction.php

<?php

    function WriteLog($msg)
    {
        $filename = dirname(__FILE__) ."\Debug.log";
        $handler = null;

        if (($handler = fopen($filename, 'ab+')) !== false)
        {
            fwrite($handler, "
".'['.date('Y-m-d H:i:s').']'."	".$msg);
            fclose($handler);
        }
    }


    function CheckUser($UserName) {        
        if( $_REQUEST[$UserName] == 'php' ){
            exit("false");
        }
        else{
            exit("true");
        }
    }
?>

  后台PHP代码 Learn.php

<?php

    require("BaseFunction.php");
    CheckUser('firstname');
?>
原文地址:https://www.cnblogs.com/wildfox/p/5491811.html