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>
我们来看程序运行的效果：
