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()); }
我们来看看整个程序的运行效果:
posted on 2017-05-03 18:53 luzhouxiaoshuai 阅读(648) 评论(0) 编辑 收藏 举报