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.mzph.cn/news/541386.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

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

线程是操作系统能够进行运算调度的最小单位&#xff0c;它被包含在进程之中&#xff0c;是进程中的实际运作单位&#xff0c;而多线程就是指从软件或者硬件上实现多个线程并发执行的技术&#xff0c;具有多线程能力的计算机因有硬件支持而能够在同一时间执行多于一个线程&#…

Activity中与ListActivity中使用listview区别

一.Activity中与ListActivity中使用listview区别&#xff08;本身没多大区别&#xff0c;只是ListActivity在listview的显示上做了一些优化&#xff09;Activity中使用Listview步骤&#xff1a;1.xml布局中,ListView标签id可以任意取值如&#xff1a;<ListView andro…

basic knowledge

Position 属性&#xff1a;规定元素的定位类型。即元素脱离文档流的布局&#xff0c;在页面的任意位置显示。 ①absolute &#xff1a;绝对定位&#xff1b;脱离文档流的布局&#xff0c;遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static)&…

python爬虫之scrapy框架

Scrapy是一个为了爬取网站数据&#xff0c;提取结构性数据而编写的应用框架。 其可以应用在数据挖掘&#xff0c;信息处理或存储历史数据等一系列的程序中。其最初是为了页面抓取 (更确切来说, 网络抓取 )所设计的&#xff0c; 也可以应用在获取API所返回的数据(例如 Amazon As…

Linux学习第三步(Centos7安装mysql5.7数据库)

版本&#xff1a;mysql-5.7.16-1.el7.x86_64.rpm-bundle.tar 前言&#xff1a;在linux下安装mysql不如windows下面那么简单&#xff0c;但是也不是很难。本文向大家讲解了如何在Centos7下如何安装mysql5.7版本,如果有什么问题和错误的地方&#xff0c;欢迎大家指出。 注释&…

linux oracle删除恢复数据恢复,Linux下Oracle误删除数据文件恢复操作

检查数据文件的位置如下&#xff1a;SQL> select name from v$datafile;NAME--------------------------------------------------------------------------------/u01/app/Oracle/oradata/marven/system01.dbf/u01/app/oracle/oradata/marven/undotbs1.dbf/u01/app/oracle/…

数据库如何处理数据库太大_网络数据库中的数据处理

数据库如何处理数据库太大Before learning the data manipulation in a network model, we are discussing data manipulation language, so what is the data manipulation language? 在学习网络模型中的数据操作之前&#xff0c;我们正在讨论数据操作语言&#xff0c;那么什…

oracle12537错误,ORA-12537:TNS:connection closed错误处理方法

1.ORA-12537:TNS:connection closed错误处理过程检查监听正常&#xff0c;Oracle服务也是正常启动的&#xff0c;但是登录不进去。2.解决方案1. cd $ORACLE_HOME/bin/ 进入bin目录2. ll oracle-rwxrwxrwx. 1 ora12 dba 323762222 6?. 14 19:12 oracle3.chmod 6571 oracle 更改…

操作系统中的死锁_操作系统中的死锁介绍

操作系统中的死锁1.1究竟什么是僵局&#xff1f; (1.1 What exactly is a deadlock?) In a multiprogramming environment, there may be several processes with a finite number of resources. A process may request another resource while still holding some of the oth…

centos配置ipv6地址

首先打开网站注册一个账号&#xff1a;http://www.tunnelbroker.net创建一个ipv6的地址&#xff1a;把下面的命令在linux上执行一遍&#xff0c;这个方式是临时生效&#xff0c;重启网卡和重启系统自动失效。把上面的命令保存到一个配置文件中&#xff1a;vi /etc/sysconfig/ne…

NFS部署及优化(一)

NFS部署及优化&#xff08;一&#xff09;一、NFS的基本概念NFS network file system 网络文件系统必然通过网络通信来实现文件的访问和写入&#xff0c;所以做这个实验的话最好有两台虚拟机配置:A&#xff1a;一个192.169.50.201为server端B&#xff1a;一个192.169.50.200为…

HDU 4923 Room and Moor(瞎搞题)

瞎搞题啊。找出1 1 0 0这样的序列&#xff0c;然后存起来&#xff0c;这样的情况下最好的选择是1的个数除以这段的总和。然后从前向后扫一遍。变扫边进行合并。每次合并。合并的是他的前驱。这样到最后从t-1找出的那条链就是最后满足条件的数的大小。Room and Moor Time Limit:…

linux下的文件系统,Linux根文件系统(“/”文件系统)下的目录介绍

Linux下的文件存储与Windows完全不同&#xff0c;Windows将系统文件存储在系统盘(比如说C:\下)Linux根本没有盘符到概念只有一个根文件系/&#xff0c;各个磁盘分区挂载在/media/下(或者/mnt/下)/下到如/etc,/proc,/bin,/dev,lib等很是让用惯了Windows的用户不解&#xff0c;下…

greenlet 详解

greenlet初体验回到顶部Greenlet是python的一个C扩展&#xff0c;来源于Stackless python&#xff0c;旨在提供可自行调度的‘微线程’&#xff0c; 即协程。generator实现的协程在yield value时只能将value返回给调用者(caller)。 而在greenlet中&#xff0c;target.switch&am…

详细图解mongodb 3.4.1 win7x64安装

原文&#xff1a;http://www.cnblogs.com/yucongblog/p/6895983.html 详细图解&#xff0c;记录 win7 64 安装mongo数据库的过程。安装的版本是 MongoDB-win32-x86_64-2008plus-ssl-3.4.1-signed。 我下载的源文件&#xff1a;mongodb-win32-x86_64-2008plus-ssl-3.4.1-signed我…

linux用ping命令测试网速,linux下面使用命令测试网速

大家都知道在speedtest是市面上最准确最全面的测速工具&#xff0c;但在linux命令行不能直接使用&#xff0c;所以我们就借助脚本调用speedtest的接口来利用他测试网速。1.下载speedtest-cli脚本&#xff1a;下载地址&#xff1a;https://raw.githubusercontent.com/sivel/spee…

rocksdb ubuntu c++源码编译测试

2019独角兽企业重金招聘Python工程师标准>>> 环境&#xff1a; ubuntu16.4 需要安装 snappy gflage bz2 zstd 以及g 其中zstd是facebook开放源代码里的压缩的库 git clone https://github.com/facebook/rocksdb.git cd rocksdb make static_lib 成功生成 librocksd…

NABARD的完整形式是什么?

NABARD&#xff1a;国家农业和农村发展银行 (NABARD: National Bank for Agriculture and Rural Development) NABARD is an abbreviation of National Bank for Agriculture and Rural Development. NABARD是国家农业和农村发展银行的缩写 。 On 12 July 1982, it was establ…

基于opencv+Dlib的面部合成(Face Morph)

引自&#xff1a;http://blog.csdn.net/wangxing233/article/details/51549880 零、前言 前段时间看到文章【1】和【2】&#xff0c;大概了解了面部合成的基本原理。这两天空下来了&#xff0c;于是参考【3】自己实现了下。虽然【1】和【2】已经讲的很清楚了&#xff0c;但是有…

大脑应对危机的模式_危机的完整形式是什么?

大脑应对危机的模式危机&#xff1a;印度信用评级信息服务有限公司 (CRISIL: Credit Rating Information Services of India Limited) CRISIL is an abbreviation of Credit Rating Information Services of India Limited. It is an international analytic company which off…