怎样在浏览器中校验并修改密码

首先按照正常的逻辑要修改密码的话，有三个文本框，第一个是输入原始密码，第二个是输入新密码，第三个是确认新密码。

首先为每一个输入框添加一个onblur事件。

<form action = "/XYDL/changePassServlet" method = "POST" name = "form">

<label for = "oldpass" class = "labels">旧密码&nbsp;&nbsp;&nbsp;&nbsp;</label>
<input type = "password" id = "oldPass" name = "oldPass" placeholder = "请输入原始密码" onblur = "a()"/><span id = "span1"></span><br/><br/>

<label for = "newPass" class = "labels">新密码&nbsp;&nbsp;&nbsp;&nbsp;</label>
<input type = "password"  id = "newPass" name = "newPass" placeholder = "请输入新密码" onblur = "b()" disabled/><span id = "span2"></span><br/><br/>

<label for = "reNewPass" class = "labels">确认密码</label>
<input type = "password" id = "reNewPass" name = "reNewPass" placeholder = "再次输入新密码"  onblur = "c()"disabled/><br/><br/>

  <button type = "button" class="button" id = "change" onclick = "checkAll()">确认修改</button>

</form>

初始值除了输入原密码的文本框，下面两个文本框都属于禁用状态，当用户第当前这步成功之后使下一个文本框可用。每一个input后跟有一个span，用来显示密码输入与否。
确认修改中button有一个checkAll()事件，当前面三个
a(),b(),c()都返回为true时，才进行提交，否则进行错误提示。

接下来就是js：
首先获取到要用到的元素：

script type = "text/javascript">
var oldpass =document.getElementById("oldPass");
var newpass =document.getElementById("newPass");
var renewpass = document.getElementById("reNewPass");
var change = document.getElementById("change");

/*这行的passsword是通过在登录时获取到的登录的用户名和密码。通过String password =(String) request.getSession().setAttribute("cz_pass");设置的，方便在任何时候都可以通过下面的方法获取到（只要页面不关闭）*/
<%String password =(String) request.getSession().getAttribute("cz_pass");%>

获取到登陆时的密码后，要和文本框输入的密码进行对比，只要文本框失焦后，就出发a（）函数：

function a(){
//校验成功，并且使下一个文本框可用
if(oldpass.value == "<%=password%>")
{                               $("#span1").css({"color":"green"});
$("#span1").text("√");
newpass.disabled = false;
}

//否则校验失败，显示错误信息，返回false；
else{                   $("#span1").css({"color":"red"});
$("#span1").text("密码错误");
return false;
    }
    return true;
}

//输入新密码的文本框的校验

function b(){

if(newpass.value == ""){
                $("#span2").css({"color":"red"});
$("#span2").text("密码不能为空");
return false;
}
else if(oldpass.value == newpass.value){
    $("#span2").css({"color":"red"});
    $("#span2").text("不能与原始密码相同");
    return false;
    }
    else{
    $("#span2").css({"color":"green"});
    $("#span2").text("√");
    renewpass.disabled = false;
    }
  return true;
 }

//检验两次密码输入是否一致的c函数

function c(){
    if(renewpass.value != newpass.value){
        alert("两次密码输入不一致!");
        return false;
    }
    return true;
    }

最后点击提交按钮，执行checkAll()函数。

function checkAll(){
    if(a()&&b()&&c()){
        document.form.submit();
    }
    else{
        alert("输入信息不完整!");
        return false;
    }
}

当三个函数都返回true时，提交表单到后台。否则返回false，肯定是某一步输入有误，都会有提示的。