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 ...
随机推荐
- JavaScript——闭包（转自别人）
有这样一个段子:说闭包的主要作用是什么?,答:面试.确实在许多面试中,闭包是必问项目,所以不为别的,只为面试,理解闭包就很重要. 说到 闭包 ,这是js不得不提的一个特性,很多传统语言都不具备这样的特 ...
- Rocket - decode - Inst Decode
https://mp.weixin.qq.com/s/WvepB3yAzjMbQalO3Z82pQ 介绍RocketChip Instruction解码逻辑的实现. 1. RISC-V R ...
- Linux kernel学习（序）
伟大的Linux kernel有几大重要模块: 1.文件系统(File System) 2.进程调度(Process Scheduler) 3.内存管理(Memory Management) 4.进程 ...
- Java实现 蓝桥杯VIP 算法提高 P0401
算法提高 P0401 时间限制:1.0s 内存限制:256.0MB 输入一个无符号整数x,输出x的二进制表示中1的个数. 输入: 76584 输出: 7 import java.util.Scanne ...
- Java实现LeetCode_0001_Two Sum
import java.util.Arrays; import java.util.Scanner; public class TwoSum_1 { public static void main(S ...
- Java实现最长回文串
1 问题描述 给定一个字符串,求它的最长回文子串的长度. 2 解决方案 2.1 中心扩展法 此处,首先枚举出回文串的中心位置,然后,再在该位置上分别向左和向右扩展,记录并更新得到的最长回文串的长度. ...
- 一文了解Docker容器技术的操作
一文了解Docker容器技术的操作 前言一.Docker是什么二.Docker的安装及测试Docker的安装Docker的Hello world测试三.Docker的常见操作镜像的基本操作容器的基本操 ...
- ProxySQL简介原理及读写分离应用
MySQL-ProxySQL中间件简介 同类型产品 MySQL Route:是现在MySQL官方Oracle公司发布出来的一个中间件. Atlas:是由奇虎360公发的基于MySQL协议的数据库中间件 ...
- windows server2012在已有.net4.5框架的基础上安装.net3.5的方法
我们在一台服务器运行各种程序的时候难免会用到一些好用的但是很老的软件.老软件也就难免需要以前的那种环境来运行,但是老的环境与新的环境往往不兼容.下面我就来讲一讲系统在已有.net4.5的情况下怎么安装 ...
- 在WinForms里嵌入MediaPlayer的一些版本问题, tlbimp导入, 以及不导入而纯用C#+字符串来动态调用.
网上很多写使用WindowsMediaPlayer WMP控件的文章. 大多数都是从工具栏或COM导入. 最近正在做的CEF整合Asp.Net Core Blazor server side的过程中, ...