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

表单的字段增量实时验证

/**
 * ajax处理字段增长
 * 验证用户输入是否正确
 * 直到正确用户才能提交表单
 */
 
var oXHR = null;
var iTimeoutId = null;                                    //定时标识符
 
$(document).ready(function() {
    $("#btnNext").attr("disabled", true);                 //禁用注册按钮
    //为每个待验证的字段添加onchange事件和onKeyup事件
    $("input.validation").each(function() {
        //为input 添加valid属性,并设定初值为false
        this.valid = false;                                //是否合法的标记    
        //this.onchange = validateField(this);
        //this.onkeyup = validateField(this);
        $(this).change(function(){
            validateField(this);                        //验证输入的是否合法
        });
        $(this).keyup(function() {
            validateField(this);                        //验证输入的是否合法
        });        
        
    });
});
/**
 * 验证字段是否合法
 * 有onChange事件和onKeyup事件触发
 * @param {} node
 */
function validateField(node) {
    
    //禁止注册按钮
    $("#btnNext").attr("disabled", true);
    //每次发送前，消除执之前的请求
    //在设定时间内,如果用户输入很快则超时时间会不断被清空
    if (iTimeoutId != null) {
        clearTimeout(iTimeoutId);
        iTimeoutId = null;
    }
    //设置oXHR对象
    if (!oXHR) {
        oXHR = new XMLHttpRequest();
    }else if (oXHR.readyState != 0){
        oXHR.abort();
    }
    var url = "fieldValidate.php?"+node.name+"="+encodeURIComponent(node.value);
    oXHR.open("get", url, true);
    //处理从服务器上获取的数据
    oXHR.onreadystatechange = function() {
        if (oXHR.readyState == 4) {
            if (oXHR.status==200 || oXHR.status == 304) {
                console.log(oXHR.responseText);
                var arrInfo = oXHR.responseText.split("||");
                var $img = $(node).next("img");                    //下一个img节点
                if (!eval(arrInfo[0])) {                
                    console.log(arrInfo[1]);
                    $img.attr("title", arrInfo[1]);
                    $img.show();
                    node.valid = false;
                }else {
                    $img.hide();
                    node.valid = true;
                }
                //每次验证后都要改变按钮next的状态
                $("#btnNext").attr("disabled", !node.valid);
            }else {
                console.log("连接服务器失败");
            }
        }
    };
    //定时发送(0.5s)
    iTimeoutId = setTimeout(function() {
        oXHR.send(null);
    }, 500);
}

后台脚本代码：

<?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";