JavaWeb網上圖書商城完整項目--day02-14.登錄功能的login頁面處理

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">&nbsp;</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">&nbsp;</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">&nbsp;</td><td><label id="verifyCodeError" class="error"></label></td></tr><tr><td>&nbsp;</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>

我們來看程序運行的效果:

?

轉載于:https://www.cnblogs.com/kebibuluan/p/6848208.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/541386.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/541386.shtml
英文地址,請注明出處:http://en.pswp.cn/news/541386.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

php多線程是什么意思,多線程是什么意思

線程是操作系統能夠進行運算調度的最小單位&#xff0c;它被包含在進程之中&#xff0c;是進程中的實際運作單位&#xff0c;而多線程就是指從軟件或者硬件上實現多個線程并發執行的技術&#xff0c;具有多線程能力的計算機因有硬件支持而能夠在同一時間執行多于一個線程&#…

c++一個類創建多個對象_C ++ | 創建一個類的多個對象

c一個類創建多個對象In the below program, we are creating a C program to create multiple objects of a class. 在下面的程序中&#xff0c;我們正在創建一個C 程序來創建一個類的多個對象 。 /* C program to create multiple objects of a class */#include <iostrea…

Activity中與ListActivity中使用listview區別

一.Activity中與ListActivity中使用listview區別&#xff08;本身沒多大區別&#xff0c;只是ListActivity在listview的顯示上做了一些優化&#xff09;Activity中使用Listview步驟&#xff1a;1.xml布局中,ListView標簽id可以任意取值如&#xff1a;<ListView andro…

java相關是什么,什么是java

java基礎常見面試題&#xff0c;這是一篇超長的隨筆&#xff01;&#xff01;&#xff01;1. Java基礎部分....................................................... 4 1、一個".java"源文件中是否可以包括多個類(不是內部類)&#xff1f;有什么限制&#xff1f;.. …

如何在Scala中將Double轉換為String?

Double in Scala is a data type that stores numerical values that have decimals. It can store a 64-bit floating point number. Scala中的Double是一種數據類型&#xff0c;用于存儲帶有小數的數值。 它可以存儲一個64位浮點數。 Example: 例&#xff1a; val decimal…

basic knowledge

Position 屬性&#xff1a;規定元素的定位類型。即元素脫離文檔流的布局&#xff0c;在頁面的任意位置顯示。 ①absolute &#xff1a;絕對定位&#xff1b;脫離文檔流的布局&#xff0c;遺留下來的空間由后面的元素填充。定位的起始位置為最近的父元素(postion不為static)&…

avatar.php uid,phpcms函數庫中獲取會員頭像方法get_memberavatar()有時無效問題

修復方法&#xff1a;首先我先給出無效情況的演示代碼&#xff0c;如下&#xff1a;$userid intval($_GET[userid]);$userinfo $this->db->get_one(userid.$userid);$this->db->set_model(10); //原因便在這里$userdetail $this->db->get_one("useri…

ruby 集合 分組_將Ruby中兩個集合的所有元素結合在一起

ruby 集合 分組In this program, we will see how we can combine the two sets? This is not a very difficult task. This can be easily done with the help of the operator. In many places of programming, you will find that operator is overloaded for various ty…

?Python中面向對象的編程

Python面向對象的編程1概述&#xff08;1&#xff09;面向對象編程面向對象的編程是利用“類”和“對象”來創建各種模型來實現對真實世界的描述&#xff0c;使用面向對象編程的原因一方面是因為它可以使程序的維護和擴展變得更簡單&#xff0c;并且可以大大提高程序開發效率&a…

php中用for循環制作矩形,PHP中for循環語句的幾種變型

PHP中for循環語句的幾種變型2021-01-22 10:21:42406for語句可以說是PHP(同時也是多種語言)的循環控制部份最基本的一個語句了&#xff0c;for語句的執行規律和基礎用法在這里就不多說&#xff0c;可以參見PHP手冊for語句部分。PHP手冊中對它的語法定義如下&#xff1a;for(expr…

c語言用命令行編譯運行程序_使用C程序執行系統命令

c語言用命令行編譯運行程序Sometimes, we may need to execute Linux/Windows DOS commands through our C program. (Note: the code given below is compiled and executed on Linux GCC compiler, so here we are testing Linux commands only). 有時&#xff0c;我們可能需…

python 熊貓,Python熊貓

我試圖連續分組和計算相同的信息&#xff1a;#Functionsdef postal_saude ():global df, lista_solic#List of solicitantes in Postal Saudelist_sol [lista_solic["name1"], lista_solic["name2"]]#filter Postal Saude Solicitantesdf df[(df[Cliente…

Spring的兩種任務調度Scheduled和Async

Spring提供了兩種后臺任務的方法,分別是: 調度任務&#xff0c;Schedule異步任務&#xff0c;Async當然&#xff0c;使用這兩個是有條件的&#xff0c;需要在spring應用的上下文中聲明<task:annotation-driven/>當然&#xff0c;如果我們是基于java配置的&#xff0c;需要…

建立單鏈表 單鏈表的插入_單鏈列表插入

建立單鏈表 單鏈表的插入All possible cases: 所有可能的情況&#xff1a; Inserting at beginning 開始插入 Inserting at the ending 在末尾插入 Inserting at given position 在給定位置插入 Algorithms: 算法&#xff1a; 1)開始插入 (1) Inserting at the beginning) In…

mysql學習筆記(1-安裝簡介)

mysql的安裝方式&#xff1a;(1)通過系統提供的默認版本(rpm包&#xff0c;穩定版&#xff0c;該版本滿足了使用的需求&#xff0c;建議使用&#xff0c;os vendor)(2)mysql官方提供官方提供的通用rpm安裝包通用二進制格式的程序包(直接下載文件&#xff0c;解壓到指定目錄&…

存儲器間接尋址方式_8086中的數據存儲器尋址模式

存儲器間接尋址方式In this type of addressing mode, first the offset address is calculated, then the memory address is calculated and then the operand form that memory location is fetched. There are following modes which lie under the Data Addressing Mode: …

oracle asm 刪除diskgroup,ASM磁盤組刪除DISK操作

沒想到這么簡單的操作&#xff0c;由于不熟悉還碰到了兩個小問題。[oracledbserver1 ~]$ sqlplus / as sysdbaSQL*Plus: Release 11.2.0.2.0 Production on Tue Aug 9 10:08:062011Copyright (c) 1982, 2010, Oracle.All rights reserved.Connected to:Oracle Database 11g Ent…

intellij idea 最常用的快捷鍵

F2&#xff0c; 可以快速的向下跳走 CtrlF7&#xff0c;可以查詢當前元素在當前文件中的引用&#xff0c;然后按 F3 可以選擇AltQ&#xff0c;可以看到當前方法的聲明CtrlP&#xff0c;可以顯示參數信息CtrlAltV&#xff0c;可以引入變量。例如&#xff1a;new String(); 自動導…

如何在Java中檢查字符串是否為數字?

We will check whether string is a number or not – with the help of logic we will solve this problem, 我們將檢查字符串是否為數字-借助邏輯&#xff0c;我們將解決此問題&#xff0c; In the first step, we will take a string variable named str and store any val…

oracle清理告警日志,Oracle 跟蹤/告警/監聽日志的清理腳本

[root ~]# cat del_oracle_log.sh#!/bin/bashsource /home/oracle/.bash_profilefunction audit_log(){ #---audit_log日志跟蹤文件#audit_log$(strings $ORACLE_HOME/dbs/spfile$ORACLE_SID.ora|grep -i audit_file_dest|awk -F {print $NF}|sed "s///g")audit_lo…