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>
我們來看程序運行的效果:
?