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 ...
随机推荐
- C/C++代码优化之求两个整型的平均值
在 C/C++ 中, 直接利用 (x + y) >> 1 来计算 \(\left\lfloor {\left( {x + y} \right)/2} \right\rfloor\) (两个 ...
- 分布式项目开发-web.xml基础配置
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http:// ...
- Chisel3 - bind - Wire, Reg, MemPort
https://mp.weixin.qq.com/s/AxYlRtAXjd55eoGX5l1W-A 模块(Module)从输入端口(input ports)接收输入,经过内部实现的转换逻辑,从输出 ...
- 【JVM】关于OOM的二三事
组织架构 严格来说,StackOverflowError和OutOfMemoryError都属于错误,而不是异常. java.lang.StackOverflowError public class ...
- （Java实现） 子集和问题
回溯算法也叫试探法,它是一种系统地搜索问题的解的方法.回溯算法的基本思想是:从一条路往前走,能进则进,不能进则退回来,换一条路再试.用回溯算法解决问题的一般步骤为: 1.定义一个解空间,它包含问题的解 ...
- Java实现 LeetCode 698 划分为k个相等的子集(递归)
698. 划分为k个相等的子集 给定一个整数数组 nums 和一个正整数 k,找出是否有可能把这个数组分成 k 个非空子集,其总和都相等. 示例 1: 输入: nums = [4, 3, 2, 3, ...
- Java实现 LeetCode 488 祖玛游戏
488. 祖玛游戏 回忆一下祖玛游戏.现在桌上有一串球,颜色有红色,黄色(Y),蓝色(B),绿色(G),还有白色(W). 现在你手里也有几个球. 每一次,你可以从手里的球选一个,然后把这个球插入到一串 ...
- Java实现 LeetCode 151 翻转字符串里的单词
151. 翻转字符串里的单词 给定一个字符串,逐个翻转字符串中的每个单词. 示例 1: 输入: "the sky is blue" 输出: "blue is sky th ...
- JQuery实现对html结点的操作（创建，添加，删除）
效果图: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...
- Java实现 蓝桥杯 历届真题 数字拆分
正整数可以表示为若干正整数的累加和. 如,对于正整数n=6,可以分划为: 5+1 4+2 4+1+1 3+3 3+2+1 3+1+1+1 2+2+2 2+2+1+1 2+1+1+1+1 1+1+1+1 ...