JavaWeb网上图书商城完整项目--day02-14.登录功能的login页面处理
生活随笔
收集整理的這篇文章主要介紹了
JavaWeb网上图书商城完整项目--day02-14.登录功能的login页面处理
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
1、現(xiàn)在注冊成功之后，我們來到登錄頁面，登錄頁面在于
?
在登錄頁面。我們也需要向注冊頁面一樣對登錄的用戶名、密碼 驗(yàn)證碼等在jsp頁面中進(jìn)行校驗(yàn)，校驗(yàn)我們單獨(dú)放置一個login.js文件中進(jìn)行處理，然后login.jsp加載該js文件
?
我們來看看login.js的代碼和regist.js的代碼一樣，這里就不用花太多時間進(jìn)行介紹
$(function() {/** 1. 讓登錄按鈕在得到和失去焦點(diǎn)時切換圖片*/$("#submit").hover(function() {$("#submit").attr("src", "/goods/images/login2.jpg");},function() {$("#submit").attr("src", "/goods/images/login1.jpg");});/** 2. 給注冊按鈕添加submit()事件，完成表單校驗(yàn)*/$("#submit").submit(function(){$("#msg").text("");var bool = true;$(".input").each(function() {var inputName = $(this).attr("name");if(!invokeValidateFunction(inputName)) {bool = false;}});return bool;});/** 3. 輸入框得到焦點(diǎn)時隱藏錯誤信息*/$(".input").focus(function() {var inputName = $(this).attr("name");$("#" + inputName + "Error").css("display", "none");});/** 4. 輸入框推動焦點(diǎn)時進(jìn)行校驗(yàn)*/$(".input").blur(function() {var inputName = $(this).attr("name");invokeValidateFunction(inputName);}) });/** 輸入input名稱，調(diào)用對應(yīng)的validate方法。* 例如input名稱為：loginname，那么調(diào)用validateLoginname()方法。*/ function invokeValidateFunction(inputName) {inputName = inputName.substring(0, 1).toUpperCase() + inputName.substring(1);var functionName = "validate" + inputName;return eval(functionName + "()"); }/** 校驗(yàn)登錄名*/ function validateLoginname() {var bool = true;$("#loginnameError").css("display", "none");var value = $("#loginname").val();if(!value) {// 非空校驗(yàn)$("#loginnameError").css("display", "");$("#loginnameError").text("用戶名不能為空！");bool = false;} else if(value.length < 3 || value.length > 20) {//長度校驗(yàn)$("#loginnameError").css("display", "");$("#loginnameError").text("用戶名長度必須在3 ~ 20之間！");bool = false;}return bool; }/** 校驗(yàn)密碼*/ function validateLoginpass() {var bool = true;$("#loginpassError").css("display", "none");var value = $("#loginpass").val();if(!value) {// 非空校驗(yàn)$("#loginpassError").css("display", "");$("#loginpassError").text("密碼不能為空！");bool = false;} else if(value.length < 3 || value.length > 20) {//長度校驗(yàn)$("#loginpassError").css("display", "");$("#loginpassError").text("密碼長度必須在3 ~ 20之間！");bool = false;}return bool; }/** 校驗(yàn)驗(yàn)證碼*/ function validateVerifyCode() {var bool = true;$("#verifyCodeError").css("display", "none");var value = $("#verifyCode").val();if(!value) {//非空校驗(yàn)$("#verifyCodeError").css("display", "");$("#verifyCodeError").text("驗(yàn)證碼不能為空！");bool = false;} else if(value.length != 4) {//長度不為4就是錯誤的$("#verifyCodeError").css("display", "");$("#verifyCodeError").text("錯誤的驗(yàn)證碼！");bool = false;} else {//驗(yàn)證碼是否正確 $.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("錯誤的驗(yàn)證碼！");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>驗(yàn)證碼</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>我們來看程序運(yùn)行的效果：
?
轉(zhuǎn)載于:https://www.cnblogs.com/kebibuluan/p/6848208.html
總結(jié)
以上是生活随笔為你收集整理的JavaWeb网上图书商城完整项目--day02-14.登录功能的login页面处理的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【147天】尚学堂高淇Java300集视
- 下一篇： java美元兑换,（Java实现） 美元