JavaWeb网上图书商城完整项目--day02-18.修改密码页面处理
1、用户登陆成功之后会显示
当点击修改密码的时候，会进入下面的页面
对应的是pwd.jsp这个文件
我们把对jsp页面前段的校验都封装在pwd.js中，在jsp中引入该js文件
<%@ 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>pwd.jsp</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">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="stylesheet" type="text/css" href="<c:url value='/css/css.css'/>">
<link rel="stylesheet" type="text/css" href="<c:url value='/jsps/css/user/pwd.css'/>">
<script type="text/javascript" src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script>
<%--引入pwd.js文件 --%>
<script type="text/javascript" src="<c:url value='/jsps/js/user/pwd.js'/>"></script>
<script src="<c:url value='/js/common.js'/>"></script>
</head> <body>
<div class="div0">
<span>修改密码</span>
</div> <div class="div1">
<form action="<c:url value='/jsps/msg.jsp'/>" method="post" target="_top">
<input type="hidden" name="method" value=""/>
<table>
<tr>
<td><label class="error">${msg }</label></td>
<td colspan="2"> </td>
</tr>
<tr>
<td align="right">原密码:</td>
<td><input class="input" type="password" name="loginpass" id="loginpass" value=""/></td>
<td><label id="loginpassError" class="error"></label></td>
</tr>
<tr>
<td align="right">新密码:</td>
<td><input class="input" type="password" name="newpass" id="newpass" value=""/></td>
<td><label id="newpassError" class="error"></label></td>
</tr>
<tr>
<td align="right">确认密码:</td>
<td><input class="input" type="password" name="reloginpass" id="reloginpass" value=""/></td>
<td><label id="reloginpassError" class="error"></label></td>
</tr>
<tr>
<td align="right"></td>
<td>
<img id="vCode" src="/VerifyCodeServlet" border="1"/>
<a href="javascript:changeVerifyCode();">看不清，换一张</a>
</td>
</tr>
<tr>
<td align="right">验证码:</td>
<td>
<input class="input" type="text" name="verifyCode" id="verifyCode" value=""/>
</td>
<td><label id="verifyCodeError" class="error"></label></td>
</tr>
<tr>
<td align="right"></td>
<td><input id="submit" type="submit" value="修改密码"/></td>
</tr>
</table>
</form>
</div>
</body>
</html>
我们来看看pwd.js的代码
$(function() {
/*
* 1. 给注册按钮添加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").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 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;
} else {// 验证原错误是否正确
$.ajax({
cache: false,
async: false,
type: "POST",
dataType: "json",
data: {method: "validateLoginpass", loginpass: value},
url: "/goods/UserServlet",
success: function(flag) {
if(!flag) {
$("#loginpassError").css("display", "");
$("#loginpassError").text("原密码错误！");
bool = false;
}
}
});
}
return bool;
}
// 校验新密码
function validateNewpass() {
var bool = true;
$("#newpassError").css("display", "none");
var value = $("#newpass").val();
if(!value) {// 非空校验
$("#newpassError").css("display", "");
$("#newpassError").text("新密码不能为空！");
bool = false;
} else if(value.length < 3 || value.length > 20) {//长度校验
$("#newpassError").css("display", "");
$("#newpassError").text("新密码长度必须在3 ~ 20之间！");
bool = false;
}
return bool;
}
/*
* 校验确认密码
*/
function validateReloginpass() {
var bool = true;
$("#reloginpassError").css("display", "none");
var value = $("#reloginpass").val();
if(!value) {// 非空校验
$("#reloginpassError").css("display", "");
$("#reloginpassError").text("确认密码不能为空！");
bool = false;
} else if(value != $("#newpass").val()) {//两次输入是否一致
$("#reloginpassError").css("display", "");
$("#reloginpassError").text("两次密码输入不一致！");
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;
}
//实现验证码图片的切换功能
function changeVerifyCode() {
$("#vCode").attr("src","/goods/VerifyCodeServlet?a="+new Date().getTime());
}
在页面使用ajax访问了UserServlet中的validateVerifyCode和validateLoginpass的两个方法，其中UserServlet继承BaseServlet
JavaWeb网上图书商城完整项目--day02-18.修改密码页面处理的更多相关文章
- 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网上图书商城完整项目--day02-21.退出功能的实现
1.当用户点击退出的时候,跳转到登陆页面 当用户点击退出的时候,需要将session中保存的登陆的用户销毁掉 当用户点击退出的时候,调用UserServlet的quit方法 退出按钮在top.jsp中 ...
- JavaWeb网上图书商城完整项目--day02-17.登录功能页面实现
1.当在登陆页面点击登陆按钮的时候,会调用UserServlet的login方法,我们要在login.jsp中进行配置 2.要在login.jsp中处理Servlet在后台业务操作之后forward到 ...
- 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 ...
- JavaWeb网上图书商城完整项目--day03-1.图书模块功能介绍及相关类创建
1 前两天我们学习了user用户模块和图书的分类模块,接下来我们学习图书模块 图书模块的功能主要是下面的功能: 2 接下来我们创建对应的包 我们来看看对应的数据库表t_book CREATE TABL ...
- JavaWeb网上图书商城完整项目--day02-28.查询所有分类功能之left页面使用Q6MenuBar组件显示手风琴式下拉菜单
首先页面去加载的时候,会去加载main.js文件,我们在加载left.jsp.top.jsp body.jsp,现在我们修改main.jsp的代码,让它去请求的时候去访问的是不在直接去访问left.j ...
随机推荐
- [PHP学习教程 - 系统]001.引用文件(require & include)
引用文件的方法有两种:require 及 include.两种方式提供不同的使用弹性. 1.require 的使用方法如 require("MyRequireFile.php"); ...
- dell5460笔记本电脑ubuntu18.04系统音频驱动的安装和使用
一.背景: 近期使用dell5460笔记本在ubuntu系统下观看视频,发现没有声音,考虑安装音频驱动. 二.音频驱动的安装 linux系统的音频驱动基于ALSA(即Advanced Linux So ...
- 【HBase】知识小结+HMaster选举、故障恢复、读写流程
1:什么是HBase HBase是一个高可靠性,高性能,面向列,可伸缩的分布式数据库,提供海量数据存储功能,一个结构化的分布式存储系统,不同于一般的关系型数据库,它适合半结构化和非结构化数据存储. 2 ...
- Linux（十） —— 使用 rz 和 sz 命令上传与下载
以CentOS 7 系统为例,一般上传下载都是使用的第三方工具,但是在操作上并不方便,每次都要找到对应的目录才可以执行上传.下载操作,比较麻烦. 而CentOS为例的 Linux 系统可以通过安装 插 ...
- （Java实现）洛谷 P1164 小A点菜
题目背景 uim神犇拿到了uoi的ra(镭牌)后,立刻拉着基友小A到了一家--餐馆,很低端的那种. uim指着墙上的价目表(太低级了没有菜单),说:"随便点". 题目描述 不过ui ...
- Java实现 蓝桥杯 算法提高 p1001
算法提高 P1001 时间限制:1.0s 内存限制:256.0MB 提交此题 当两个比较大的整数相乘时,可能会出现数据溢出的情形.为避免溢出,可以采用字符串的方法来实现两个大数之间的乘法.具体来说 ...
- Java实现 LeetCode 6 Z字形变换
6. Z 字形变换 将一个给定字符串根据给定的行数,以从上往下.从左到右进行 Z 字形排列. 比如输入字符串为 "LEETCODEISHIRING" 行数为 3 时,排列如下: L ...
- java实现第五届蓝桥杯切面条
切面条 一根高筋拉面,中间切一刀,可以得到2根面条. 如果先对折1次,中间切一刀,可以得到3根面条. 如果连续对折2次,中间切一刀,可以得到5根面条. 那么,连续对折10次,中间切一刀,会得到多少面条 ...
- STL关联容器
这里简单学习一下STL关联容器,主要是map.multimap.set.multiset以及unordered_map.前四个底层实现都是利用红黑树实现的,查找算法时间复杂度为\(O(log(n))\ ...
- Swagger使用的时候报错：Failed to load API definition
NuGet添加Swashbuckle.AspNetCore,在Startup.cs添加和启用中间件Swagger public void ConfigureServices(IServiceColle ...