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

1、用户登陆成功之后会显示

当点击修改密码的时候，会进入下面的页面

对应的是pwd.jsp这个文件

我们把对jsp页面前段的校验都封装在pwd.js中，在jsp中引入该js文件

pwd.jsp

修改密码

${msg}
原密码:
新密码:
确认密码:
	看不清，换一张
验证码:

我们来看看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