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">&nbsp;</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

时间: 2024-10-11 19:27:34

JavaWeb网上图书商城完整项目--day02-18.修改密码页面处理的相关文章

JavaWeb网上图书商城完整项目--day02-4.regist页面提交表单时对所有输入框进行校验

1.现在我们要将table表中的输入的参数全部提交到后台进行校验,我们提交我们是按照表单的形式提交,所以我们首先需要在table表外面添加一个表单 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core&

JavaWeb网上图书商城完整项目--day03-1.图书模块功能介绍及相关类创建

1 前两天我们学习了user用户模块和图书的分类模块,接下来我们学习图书模块 图书模块的功能主要是下面的功能: 2 接下来我们创建对应的包 我们来看看对应的数据库表t_book CREATE TABLE `t_book` ( `bid` char(32) NOT NULL, `bname` varchar(200) default NULL, `author` varchar(50) default NULL, `price` decimal(8,2) default NULL, `currPr

JavaWeb网上图书商城完整项目--day02-5.ajax校验功能之服务器端三层实现

regist.jsp页面中有异步请求服务器来对表单进行校验: l  校验登录名是否已注册过: l  校验Email是否已注册过: l  校验验证码是否正确. 这说明在UserServlet中需要提供相应的方法来支持前端的请求. 我们需要到数据库查询用户名.邮箱是否注册,到session中检查验证码是否正确. 在进行数据库操作之前,还需要对user表中的字段进行添加处理 因为其他页面中对用户的操作还设计到修改新的密码.确认密码.验证码等几个字段,我们需要在user表中添加下面的几个字段 packa

JavaWeb网上图书商城完整项目--21.用户模块各层相关类的创建

1.现在要为user用户模块创建类 用户模块功能包括:注册.激活.登录.退出.修改密码. User类对照着t_user表来写即可.我们要保证User类的属性名称与t_user表的列名称完全相同. 我们来创建User类 package com.weiyuan.goods.user.domian; public class User { private String uid; //主键 private String loginname;// 登陆名称 private String loginpass

JavaWeb网上图书商城完整项目--day02-12.激活功能各层实现

1.我们来看程序的代码 数据库层: 1.通过激活码查找到对应的用户 2.设置用户的激活状态 2.业务层 1.通过数据库接口通过验证码得到对应的用户 2.判断当用户是否为空,如果没有通过激活码查找到对应的用户,说明用户点击邮箱上传的激活码是无效的,这个时候说明激活失败,抛出一个业务失败异常,说明激活码无效 3.如果用户不为空,并且用户的激活状态是没有激活的,将用户的激活状态设置成true 4.如果用户不为空,但是用户的激活状态是已经激活的,抛出一个业务失败异常,提示用户无需重复激活 3.servl

JavaWeb网上图书商城完整项目--day02-10.提交注册表单功能之页面实现

1.当从服务器返回的注册错误信息的时候,我们在注册界面需要将错误信息显示出来 我们需要修改regist.jsp页面的代码: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix

JavaWeb网上图书商城完整项目--day02-6.ajax校验功能之页面实现

1 .现在我们要在regist.js中实现ajax的功能,使用用户名到后台查询是否注册,邮箱是否到后台注册,验证码是否正确的功能 我们来看regist.js的代码 //该函数在html文档加载完成之后会调用 $(function() { /* * 变量所有的错误信息,调用一个方法来决定是否显示错误信息 * */ $(".errorClass").each(function() { showError($(this));//$(this)表示当前遍历的对象 }); //切换注册按钮的图片

JavaWeb网上图书商城完整项目--day02-14.登录功能的login页面处理

1.现在注册成功之后,我们来到登录页面,登录页面在于 在登录页面.我们也需要向注册页面一样对登录的用户名.密码 验证码等在jsp页面中进行校验,校验我们单独放置一个login.js文件中进行处理,然后login.jsp加载该js文件 我们来看看login.js的代码和regist.js的代码一样,这里就不用花太多时间进行介绍 $(function() { /* * 1. 让登录按钮在得到和失去焦点时切换图片 */ $("#submit").hover( function() { $(&

JavaWeb网上图书商城完整项目--发送邮件

1.首先注册一个163邮箱 自己的邮箱地址是[email protected] 登陆的密码是[email protected]***19 使用邮箱发邮件,邮件必须开启pop和smtp服务,登陆邮件 开启pop服务,这个时候提示你必须设置授权的密码,我这里设置的是wy87**** 在代码里面必须设置成这个授权密码才能发送邮件,不能设置成登陆密码 客户端需要下面的两个jar文件 我们来看程序的代码: package com.weiyuan.test; import java.io.IOExcepti

JavaWeb网上图书商城完整项目--11.项目所需jquery函数介绍

1.下载jquery的函数包 2.强函数包添加到工程的web-root目录下 3.在jsp文件中加载js文件 <script type="text/javascript" src=" ${pageContext.request.contextPath}/jquery-1.5.1.js"> </script> 案例一:在文档加载完成后显示对话框 <%@ page language="java" import="