密码修改Ajax+jQuery验证

密码修改Ajax+jQuery验证"/>

密码修改Ajax+jQuery验证

丑的一 * 修改密码Ajax+jQuery验证

输入旧密码Ajax验证非空，密码是否正确
输入新密码jQuery判断是否为旧密码和非空
再次输入判断两次是否一样

前端简单form表单

<form id="userForm" method="post" action="${pageContext.request.contextPath }/modifypwd.action"><!--div的class 为error是验证错误，ok是验证成功--><div class=""><label for="oldPassword">旧密码：</label><input type="password" name="oldpassword" id="oldpassword" onblur="check()"> <font color="red"></font></div><div id="info1">${message}</div><div><label for="newPassword">新密码：</label><input type="password" name="newpassword" id="newpassword" onblur="check1()"> <font color="red"></font></div><div id="info2">${message}</div><div><label for="reNewPassword">确认新密码：</label><input type="password" name="rnewpassword" id="rnewpassword" onblur="check2()"> <font color="red"></font></div><div id="info3">${message}</div><div class="providerAddBtn"><!--<a href="#">保存</a>--><!-- <input type="button" name="save" id="save" value="保存" class="input-button"> --><input type="button" value="修改" id="savebutton" onclick="check3()"></div>
</form>

。。。格式有点丑

写一个js对信息进行判断

<script type="text/javascript">function check() {var oldpassword=$("#oldpassword").val();if (oldpassword==null ||oldpassword=="") {document.getElementById("info1").innerText = "密码不能为空";$('#info1').css("color","red");return;}else {$.post("${pageContext.request.contextPath }/oldpwd.action",{"oldpassword":oldpassword},function(data){if (data.toString()=="ok！") {$('#info1').css("color","green");}else{$('#info1').css("color","red");}$("#info1").html(data);});}}function check1() {var newpassword=$("#newpassword").val();var oldpassword=$("#oldpassword").val();if (newpassword==null ||newpassword=="") {document.getElementById("info2").innerText = "新密码不能为空";$('#info2').css("color","red");return;}else if (newpassword==oldpassword) {document.getElementById("info2").innerText = "新密码不能为旧密码";$('#info2').css("color","red");}else {document.getElementById("info2").innerText = "ok！";$('#info2').css("color","green");}}function check2() {var rnewpassword=$("#rnewpassword").val();var newpassword=$("#newpassword").val();if (rnewpassword==null ||rnewpassword=="") {document.getElementById("info3").innerText = "再次输入密码不能为空";$('#info3').css("color","red");return;}else if (rnewpassword!=newpassword) {document.getElementById("info3").innerText = "两次密码不相同，请核对后重新输入";$('#info3').css("color","red");}else {document.getElementById("info3").innerText = "ok！";$('#info3').css("color","green");}}function check3() {$('#oldpassword').blur();$('#newpassword').blur();$('#rnewpassword').blur();/* var info1=$("#info1").val();var info2=$("#info2").val();var info3=$("#info3").val(); */if(document.getElementById("info1").innerHTML=="ok！"&&document.getElementById("info2").innerHTML=="ok！"&&document.getElementById("info3").innerHTML=="ok！"){if(confirm("修改密码后需要重新登录，您确定要修改密码？")){$("#userForm").submit();}}}</script>

都是简单的操作，接下来需要Ajax操作对旧密码进行验证

//旧密码验证@RequestMapping("/oldpwd")public void oldpwd(String oldpassword,HttpServletResponse response,HttpSession session) {User user1=  (User) session.getAttribute("user");User user=service.valpwd(user1.getId(),oldpassword);String answer = "";if (user==null){answer="对不起，您输入的密码有误！";}else {answer="ok！";}System.out.println(answer);try {response.setContentType("text/html");response.setCharacterEncoding("utf-8");PrintWriter writer=response.getWriter();writer.write(answer);writer.flush();writer.close();} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}}

这里用的ssm，效果如下
进入界面

提交按钮让三个input失去焦点





初学jQuery和Ajax的选手，写起来很练手！！加油！！
分享一句话：是故君子戒慎乎其所不睹，恐惧乎其所不闻。莫见乎隐，莫显乎微，故君子慎其独也。人生就像一场修行，诚于中，形于外。

好梦！！