密码修改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的选手,写起来很练手!!加油!!
分享一句话:是故君子戒慎乎其所不睹,恐惧乎其所不闻。莫见乎隐,莫显乎微,故君子慎其独也。人生就像一场修行,诚于中,形于外。
好梦!!
更多推荐
密码修改Ajax+jQuery验证
发布评论