修改密碼是比較簡單的功能,要求以下:javascript
一、原密碼必須輸入正確,才能夠修改密碼html
二、新密碼需在6-18位之間java
三、第二次輸入的新密碼必須與第一次相同。jquery
四、前三個條件同時知足的時,修改密碼才能成功,不然顯示錯誤提示信息。ajax
五、錯誤提示信息和驗證信息所有使用ajax提交、響應異步
效果圖以下:ide
(1)函數
(2)url
(3)3d
(4)修改爲功以後顯示提示信息,2秒後自動消失。
HTML代碼以下:
<ul class='xform-ul'> <li> <div class='form-label'>Existing password :</div> <div class='form-input'> <input type='password' id="oldpassword" name="oldpassword"/><div style="display: inline" id="tip1"></div> </div> </li> <li> <div class='form-label'>New password :</div> <div class='form-input'> <input type='password' id="password1" name="password1" placeholder="length must be 6-18"/><div style="display: inline" id="tip2"> </div> </li> <li> <div class='form-label'>Re-enter password :</div> <div class='form-input'> <input type='password' id="password2" name="password2" placeholder="must match with the first"/><div style="display: inline" id="tip3"> </div> </li> <li class="text-center"> <div class="btn-submit"><div id="btn">Modify</div></div> </li> <li class="text-center"> <div id="tip4"></div> </li> </ul>
<script> $(document).ready(function(){ $("#oldpassword").blur(function(){ var param=$("#oldpassword").val(); $.ajax({ url:"${HttpPath}/user/checkoldpassword", data:{oldpassword:param}, success:function(e){ if(e.code==1){ $("#tip1").html("<font color=\"green\" size=\"2\"> Correct</font>"); } else{ $("#tip1").html("<font color=\"red\" size=\"2\"> Wrong</font>"); } } }); }); $("#password1").blur(function(){ var num=$("#password1").val().length; if(num<6){ $("#tip2").html("<font color=\"red\" size=\"2\"> too short</font>"); } else if(num>18){ $("#tip2").html("<font color=\"red\" size=\"2\"> too long</font>"); } else{ $("#tip2").html("<font color=\"green\" size=\"2\"> Accept</font>"); } }) ; $("#password2").blur(function(){ var tmp=$("#password1").val(); var num=$("#password2").val().length; if($("#password2").val()!=tmp){ $("#tip3").html("<font color=\"red\" size=\"2\"> Wrong</font>"); } else{ if(num>=6&&num<=18){ $("#tip3").html("<font color=\"green\" size=\"2\"> Correct</font>"); } else{ $("#tip3").html("<font color=\"red\" size=\"2\"> invalid</font>"); } } }); $("#btn").click(function(){ var flag=true; var old=$("#oldpassword").val(); var pass=$("#password1").val(); var pass2=$("#password2").val(); var num1=$("#password1").val().length; var num2=$("#password2").val().length; if(num1!=num2||num1<6||num2<6||num1>18||num2>18||pass!=pass2){ flag=false; } else{ flag=true; } if(flag){ $.ajax({ url:"${HttpPath}/user/editPassowrdyet", data:{oldpassword:old,password:pass}, success:function(e){ if(e.code==1){ $("#tip4").show().html("<font color=\"green\" size=\"3\"> Edit Success!</font>"); $("#oldpassword").val(""); $("#password1").val(""); $("#password2").val(""); $("#tip1").empty(); $("#tip2").empty(); $("#tip3").empty(); $("#tip4").delay(2000).hide(0); } else{ $("#tip4").show().html("<font color=\"red\" size=\"3\"> OldPassword is Wrong!</font>"); } } }); } else{ $("#tip4").show().html("<font color=\"red\" size=\"3\"> Please follow the tips!</font>"); } }); }); </script>
另一個值得注意的是,flag那個標記是很是重要的,只要有不符合要求的輸入,就要把flag置爲false,阻止用戶提交修改。