Ajax Jquery 提交验证页面数据

前端之家收集整理的这篇文章主要介绍了Ajax Jquery 提交验证页面数据前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
$(function(){
    //需要检查为空的输入框的id数组
    var nullCheckArray = new Array(
        "username","password","tel"
    );
    //需要检查数组类型的输入框的id数组
    var numberCheckArray = new Array(
        "age","sex","tel"
    );

    $("#submit").click(function(){
        //检查为空
        checkNull(nullCheckArray);
        //检查数字类型
        checkNumber(numberCheckArray);
        //提交数据
        userInfoPost(/user/add.do);
    });

    //检查输入框是否为空
    function checkNull(idList){
        if(idList != null && idList.length > 0){
            for(var i = 0;i < idList.length;i++){
                var elem = $("#"+idList[i]);
                    var val = elem.val();
                    if($.trim(val) == ""){
                        alert(elem.prev().text+"不能为空!");
                        return false;
                    }
            }
            return true;
        }else{
            return false;
        }
    }

    //监听输入框输入类型
    function checkNumber(idList){
        if(idList != null && idList.length > 0){
            for(var i = 0;i < idList.length;i++){
                var elem = $("#"+idList[i]);
                //失去焦点事件
                elem.blur(function(){
                    var val = elem.val();
                    if(!$.isNumeric(val)){
                        alert(elem.prev.text+"为数字类型");
                        return false;
                    }
                });
            }
            return true;
        }else{
            return false;
        }
    }

    //根据id获取一个input元素的值
    function V(id){
        return $.trim($("#"+id).val());
    }

    //提交用户信息
    function userInfoPost(url){
        //取值
        var username = V("username");
        var password = V("password");
        var age = V("age");
        var sex = V("sex");
        var tel = V("tel");
        //封装js对象
        var userInfo = {
            "username" : username,"password" : password,"age" : age,"sex" : sex,"tel" : tel,};
        //提交
        $.ajax({
            type : "post",url : url,data : userInfo,success : function(data){
            //接收服务端返回值
            alert(data);
            //设置文本框不可编辑
            $(".user-info input[type=text]").each(function(){
                $(this).attr("readonly","readonly");
                $(this).attr("disabled","disabled");
            });
            //显示一个div
            $("#div1").css("display","block");
            //隐藏一个div
            $("#div2").css("display","none");
            }
        });
    }
});

猜你在找的Ajax相关文章