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