【Web第十四天】EasyMall注册2
Easymall注册2
1.实现注册功能
1.1验证码点击更换
1.导入jQuery类库
2.选中验证码，并绑定点击事件
3.再访问ValiImageServlet类
改变src属性使之再次访问
1.1.验证码点击更换
验证码应该可以点击更换，要不然想更换验证码还需要刷新浏览器，就太麻烦了。
|
首先，需要在regist.jsp中引入jQuery库： 在WebRoot下新建文件夹js，然后将课前资料中的jquery-1.4.2.js文件拷贝到此文件夹中。
|
|
在regist.jsp中的验证码<img>标签中加上id属性： <img id="img" src="<%= request.getContextPath() %>/servlet/ValiImageServlet" alt="" />
在regist.jsp中的<head>标签内部加入如下代码： <!-- 引入jQuery库 --> <script type="text/javascript" src="<%= request.getContextPath() %>/js/jquery-1.4.2.js"></script>
<script type="text/javascript"> /* 点击图片换一张验证码 */ $(function(){ $("#img").click(function(){ /* 在页面中，任意一个元素发生改变，浏览器都会检测到，并且重新显示页面元素。 所以，只需要每次改变访问验证码后台的路径，浏览器即可改变元素的内容。 但是为了每次都是访问ValiImageServlet，资源路径不能改变， 但是可以拼接动态的参数，这样既不会影响访问的资源，又能改变元素的内容 */ $(this).attr("src","<%= request.getContextPath() %>/servlet/ValiImageServlet?time="+new Date().getTime()); }); }) </script> |
1.2.注册表单的js校验
1.提交时，触发onsubmit事件，可以阻止提交
2.再onsubmit中可以调用函数，再函数中进行判断，如果校验失败，先提示再return false；如果通过则return true
每次点击注册的时候，都将数据提交到后台进行校验，会增加服务器压力，所以可以在jsp页面中利用js进行数据的校验，如果数据有误，则无需提交到后台。
|
首先，在regist.jsp的<form>标签中加入onsubmit属性： <!-- onsubmit事件在表单提交时触发，该事件会根据返回值决定是否提交表单， 如果onsubmit="return true"会继续提交表单 如果onsubmit="return false"则不会提交表单
onsubmit中如果报错，并非代码问题， 而是MyEclipse工具在检查语法时认为代码有误，其实没有错误 --> <form onsubmit="return formObj.checkForm()" action="<%= request.getContextPath() %>/servlet/RegistServlet" method="POST">
|
|
在regist.jsp页面中的每个<input>后加上一个<span>标签，为了以后存放提示信息，例如： <tr> <td class="tds">用户名：</td> <td> <input type="text" name="username" value="<%=request.getParameter("username") == null?"":request.getParameter("username")%>"/> <span></span> </td> </tr>
|
|
在regist.jsp的<head>标签内的<script>标签中加入如下代码： /* 注册表单的js校验 */ var formObj = { "checkForm" : function(){ //1.非空检验 var flag1 = this.checkNull("username", "用户名不能为空！"); var flag2 = this.checkNull("password", "密码不能为空！"); var flag3 = this.checkNull("password2", "确认密码不能为空！"); var flag4 = this.checkNull("nickname", "昵称不能为空！"); var flag5 = this.checkNull("email", "邮箱不能为空！"); var flag6 = this.checkNull("valistr", "验证码不能为空！"); //2.两次密码是否一致 var flag7 = this.checkPassword("password", "两次密码不一致！"); //3.邮箱格式校验 var flag8 = this.checkEmail("email", "邮箱格式不正确！");
return flag1&&flag2&&flag3&&flag4&&flag5&&flag6&&flag7&&flag8; }, /* 非空校验 */ "checkNull" : function(name,msg){ var value = $("input[name='"+name+"']").val(); //清空之前的提示消息 this.setMsg(name, "");
if(value.trim() == ""){ //设置提示消息 this.setMsg(name,msg); return false; } return true; }, //设置错误提示消息 "setMsg" : function(name,msg){ $("input[name='"+name+"']").nextAll("span").html(msg).css("color","red"); }, /* 检查两次密码是否一致 */ "checkPassword" : function(name,msg){ var pw1 = $("input[name='"+name+"']").val(); var pw2 = $("input[name='"+name+"2']").val(); if(pw1 != "" && pw2 != "" && pw1 != pw2){ //设置提示消息 this.setMsg(name+"2", msg); return false; } return true; }, /* 检查邮箱格式是否正确 */ "checkEmail" : function(name,msg){ var email = $("input[name='"+name+"']").val(); var regExp = /^\w+@\w+(.\w+)+$/; if(email != "" && !regExp.test(email)){ this.setMsg(name, msg); return false; } return true; } } |
|
为了提高页面的友好性，当鼠标失去焦点时也应该进行提示。 在regist.jsp的<script>标签内的文档就绪事件中加入如下代码： /* 给所有输入框添加失去输入焦点事件，当失去输入焦点时进行非空校验或者密码一致校验或者邮箱格式校验 */ //用户名 $("input[name='username']").blur(function(){ formObj.checkNull("username", "用户名不能为空！"); }); //密码 $("input[name='password']").blur(function(){ formObj.checkNull("password", "密码不能为空！"); }); //确认密码 $("input[name='password2']").blur(function(){ formObj.checkNull("password2", "确认密码不能为空！"); formObj.checkPassword("password", "两次密码不一致！"); }); //昵称 $("input[name='nickname']").blur(function(){ formObj.checkNull("nickname", "昵称不能为空！"); }); //邮箱 $("input[name='email']").blur(function(){ formObj.checkNull("email", "邮箱不能为空！"); formObj.checkEmail("email", "邮箱格式不正确！") }); //验证码 $("input[name='valistr']").blur(function(){ formObj.checkNull("valistr", "验证码不能为空！"); }); }) |
代码无误而MyEclipse报错问题：
选中报错的jsp，右键->MyEclipse->Exclude From Validation
如果还有报错，可以：右键->MyEclipse->Run Validation，然后互相切换。
