问题描述
用户登陆界面，想要实现输入账号之后离开输入框就验证该账号是否存在，输入角色、账号、密码之后，点击登录，如果正确就跳转到index.jsp，错误不跳转并且在密码输入框下显示提示信息；有一个没输入就提示，信息也是在密码输入框下。我现在的问题是：若果什么也不输，点击登录，会闪一下，但闪过之后就是重置了页面。输入正确也是闪一下就重置页面.账号验证没问题，就是登录有问题，但是搞不定，大侠们看看吧！ login.jsp<form id="form" name="form" method="post" action="" ><table border="0"><tr><td align="right">角色类型：</td><td><select name="role" id="role" onBlur="checkRole(this)"><option value="0">-请选择角色-</option><%List<Role> list = new ArrayList<Role>();RoleDao dao = new RoleDaoImpl();list = dao.findAllRoles();//调用实现类的查询全部方法for (int i = 0; i < list.size(); i++) {Role r = list.get(i);%><option value="<%=r.getR_id()%>"><%=r.getR_name()%></option><%}%></select></td><td align="left"> <span id="roleSpan"></span> </td></tr><tr><td align="right">账号：</td><td><input type="text" name="number" id="number" onblur="checkNumber(this)"></td> <td width="256" align="left"> <span id="numberSpan"></span> </td></tr><!-- 当输入名字后离开输入框即调用--><tr><td align="right">密码：</td><td><input type="password" name="pwd" id="pwd" onBlur="checkPsw(this)" ></td><td align="left"> <span id="pwdSpan"></span> </td></tr><tr> <td align="left"> <span id="feedback_info"></span></td></tr><tr><td colspan="1"> <input type="submit" value="登录" onclick="checkLogin(this.form)"/> <input type="button" value="注册"onclick="javascript:window.location.href='User/Register.jsp'"></td></tr></table></form>login.jsvar xmlHttp; function createXMLHttpRequest() { if (window.XMLHttpRequest) { var xmlHttp = new XMLHttpRequest(); //mozilla浏览器 } else if (window.ActiveXObject) { try { var xmlHttp = new ActiveX0bject("Msxml2.XMLHTTP"); //IE老版本 } catch (e) { } try { var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //IE新版本 } catch (e) { } } if (!xmlHttp) { window.alert("不能创建XMLHttpRequest对象实例"); return false; } else return xmlHttp; ////}///////花括号放错地方 } // 检查账号，给出提示信息 function checkNumber(Number) { var numberSpan = document.getElementById("numberSpan"); if (Number.value == "") { numberSpan.innerHTML = "账号必须填写".fontcolor("red"); return false; } else { xmlHttp = createXMLHttpRequest(); //createXMLHttpRequest申明的是局部变量，这里访问不到xmlHttp，要给xmlHttp变量赋值才行 var url="servlet/CheckNumberServlet?number="+Number.value+"&LoginTime="+new Date().getTime(); url = encodeURI(url); //转换码后再传输 xmlHttp.open("GET",url,true);//加时间戳防止IE缓存 //xmlhttp.setRequestHeader( "Content-Type", "text/html;charset=UTF-8" ); xmlHttp.onreadystatechange = handleStateChange1; xmlHttp.send(null); return true; } } function handleStateChange1() { var numberSpan = document.getElementById("numberSpan"); if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { // alert("来自服务器的响应："+xmlHttp.responseText); if (xmlHttp.responseText == 'true') {///////responseText是字符串，不能和boolean变量直接比较 // alert("存在"); numberSpan.innerHTML = "<img src='Img/g.gif'>"; document.getElementById("feedback_info").innerHTML=""; return true; } else if (xmlHttp.responseText == 'false') {///////responseText是字符串，不能和boolean变量直接比较 // alert("不存在"); numberSpan.innerHTML = "账号不存在".fontcolor("red"); return false; } } else alert("服务器端错误"); } } // 检查密码，给出提示信息 function checkPsw(pswNode) { var spanNode1 = document.getElementById("pswSpan"); var Role= document.getElementById("role"); var Number= document.getElementById("number"); if (pswNode.value == "") { spanNode1.innerHTML = "密码必须填写".fontcolor("red"); return false; } else { pwdSpan.innerHTML = "<img src='Img/g.gif'>"; document.getElementById("feedback_info").innerHTML=""; return true; } } // 检查是否选中角色 function checkRole(selNode) { var index = selNode.selectedIndex;// 获得选中下标 var spanNode1 = document.getElementById("roleSpan"); if (index <= 0) { spanNode1.innerHTML = "必须选择角色".fontcolor("red"); return false; } else { spanNode1.innerHTML = "<img src='Img/g.gif'>"; document.getElementById("feedback_info").innerHTML=""; return true; } } // 检查表单 function checkLogin(o) { var Role=o.role; var Number= o.number; var Pwd= o.pwd; if(checkNumber(Number)&&checkPsw(Psw) &&checkRole(Role)) { xmlHttp = createXMLHttpRequest(); //createXMLHttpRequest申明的是局部变量，这里访问不到xmlHttp，要给xmlHttp变量赋值才行 var url="servlet/CheckLoginServlet?number="+Number.value+"&role="+Role.value+"&pwd="+Pwd.value+"&LoginTime="+new Date().getTime(); url = encodeURI(url); //转换码后再传输 xmlHttp.open("GET",url,true);//加时间戳防止IE缓存 //xmlhttp.setRequestHeader( "Content-Type", "text/html;charset=UTF-8" ); xmlHttp.onreadystatechange = handleStateChange2; xmlHttp.send(null); return true; } else{ document.getElementById("feedback_info").innerHTML="请填写每一项".fontcolor("red"); return false; } } function handleStateChange2() { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { //alert("来自服务器的响应：" + xmlHttp.responseText); if(xmlHttp.responseText == '0'){ document.getElementById("feedback_info").innerHTML="账号与密码不匹配".fontcolor("red"); return false; } else if(xmlHttp.responseText == '1'){ document.getElementById("feedback_info").innerHTML=""; window.location.href="index.jsp"; return true; } } else alert("服务器端错误"); } }chuckLoginservletpublic void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setContentType("text/html");doPost(request, response);// 调用doPost方法}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {request.setCharacterEncoding("utf-8");response.setContentType("text/html;charset=UTF-8");String number="";try {number = new String(request.getParameter("number").getBytes("ISO-8859-1"), "UTF-8");} catch (Exception e1) {System.out.println("number为空");}String role="0";int rID=0;try {role = new String(request.getParameter("role").getBytes("ISO-8859-1"), "UTF-8");rID=Integer.parseInt(role);//把获得的role的值转成整型} catch (Exception e1) {System.out.println(request.getParameter("role")+"******role");}String pwd="";try {pwd = new String(request.getParameter("pwd").getBytes("ISO-8859-1"), "UTF-8");} catch (Exception e) { System.out.println(request.getParameter("pwd")+"****pwd");}// String txt = new String(number.getBytes("ISO-8859-1"), "UTF-8");// System.out.println(txt+"********");PrintWriter out = response.getWriter();User u = new User();UserDao ud = new UserDaoImpl();u = ud.findUserByNumber(number);//通过账号找到用户对象if (u != null) {// 找到该用户int u_id = u.getU_id();// 获得该用户的IDUserRole ur = new UserRole();UserRoleDao urd = new UserRoleDaoImpl();ur = urd.findUserRoleByUserId(u_id);// 找到中间表UserRole的记录int r_id = ur.getRole().getR_id();// 由Userrole表找到Role表的相对应角色名称if (r_id==rID && u.getU_password().equals(pwd))// 如果数据中的角色和密码与之对应{out.write("1");//1表示验证通过} else {out.write("0");//0表示密码与账号不匹配}}out.flush();out.close();}
解决方案
checkLogin(this.form)"/> 这里是有问题的，知道this代表什么吗？它是代表input这个对象，而this.form就是代表input里面有一个 form这个属相的值，最关键是你的type="submit" 这个就是提交，而你的表单action都是空的，所以那里都没提交上去你这里有四个错误
解决方案二：
var Role=document.getElementById("role"); var Number=document.getElementById("number"); var Pwd=document.getElementById("pwd");其它地方也需要改呀if(checkNumber(Number)&&checkPsw(Psw) &&checkRole(Role)) 这里改了吗你上面获得是对象，并且Number这个是js的内置数字对象，不要使用，另外改个名字最好可以改为 var roleValue=document.getElementById("role").value; var num=document.getElementById("number").value; var pwd=document.getElementById("pwd").value;然后if(checkNumber(num)&&checkPsw(pwd) &&checkRole(roleValue)) 所以都需要修改呀，还有可能其它地方也需要修改，注意下