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