JavaWeb网上图书商城完整项目--day02-6.ajax校验功能之页面实现

Posted 2020-09-16 luzhouxiaoshuai

1 、现在我们要在regist.js中实现ajax的功能,使用用户名到后台查询是否注册，邮箱是否到后台注册，验证码是否正确的功能

我们来看regist.js的代码

//该函数在html文档加载完成之后会调用
$(function() {
    /*
     * 变量所有的错误信息，调用一个方法来决定是否显示错误信息
     * */
    $(".errorClass").each(function() {
        showError($(this));//$(this)表示当前遍历的对象
    });
    
    
    //切换注册按钮的图片
    $("#submitBtn").hover(function () {
        //获得光标焦点
        $("#submitBtn").attr("src","/goods/images/regist2.jpg");
    },function(){
        //失去光标的焦点
        $("#submitBtn").attr("src","/goods/images/regist1.jpg");
        
        
    });
    
    //当输入框获得焦点的时候，隐藏label标签的内容
    $(".inputClass").focus(function() {
        //首先获得label标签的id
        var inputId = $(this).attr("id");
        var labelId = inputId+"Error";//label的id
        //清楚该标签的内容
        $("#"+labelId).text("");
        //让该标签不显示
        showError($("#"+labelId));
    });
    //当输入框失去焦点的时候，我们需要对输入的数据进行有效的校验，比如输入的电话号码是否合法，邮箱是否合法
    $(".inputClass").blur(function() {
        //首先判断当前是那个input输入框被调用了
        var inputId = $(this).attr("id");
        //;
        //调用对应的校验方法
        var functionName = "validate"+inputId;//获得需要调用的验证函数，如果是id为loginname，就调用validateloginname()函数进行验证
        switch(functionName){
        case "validateloginname":
            validateloginname();
            break;
        case "validateloginpass":
            validateloginpass();
            break;    
        case "validatereloginrepass":
            validatereloginrepass();
            break;    
        case "validateemail":
            validateemail();
            break;    
        case "validateverifyCode":
            validateverifyCode();
            break;
        default:
            break;
        }
    });
    
    //对表单的提交进行校验
    $("#registForm").submit(function() {
        if(! validateloginname()){
            return false;
        }
        if(! validateloginpass()){
            return false;
        }
        if(! validatereloginrepass()){
            return false;
        }
        if(! validateemail()){
            return false;
        }
        if(! validateverifyCode()){
            return false;
        }
        
        return true;
    });
    
    
});

//  对输入的用户名进行合法性校验
function validateloginname(){
    //获得输入框中的内容
    var content = $("#loginname").val();
    // 非空校验
    if(!content){
        //内容为空，将后面的label显示出来
        $("#loginnameError").text("用户名不能为空！");
        //显示标签
        showError($("#loginnameError"));
        return false ;//不再执行后面的语句
    }
    //长度校验
    if(content.length <2 || content.length>20){
        //内容为空，将后面的label显示出来
        $("#loginnameError").text("用户名的长度必须在2-20之间！");
        //显示标签
        showError($("#loginnameError"));
        return false ;//不再执行后面的语句
    }
    //是否已经注册的校验
    //使用ajax到后台服务器去验证
    $.ajax({
        // 等于http:///goods/UserServlet?method=validateLoginname&loginname=content
        url:"/goods/UserServlet",
        data:{method:"validateLoginname",loginname:content},//其中method指的是要访问UserServlet中的那个方法;
        type:"POST",
        dataType:"json",
        async:false, //这里选择同步，如果选择异步操作还没有到服务器查询完结果，就直接返回结果了true了
        cache:false,
        success:function(result){
            if(result){
                //内容为空，将后面的label显示出来
                $("#loginnameError").text("用户名已经注册");
                //显示标签
                showError($("#loginnameError"));
                return false ;//不再执行后面的语句
            }
        }
        
    });
    
    
    return true;
}

//对输入的密码进行校验
function validateloginpass(){
    //获得输入框中的内容
    var content = $("#loginpass").val();
    // 非空校验
    if(!content){
        //内容为空，将后面的label显示出来
        $("#loginpassError").text("密码不能为空！");
        //显示标签
        showError($("#loginpassError"));
        return false ;//不再执行后面的语句
    }
    //长度校验
    if(content.length <3 || content.length>20){
        //内容为空，将后面的label显示出来
        $("#loginpassError").text("密码的长度必须在3-20之间！");
        //显示标签
        showError($("#loginpassError"));
        return false ;//不再执行后面的语句
    }
    return true;
}

