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

表单增量验证

JavaScript代码：

/**
 * JQuery+原生JavaScript
 */
$(document).ready(function() {
    $("#btnSignUp").attr("disabled", true);            //禁用注册按钮
    //为每个待验证的字段添加onchange事件
    $("input.validation").each(function() {
        //为input 添加valid属性,并设定初值为false
        this.valid = false;                            
        $(this).change(function(){
            validateField(this);                        //验证输入的是否合法
        });
    })
});
/**
 * ajax：由服务器判断字段是否合法
 * 改变valid属性值
 * @param {DOM} node
 */
function validateField(node) {
    var url = "formValidate.php?"+node.name+"="+node.value;
    //var data = {$("node").attr("name"):encodeURIComponent($("node").val())};
    //怎样确定是否执行成功,$.ajax替换提示错误
    $.get(url, function(data) {
        //处理返回成功的数据
        //根据返回的数据判断输入是否合法
        var arrInfo = data.split("||");
        var $img = $(node).next("img");                //错误图标
        //应先判断数组是否为空
        //------
        if (!eval(arrInfo[0])) {
            //输入的数据不合法            
            $img.attr("title", arrInfo[1]);            //提示的错误信息                    
            //$img.css("display", "");                //css改不动！！        
            $img.show();                            //显示错误图标,直到输入合法
            node.valid = false;                        //改变valid值
        }else {
            $img.hide();                            //隐藏错误图标
            node.valid = true;
        }
        $("#btnSignUp").attr("disabled", !isFormValid())
    });                            
}
/**
 * 根据valid的属性值,判断表单是否可以提交
 * 如果有错误不能提交的
 * @return boolean
 */
function isFormValid() {
    var btnValid = true;
    $("input.validation").each(function() {
        btnValid = btnValid && this.valid;        //有一个false全部false
        console.log(this.valid);
    })
    return btnValid;
}
/**
 * 这个函数有待扩展
 * @param {} data
 * @param {} statusText
 * @param {} jqXHR
 */
function saveResult(data, statusText, jqXHR) {
    if (statusText == 'success'){ 
        //1、可以判断data是否为空
        //2、书本的方法
        var arrInfo = data.split("||");
        
    }
}

后台脚本处理代码PHP

<?php
    //表单增量验证
    /**
     * 只有用户名是否存在需要后台判断，其他只需js就可以了
     * js下载也需要时间的。。。
     */
    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 = '';
        }
    } elseif (isset($_GET['password'])) {
        $password = $_GET['password'];
        //检查密码长度是否大于6
        if (strlen(trim($password)) < 6) {
            $message = "密码太短, 不安全";
        }elseif (strlen(trim($password)) > 12){
            $message = "密码过长";
        }else {
            $valid = TRUE;
            $message = '';
        }
    } elseif (isset($_GET['confirePassword'])) {
        //判断确认密码是否正确
        //这个有问题，因为每次只发送一个键值对故不知道$password
        /*$confirePassword = $_GET['confirePassword'];
        if ($confirePassword != $password){
            $message = '两次输入密码不一致';
        }else {
            $valid = TRUE;
            $message = '';
        }*/
        $valid = TRUE;
        $message = '';
        
    } elseif (isset($_GET['email'])) {
        $email = $_GET['email'];
        //判断邮箱是否合法
        $pattern = '/^[_a-z0-9-]+(\.[_a-z0-9-])*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/';
        if ( !preg_match($pattern, $email) ) {
            $message = "邮箱不可用";
        }else {
            $valid = TRUE;
            $message = '';
        }
        
    } elseif (isset($_GET['birthday'])) {
        
        $date = strtotime($_GET['birthday']);
        if (!is_numeric($date) or $date <0) {
            $message = "输入的日期不合法";
        }else {
            $valid = TRUE;
            $message = '';
        }
        
    }
    echo "$valid || $message";                //由值决定js的执行