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

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 ...

随机推荐

CSS 超出行显示...
一行超出 overflow:hidden; white-space:nowrap; text-overflow:ellipsis; 多行超出 overflow: hidden; text-overfl ...
ucoreos_lab1
前言最近觉得自己之前蛮多基础课学的并不咋滴,便想再补补.前段时间突然看到清华的操作系统实验,于是乎就打算试试,一边学一边做实验,然后通过博客来记录记录. 实验内容 lab1 中包含一个 bootlo ...
Rocket - tilelink - Metadata
https://mp.weixin.qq.com/s/Dyb1XipJtdhGa9mktXXjCg 简单介绍Metadata的实现. 1. 基本介绍 Metadata是一个Bun ...
PowerPC-关闭中断后，还能报sc中断？
https://mp.weixin.qq.com/s/OsHIfPzYUagaTe5J88dIIg 一. 基本问题 FreeRTOS有一个宏,portYIELD_WITHIN_API(), 意 ...
Java 第十一届蓝桥杯省模拟赛梅花桩
小明每天都要练功,练功中的重要一项是梅花桩. 小明练功的梅花桩排列成 n 行 m 列,相邻两行的距离为 1,相邻两列的距离也为 1. 小明站在第 1 行第 1 列上,他要走到第 n 行第 m 列上.小 ...
Java实现 LeetCode 332 重新安排行程
332. 重新安排行程给定一个机票的字符串二维数组 [from, to],子数组中的两个成员分别表示飞机出发和降落的机场地点,对该行程进行重新规划排序.所有这些机票都属于一个从JFK(肯尼迪国际机场 ...
Java实现 LeetCode 115 不同的子序列
115. 不同的子序列给定一个字符串 S 和一个字符串 T,计算在 S 的子序列中 T 出现的个数. 一个字符串的一个子序列是指,通过删除一些(也可以不删除)字符且不干扰剩余字符相对位置所组成的新字 ...
Spring Cloud 系列之 Apollo 配置中心（四）
本篇文章为系列文章,未读前几集的同学请猛戳这里: Spring Cloud 系列之 Apollo 配置中心(一) Spring Cloud 系列之 Apollo 配置中心(二) Spring Clou ...
一篇关于Android M以后权限介绍的不错的文章
文章地址:http://www.jianshu.com/p/e1ab1a179fbb/
Matplotlib 的正确使用方法，画一张好看的图
前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:Python中文社区本文用的数据如图所示,Dataframe中显示 ...

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

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

随机推荐

热门专题