//对输入的确认密码进行校验
function validatereloginrepass(){
    //获得输入框中的内容
    var content = $("#reloginrepass").val();
    // 非空校验
    if(!content){
        //内容为空，将后面的label显示出来
        $("#reloginrepassError").text("密码不能为空！");
        //显示标签
        showError($("#reloginrepassError"));
        return false ;//不再执行后面的语句
    }
    //判断两次输入的内容是否一致
    if(content !=  $("#loginpass").val()){
        //内容为空，将后面的label显示出来
        $("#reloginrepassError").text("两次输入的密码不一致!");
        //显示标签
        showError($("#reloginrepassError"));
        return false ;//不再执行后面的语句
    }
    return true;
    
}

// 对输入的邮箱地址进行校验
function validateemail(){
    //获得输入框中的内容
    var content = $("#email").val();
    // 非空校验
    if(!content){
        //内容为空，将后面的label显示出来
        $("#emailError").text("邮箱不能为空！");
        //显示标签
        showError($("#emailError"));
        return false ;//不再执行后面的语句
    }
    //判断输入的邮箱格式是否正确
    if(!/^([a-zA-Z0-9_-])[email protected]([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(content)){
        //内容为空，将后面的label显示出来
        $("#emailError").text("邮箱格式不正确!");
        //显示标签
        showError($("#emailError"));
        return false ;//不再执行后面的语句
    }
    
    //到后台服务器检查是否邮箱已经注册了
    //使用ajax到后台服务器去验证
    $.ajax({
        url:"/goods/UserServlet",
        data:{method:"validateEmail",email:content},//其中method指的是要访问UserServlet中的那个方法;
        type:"POST",
        dataType:"json",
        async:false, //这里选择同步，如果选择异步操作还没有到服务器查询完结果，就直接返回结果了true了
        cache:false,
        success:function(result){
            if(result){
                //内容为空，将后面的label显示出来
                $("#emailError").text("该邮箱已经被注册");
                //显示标签
                showError($("#emailError"));
                return false ;//不再执行后面的语句
            }
        }
        
    });
    
    return true;
}

//对输入的地址进行校验
function validateverifyCode(){
    //获得输入框中的内容
    var content = $("#verifyCode").val();
    // 非空校验
    if(!content){
        //内容为空，将后面的label显示出来
        $("#verifyCodeError").text("验证码不能为空！");
        //显示标签
        showError($("#verifyCodeError"));
        return false ;//不再执行后面的语句
    }
    //验证码的长度必须是4
    if(content.length != 4){
        //内容为空，将后面的label显示出来
        $("#verifyCodeError").text("验证码不正确!");
        //显示标签
        showError($("#verifyCodeError"));
        return false ;//不再执行后面的语句
    }
    
    // 到后台验证验证码是否正确
    //使用ajax到后台服务器去验证
    $.ajax({
        url:"/goods/UserServlet",
        data:{method:"validateVerifyCode",verifyCode:content},//其中method指的是要访问UserServlet中的那个方法;
        type:"POST",
        dataType:"json",
        async:false, //这里选择同步，如果选择异步操作还没有到服务器查询完结果，就直接返回结果了true了
        cache:false,
        success:function(result){
            if(!result){
                //内容为空，将后面的label显示出来
                $("#verifyCodeError").text("验证码不正确!");
                //显示标签
                showError($("#verifyCodeError"));
                return false ;//不再执行后面的语句
            }
        }
        
    });
    return true;
}


//判断当前元素是否存在内容，存在显示，不存在不显示
function showError( ele ){
    var text = ele.text();//获得该对象的文本值
    if(!text){
        ele.css("display","none");//让该对象消息
    }else{
        ele.css("display","");//显示对象
    }

}

//实现验证码图片的切换功能
function changeVerifyCode() {
    $("#imgVerifyCode").attr("src","/goods/VerifyCodeServlet?a="+new Date().getTime());
}