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(, ).toUpperCase() + inputName.substring();
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 < || value.length > ) {//长度校验
$("#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 < || value.length > ) {//长度校验
$("#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就是错误的
$("#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="">
<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=""></td>
<td><label class="error" id="msg"></label></td>
</tr>
<tr>
<td width="">用户名</td>
<td><input class="input" type="text" name="loginname" id="loginname"/></td>
</tr>
<tr>
<td height=""> </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=""> </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>
我们来看程序运行的效果：
JavaWeb网上图书商城完整项目--day02-14.登录功能的login页面处理的更多相关文章
- JavaWeb网上图书商城完整项目--day02-10.提交注册表单功能之页面实现
1.当从服务器返回的注册错误信息的时候,我们在注册界面需要将错误信息显示出来 我们需要修改regist.jsp页面的代码:其中error是一个haspmap,c标签对map的属性可以直接使用 ${er ...
- JavaWeb网上图书商城完整项目--day02-6.ajax校验功能之页面实现
1 .现在我们要在regist.js中实现ajax的功能,使用用户名到后台查询是否注册,邮箱是否到后台注册,验证码是否正确的功能 我们来看regist.js的代码 //该函数在html文档加载完成之后 ...
- JavaWeb网上图书商城完整项目--day02-5.ajax校验功能之服务器端三层实现
regist.jsp页面中有异步请求服务器来对表单进行校验: l 校验登录名是否已注册过: l 校验Email是否已注册过: l 校验验证码是否正确. 这说明在UserServlet中需要提供相 ...
- JavaWeb网上图书商城完整项目--day02-19.修改密码功能流程分析
我们来看看修改密码的业务流程操作:
- JavaWeb网上图书商城完整项目--day02-4.regist页面提交表单时对所有输入框进行校验
1.现在我们要将table表中的输入的参数全部提交到后台进行校验,我们提交我们是按照表单的形式提交,所以我们首先需要在table表外面添加一个表单 <%@ page language=" ...
- JavaWeb网上图书商城完整项目--24.注册页面的css样式实现
现在框架已经做好了,即下来我们要对页面进行装饰了,第一步给每一个元素添加id 1.最外面的div添加id为divMain 2.第二个div添加id为divTitle,里面的span对应的id为span ...
- JavaWeb网上图书商城完整项目--过滤器解决中文乱码
我们知道,如果是POST请求,我们需要调用request.setCharacterEncoding(“utf-8”)方法来设计编码:如果是GET请求,我们需要自己手动来处理编码问题.如果我们使用了En ...
- JavaWeb网上图书商城完整项目--13.项目所需环境的搭建
1.首先安装mysql 创建项目所需的数据库,直接运行项目提供的goods.sql文库 2.myeclipse创建一个web project ,项目的名称是goods 把视频中提供的项目原型下的提供的 ...
- JavaWeb网上图书商城完整项目--12.项目所需jquery函数介绍之ajax
jquery中使用ajax发送异步请求 下面的一个案例在input输入框失去焦点的时候发送一个异步的请求: 我们来看程序的案例: 这里要强调的是返回值最好选择是json,json对应的就是对象,Jav ...
- JavaWeb网上图书商城完整项目--BaseServlet
1.以前进行操作的时候,例如我们进行登陆操作我们使用LoginServlet进行处理,进行注册操作我们使用RegisterServlet,很多业务的操作的时候我们就要定义很多个Servlet 有了Ba ...
随机推荐
- 使用 fileupload 组件完成文件的上传应用
1. 使用 fileupload 组件完成文件的上传应用 commons-dbutils-1.3.jarcommons-fileupload-1.2.1.jar 1). 需求: > 在 uplo ...
- RocketMQ安装及入门
本文是作者原创,版权归作者所有.若要转载,请注明出处. 本文RocketMQ版本为rocketmq-all-4.7.0,系统为win10.请各位去官网下载,也可以留言,我发安装包 RocketMQ安装 ...
- 深度学习玩LOL-游戏助手-概述
目标 用深度学习技术实现常规英雄联盟游戏助手的主要功能,功能主要包括:英雄推荐,装备推荐,地图预警等. 基本思路 首先使用图像分类算法模型对游戏客户端内的英雄头像进行截取和识别. 使用线性回归模型对可 ...
- Spring Boot笔记(七） springboot 集成 JavaMail 实现邮箱认证
个人博客网:https://wushaopei.github.io/ (你想要这里多有) 一.JavaMail 1.什么是JavaMail? JavaMail,顾名思义,提供给开发者处理 电子邮 ...
- Redis 入门到分布式 （七）Redis复制的原理与优化
一.目录 Redis复制的原理与优化 什么是主从复制 全量复制和部分复制 复制的配置 故障处理 开发运维常见问题 二. 什么是主从复制 1.单机有什么问题? 单机如果机器故障,那么久无法及时提供服务: ...
- Java实现 LeetCode 726 原子的数量（递归+HashMap处理）
726. 原子的数量 给定一个化学式formula(作为字符串),返回每种原子的数量. 原子总是以一个大写字母开始,接着跟随0个或任意个小写字母,表示原子的名字. 如果数量大于 1,原子后会跟着数字表 ...
- java实现第四届蓝桥杯三部排序
三部排序 题目描述 一般的排序有许多经典算法,如快速排序.希尔排序等. 但实际应用时,经常会或多或少有一些特殊的要求.我们没必要套用那些经典算法,可以根据实际情况建立更好的解法. 比如,对一个整型数组 ...
- Linux 日志管理简介
查看日志rsyslogd是否启动和自启动 ps aux | grep rsyslogd 查看自启动(CentOS 7使用,CentOS 6可以使用chkconfig命令) systemctl list ...
- QPS、TPS、并发用户数、吞吐量关系
1.QPS QPS Queries Per Second 是每秒查询率 ,是一台服务器每秒能够相应的查询次数,是对一个特定的查询服务器在规定时间内所处理流量多少的衡量标准, 即每秒的响应请求数,也即 ...
- OC语言
// // main.m // 测试题05 // // Created by yang sanchao on 9/12/15. // Copyright (c) 2015 yang sanchao. ...