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 ...
随机推荐
- Chisel3 - Tutorial - ByteSelector
https://mp.weixin.qq.com/s/RQg2ca1rwfVHx_QG-IOV-w 字节选择器. 参考链接: https://github.com/ucb-bar/chisel ...
- Mybatis 的动态SQL，批量增删查改
个人博客网:https://wushaopei.github.io/ (你想要这里多有) 批量增删改的接口: public interface BookService { //批量增加 int ...
- Java实现 LeetCode 179 最大数
179. 最大数 给定一组非负整数,重新排列它们的顺序使之组成一个最大的整数. 示例 1: 输入: [10,2] 输出: 210 示例 2: 输入: [3,30,34,5,9] 输出: 9534330 ...
- Java实现蓝桥杯历届真题国王的遗产
国王的遗产 题目描述 X国是个小国.国王K有6个儿子.在临终前,K国王立下遗嘱:国王的一批牛作为遗产要分给他的6个儿子. 其中,大儿子分1/4,二儿子1/5,三儿子1/6,- 直到小儿子分1/9. 牛 ...
- Java实现蓝桥杯历届试题区间移位
问题描述 数轴上有n个闭区间D1,-,Dn.其中区间Di用一对整数[ai, bi]来描述,满足ai < bi.已知这些区间的长度之和至少有10000.所以,通过适当的移动这些区间,你总可以使得他 ...
- java实现第五届蓝桥杯绳圈
绳圈 题目描述 今有 100 根绳子,当然会有 200 个绳头. 如果任意取绳头两两配对,把所有绳头都打结连接起来.最后会形成若干个绳圈(不考虑是否套在一起). 我们的问题是:请计算最后将形成多少个绳 ...
- 一文带你了解ANR（测试人员）
一.首先,了解一下什么是ANR ANR,是"Application Not Responding"的缩写,即"应用程序无响应".系统会向用户显示一个对话框,用户 ...
- Hive的基本介绍以及常用函数
一.Hive的简介: Hive是基于Hadoop的一个数据仓库工具,可以将结构化的数据文件映射为一张表,并提供类SQL查询功能. 优点: ) 操作接口采用类SQL语法,提供快速开发的能力(简单.容易上 ...
- Flutter upgrade更新版本引发的无法启动调试APP的错误 target:kernel_snapshot failed”
前言 我的主机上的Flutter 本地的分支是在 beta,因为去年想尝鲜Flutter Web,所以一直没切回来stable分支. 早上打开VSCode,右下角弹出了Flutter upgrade的 ...
- Kubernetes内部域名解析的那些事儿
前言 在kubernets环境中,服务发现大都是基于内部域名的方式.那么就涉及到内部域名的解析.从1.11版本开始,kubeadm已经使用第三方的CoreDNS替换官方的kubedns作为集群内部域名 ...