首页 > 代码库 > JavaWeb网上图书商城完整项目--day02-6.ajax校验功能之页面实现
JavaWeb网上图书商城完整项目--day02-6.ajax校验功能之页面实现
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_-])+@([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()); }
JavaWeb网上图书商城完整项目--day02-6.ajax校验功能之页面实现
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。