JavaWeb网上图书商城完整项目--day02-3.regist页面输入框失去焦点进行校验

 

当输入框输入数据之后，当输入框失去焦点的时候，我们需要对输入的数据进行校验

l  用户名校验：

• 用户名不能为空；
• 用户名长度必须在3 ~ 20之间；
• 用户名已被注册（需要异步访问服务器）。

l  登录密码校验：

• 密码不能为空；
• 密码长度必须在3 ~ 10之间；

l  确认密码校验：

• 确认密码不能为空；
• 两次输入不一致；

l  Email校验：

• Email不能为空；
• Email格式错误（/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/）；
• Email已被注册（需要异步访问服务器）；

l  验证码校验：

• 验证码不能为空；
• 验证码错误（需要异步访问服务器）；

我们来看程序的代码：

//该函数在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;    
        default:
            break;
        }
    });
    
    
});

//  对输入的用户名进行合法性校验
function validateloginname(){
    //获得输入框中的内容
    var content = $("#loginname").val();
    // 非空校验
    if(!content){
        //内容为空，将后面的label显示出来
        $("#loginnameError").text("用户名不能为空！");
        //显示标签
        showError($("#loginnameError"));
        return false ;//不再执行后面的语句
    }
    //长度校验
    if(content.length <3 || content.length>20){
        //内容为空，将后面的label显示出来
        $("#loginnameError").text("用户名的长度必须在3-20之间！");
        //显示标签
        showError($("#loginnameError"));
        return false ;//不再执行后面的语句
    }
    //是否已经注册的校验
    return true;
}

//对输入的密码进行校验
function validateloginpass(){
    
}

//对输入的确认密码进行校验
function validatereloginrepass(){
    
}

// 对输入的邮箱地址进行校验
function validateemail(){
    
}


//判断当前元素是否存在内容，存在显示，不存在不显示
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());
}

我们来看看运行的效果：

 

是否注册的校验我们放在后面实现因为需要用到ajax异步请求服务器

接下来我们实现validateloginpass的校验

//该函数在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;    
        default:
            break;
        }
    });
    
    
});

//  对输入的用户名进行合法性校验
function validateloginname(){
    //获得输入框中的内容
    var content = $("#loginname").val();
    // 非空校验
    if(!content){
        //内容为空，将后面的label显示出来
        $("#loginnameError").text("用户名不能为空！");
        //显示标签
        showError($("#loginnameError"));
        return false ;//不再执行后面的语句
    }
    //长度校验
    if(content.length <3 || content.length>20){
        //内容为空，将后面的label显示出来
        $("#loginnameError").text("用户名的长度必须在3-20之间！");
        //显示标签
        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(){
    
}

// 对输入的邮箱地址进行校验
function validateemail(){
    
}


//判断当前元素是否存在内容，存在显示，不存在不显示
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());
}

接下来我们来实现validatereloginrepass的校验

//该函数在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;    
        default:
            break;
        }
    });
    
    
});

//  对输入的用户名进行合法性校验
function validateloginname(){
    //获得输入框中的内容
    var content = $("#loginname").val();
    // 非空校验
    if(!content){
        //内容为空，将后面的label显示出来
        $("#loginnameError").text("用户名不能为空！");
        //显示标签
        showError($("#loginnameError"));
        return false ;//不再执行后面的语句
    }
    //长度校验
    if(content.length <3 || content.length>20){
        //内容为空，将后面的label显示出来
        $("#loginnameError").text("用户名的长度必须在3-20之间！");
        //显示标签
        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(){
    
}


//判断当前元素是否存在内容，存在显示，不存在不显示
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());
}

接下来我们验证邮箱地址是否有效validateemail

 

// 对输入的邮箱地址进行校验
function validateemail(){
    //获得输入框中的内容
    var content = $("#email").val();
    // 非空校验
    if(!content){
        //内容为空，将后面的label显示出来
        $("#emailError").text("邮箱不能为空！");
        //显示标签
        showError($("#emailError"));
        return false ;//不再执行后面的语句
    }
    //判断输入的邮箱格式是否正确
    if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(content)){
        //内容为空，将后面的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 ;//不再执行后面的语句
    }
    return true;
}

我们来看整个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;
        }
    });
    
    
});

//  对输入的用户名进行合法性校验
function validateloginname(){
    //获得输入框中的内容
    var content = $("#loginname").val();
    // 非空校验
    if(!content){
        //内容为空，将后面的label显示出来
        $("#loginnameError").text("用户名不能为空！");
        //显示标签
        showError($("#loginnameError"));
        return false ;//不再执行后面的语句
    }
    //长度校验
    if(content.length <3 || content.length>20){
        //内容为空，将后面的label显示出来
        $("#loginnameError").text("用户名的长度必须在3-20之间！");
        //显示标签
        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_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(content)){
        //内容为空，将后面的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 ;//不再执行后面的语句
    }
    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());
}

我们来看看整个程序的运行效果：