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 ...
随机推荐
- day 6 （笔记由图转）
.
- Alpha冲刺 —— 5.1
这个作业属于哪个课程 软件工程 这个作业要求在哪里 团队作业第五次--Alpha冲刺 这个作业的目标 Alpha冲刺 作业正文 正文 github链接 项目地址 其他参考文献 无 一.会议内容 1.展 ...
- Java-接口的本质
https://mp.weixin.qq.com/s/tEVw0j18rX2hxt-guXQJ-w 大道至简,本质往往是很朴素的. 本质: 类是主体,接口是主体之间交流沟通的规约. 位置:1. 主体站 ...
- GTA5侠盗猎车5中文版破解版绿色版汉化版迅雷下载地址种子实测可用
GTA5(侠盗猎车5)中文版下载地址(实测可用) 迅雷下载地址:https://www.90pan.com/b1548988 一定要关闭安全软件并且加入白名单 实测通过,关闭杀毒软件可以完美运行,最好 ...
- 【Hadoop高级】Hadoop HA、hdfs安全模式
Hadoop HA Safemode(安全模式) During start up the NameNode loads the file system state from the fsimage a ...
- Java实现派（Pie, NWERC 2006, LA 3635）
题目 有F+1个人来分N个圆形派,每个人得到的必须是一整块派,而不是几块拼在一起,且面积要相同.求每个人最多能得到多大面积的派(不必是圆形). 输入的第一行为数据组数T.每组数据的第一行为两个整数N和 ...
- Java实现 LeetCode 119 杨辉三角 II
119. 杨辉三角 II 给定一个非负索引 k,其中 k ≤ 33,返回杨辉三角的第 k 行. 在杨辉三角中,每个数是它左上方和右上方的数的和. 示例: 输入: 3 输出: [1,3,3,1] 进阶: ...
- Java实现 LeetCode 45 跳跃游戏 II（二）
45. 跳跃游戏 II 给定一个非负整数数组,你最初位于数组的第一个位置. 数组中的每个元素代表你在该位置可以跳跃的最大长度. 你的目标是使用最少的跳跃次数到达数组的最后一个位置. 示例: 输入: [ ...
- jstl中<c:if>标签属性用法
今天用jstl+el从session域中获取属性,遇到了问题 org.apache.jasper.JasperException: <h3>Validation error message ...
- Mac Book 问题汇集
1.mac wifi 无法连接问题 1. 由于插入的USB 转接头导致,USB转接口带有网线插口,机器默认网页接口接口导致. 解决方案: 拔掉转接口,连上WiFi ,再插入转接口使用 2.可以是路由器 ...