密码修改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的选手，写起来很练手！！加油！！
分享一句话：是故君子戒慎乎其所不睹，恐惧乎其所不闻。莫见乎隐，莫显乎微，故君子慎其独也。人生就像一场修行，诚于中，形于外。