Ajax通信控制模式之提交节流（二）

表单的字段增量实时验证

 1 /**
 2  * ajax处理字段增长
 3  * 验证用户输入是否正确
 4  * 直到正确用户才能提交表单
 5  */
 6  
 7 var oXHR = null;
 8 var iTimeoutId = null;                                    //定时标识符
 9  
10 $(document).ready(function() {
11     $("#btnNext").attr("disabled", true);                 //禁用注册按钮
12     //为每个待验证的字段添加onchange事件和onKeyup事件
13     $("input.validation").each(function() {
14         //为input 添加valid属性,并设定初值为false
15         this.valid = false;                                //是否合法的标记    
16         //this.onchange = validateField(this);
17         //this.onkeyup = validateField(this);
18         $(this).change(function(){
19             validateField(this);                        //验证输入的是否合法
20         });
21         $(this).keyup(function() {
22             validateField(this);                        //验证输入的是否合法
23         });        
24         
25     });
26 });
27 /**
28  * 验证字段是否合法
29  * 有onChange事件和onKeyup事件触发
30  * @param {} node
31  */
32 function validateField(node) {
33     
34     //禁止注册按钮
35     $("#btnNext").attr("disabled", true);
36     //每次发送前，消除执之前的请求
37     //在设定时间内,如果用户输入很快则超时时间会不断被清空
38     if (iTimeoutId != null) {
39         clearTimeout(iTimeoutId);
40         iTimeoutId = null;
41     }
42     //设置oXHR对象
43     if (!oXHR) {
44         oXHR = new XMLHttpRequest();
45     }else if (oXHR.readyState != 0){
46         oXHR.abort();
47     }
48     var url = "fieldValidate.php?"+node.name+"="+encodeURIComponent(node.value);
49     oXHR.open("get", url, true);
50     //处理从服务器上获取的数据
51     oXHR.onreadystatechange = function() {
52         if (oXHR.readyState == 4) {
53             if (oXHR.status==200 || oXHR.status == 304) {
54                 console.log(oXHR.responseText);
55                 var arrInfo = oXHR.responseText.split("||");
56                 var $img = $(node).next("img");                    //下一个img节点
57                 if (!eval(arrInfo[0])) {                
58                     console.log(arrInfo[1]);
59                     $img.attr("title", arrInfo[1]);
60                     $img.show();
61                     node.valid = false;
62                 }else {
63                     $img.hide();
64                     node.valid = true;
65                 }
66                 //每次验证后都要改变按钮next的状态
67                 $("#btnNext").attr("disabled", !node.valid);
68             }else {
69                 console.log("连接服务器失败");
70             }
71         }
72     };
73     //定时发送(0.5s)
74     iTimeoutId = setTimeout(function() {
75         oXHR.send(null);
76     }, 500);
77 }

后台脚本代码：

<?php
    //字段验证处理程序
    header("Content-type:text/html; charset=utf-8");
    $valid = FALSE;                                //表单是否合法
    $message = "An unknown error occurred";
    //只能判断null or true
    //$username = isset($_GET['username']) or $_GET['username'];
    if (isset($_GET['username'])) {
        $username = $_GET['username'];
        //检查用户名是否合法(长度、已占)
        $usernames = array();                    //存储虚拟数据
        $usernames[] = 'mackxu';
        $usernames[] = 'Tom';
        $usernames[] = 'Jim';
        $usernames[] = 'Jane';
        
        if (in_array($username, $usernames)) {
            $message = "用户名已存在";
        } elseif (strlen($username) < 6) {
            $message = "用户名不能少于6个字符";
        } else {
            $valid = TRUE;
            $message = '';
        }
    }

    echo "$valid || $message";

posted on 2012-10-30 13:42 mackxu 阅读(208) 评论(0) 编辑收藏举报