JavaWeb網上圖書商城完整項目--day02-18.修改密碼頁面處理
阿新 • • 發佈：2017-05-15
o-c submit hang 頁面 enc 兩個 table none ood
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.修改密碼頁面處理