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 ...
随机推荐
- Shell概述1
Shell概述1 脚本文件内容(vim ex2) #!/bin/bash #If no arguments,then listing the current directory. #Otherwise ...
- Alpha冲刺 —— 个人总结
这几日Alpha冲刺的个人进展汇总,收获满满,我成长了. 我们的团队博客链接,团队作业第五次--Alpha冲刺 4.30 今日进展 改进数据库:字段命名重新规范,在record表中添加confirme ...
- 移动端fixed兼容问题
最近做移动端页面,有个需求类似下图 底部导航用fixed定位时在部分iOS版本中会有问题: 1.上滑是底部会跟着滑动,手指松开时才会又回到底部 2.软键盘唤起的情况下,也会出现许多莫名其妙的问题 网上 ...
- Java实现 蓝桥杯 算法提高 八数码（BFS）
试题 算法提高 八数码 问题描述 RXY八数码 输入格式 输入两个33表格 第一个为目标表格 第二个为检索表格 输出格式 输出步数 样例输入 1 2 3 4 5 6 7 8 0 1 2 3 4 5 6 ...
- Java实现 LeetCode 507 完美数
507. 完美数 对于一个 正整数,如果它和除了它自身以外的所有正因子之和相等,我们称它为"完美数". 给定一个 整数 n, 如果他是完美数,返回 True,否则返回 False ...
- Java实现 蓝桥杯VIP 算法训练 ALGO-85进制转换
问题描述 编写一个程序,输入一个二进制的字符串(长度不超过32),然后计算出相应的十进制整数,并把它打印出来. 输入格式:输入为一个字符串,每个字符都是'0'或'1',字符串的长度不超过32. 输出格 ...
- PAT 到底买不买
小红想买些珠子做一串自己喜欢的珠串.卖珠子的摊主有很多串五颜六色的珠串,但是不肯把任何一串拆散了卖.于是小红要你帮忙判断一下,某串珠子里是否包含了全部自己想要的珠子?如果是,那么告诉她有多少多余的珠子 ...
- 消费者启动，允许期间报task supervisor timed out 异常，解决
如何解决后端项目启动时抛出 task supervisor timed out 异常 现象描述 后端项目启动时抛出如下异常,但是该后段项目能正常启动并注册到注册中心,不影响功能使用. 2018-10- ...
- 除了FastJson，你也应该了解一下Jackson（二）
概览 上一篇文章介绍了Jackson中的映射器ObjectMapper,以及如何使用它来实现Json与Java对象之间的序列化和反序列化,最后介绍了Jackson中一些序列化/反序列化的高级特性.而本 ...
- Pytest单元测试框架——Pytest+Allure+Jenkins的应用
一.简介 pytest+allure+jenkins进行接口测试.生成测试报告.结合jenkins进行集成. pytest是python的一种单元测试框架,与python自带的unittest测试框架 ...