1、现在注册成功之后，我们来到登录页面，登录页面在于
在登录页面。我们也需要向注册页面一样对登录的用户名、密码 验证码等在jsp页面中进行校验，校验我们单独放置一个login.js文件中进行处理，然后login.jsp加载该js文件
我们来看看login.js的代码和regist.js的代码一样，这里就不用花太多时间进行介绍
$(function() { /* * 1. 让登录按钮在得到和失去焦点时切换图片 */ $("#submit").hover( function() { $("#submit").attr("src", "/goods/images/login2.jpg"); }, function() { $("#submit").attr("src", "/goods/images/login1.jpg"); } ); /* * 2. 给注册按钮添加submit()事件，完成表单校验 */ $("#submit").submit(function(){ $("#msg").text(""); var bool = true; $(".input").each(function() { var inputName = $(this).attr("name"); if(!invokeValidateFunction(inputName)) { bool = false; } }); return bool; }); /* * 3. 输入框得到焦点时隐藏错误信息 */ $(".input").focus(function() { var inputName = $(this).attr("name"); $("#" + inputName + "Error").css("display", "none"); }); /* * 4. 输入框推动焦点时进行校验 */ $(".input").blur(function() { var inputName = $(this).attr("name"); invokeValidateFunction(inputName); }) }); /* * 输入input名称，调用对应的validate方法。 * 例如input名称为：loginname，那么调用validateLoginname()方法。 */ function invokeValidateFunction(inputName) { inputName = inputName.substring(0, 1).toUpperCase() + inputName.substring(1); var functionName = "validate" + inputName; return eval(functionName + "()"); } /* * 校验登录名 */ function validateLoginname() { var bool = true; $("#loginnameError").css("display", "none"); var value = $("#loginname").val(); if(!value) {// 非空校验 $("#loginnameError").css("display", ""); $("#loginnameError").text("用户名不能为空！"); bool = false; } else if(value.length < 3 || value.length > 20) {//长度校验 $("#loginnameError").css("display", ""); $("#loginnameError").text("用户名长度必须在3 ~ 20之间！"); bool = false; } return bool; } /* * 校验密码 */ function validateLoginpass() { var bool = true; $("#loginpassError").css("display", "none"); var value = $("#loginpass").val(); if(!value) {// 非空校验 $("#loginpassError").css("display", ""); $("#loginpassError").text("密码不能为空！"); bool = false; } else if(value.length < 3 || value.length > 20) {//长度校验 $("#loginpassError").css("display", ""); $("#loginpassError").text("密码长度必须在3 ~ 20之间！"); bool = false; } return bool; } /* * 校验验证码 */ function validateVerifyCode() { var bool = true; $("#verifyCodeError").css("display", "none"); var value = $("#verifyCode").val(); if(!value) {//非空校验 $("#verifyCodeError").css("display", ""); $("#verifyCodeError").text("验证码不能为空！"); bool = false; } else if(value.length != 4) {//长度不为4就是错误的 $("#verifyCodeError").css("display", ""); $("#verifyCodeError").text("错误的验证码！"); bool = false; } else {//验证码是否正确 $.ajax({ cache: false, async: false, type: "POST", dataType: "json", data: {method: "validateVerifyCode", verifyCode: value}, url: "/goods/UserServlet", success: function(flag) { if(!flag) { $("#verifyCodeError").css("display", ""); $("#verifyCodeError").text("错误的验证码！"); bool = false; } } }); } return bool; }
我们来看login.jsp的代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>登录</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <link rel="stylesheet" type="text/css" href="<c:url value='/jsps/css/user/login.css'/>"> <script type="text/javascript" src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script> <script src="<c:url value='/js/common.js'/>"></script> <!-- 引入login.js文件 --> <script type="text/javascript" src="<c:url value='/jsps/js/user/login.js'/>"></script> </head> <body> <div class="main"> <div><img src="<c:url value='/images/logo.gif'/>" /></div> <div> <div class="imageDiv"><img class="img" src="<c:url value='/images/zj.png'/>"/></div> <div class="login1"> <div class="login2"> <div class="loginTopDiv"> <span class="loginTop">传智会员登录</span> <span> <a href="<c:url value='/jsps/user/regist.jsp'/>" class="registBtn"></a> </span> </div> <div> <form target="_top" action="<c:url value='/index.jsp'/>" method="post" id="loginForm"> <input type="hidden" name="method" value="" /> <table> <tr> <td width="50"></td> <td><label class="error" id="msg"></label></td> </tr> <tr> <td width="50">用户名</td> <td><input class="input" type="text" name="loginname" id="loginname"/></td> </tr> <tr> <td height="20"> </td> <td><label id="loginnameError" class="error"></label></td> </tr> <tr> <td>密 码</td> <td><input class="input" type="password" name="loginpass" id="loginpass"/></td> </tr> <tr> <td height="20"> </td> <td><label id="loginpassError" class="error"></label></td> </tr> <tr> <td>验证码</td> <td> <input class="input yzm" type="text" name="verifyCode" id="verifyCode" value=""/> <img id="vCode" src="<c:url value='/VerifyCodeServlet'/>"/> <a id="verifyCode">换张图</a> </td> </tr> <tr> <td height="20px"> </td> <td><label id="verifyCodeError" class="error"></label></td> </tr> <tr> <td> </td> <td align="left"> <input type="image" id="submit" src="<c:url value='/images/login1.jpg'/>" class="loginBtn"/> </td> </tr> </table> </form> </div> </div> </div> </div> </div> </body> </html>
我们来看程序运行的效果：
