jQuery+ajax實現修改密碼驗證

修改密碼是比較簡單的功能，要求如下：

1、原密碼必須輸入正確，才可以修改密碼

2、新密碼需在6-18位之間

3、第二次輸入的新密碼必須與第一次相同。

4、前三個條件同時滿足的時，修改密碼才能成功，否則顯示錯誤提示資訊。

5、錯誤提示資訊和驗證資訊全部使用ajax提交、響應

效果圖如下：

（1）

（2）

（3）

（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>

js代碼如下：

  <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>

2秒後自動消失的特效是通過jquery的delay()和hide()函數來實現的，因為是非同步驗證，不重新整理頁面，想讓他再出現，就要調用show()函數。

另外一個值得注意的是，flag那個標記是非常重要的，只要有不符合要求的輸入，就要把flag置為false，阻止使用者提交修改。