Jquery+ajax implementation to modify password authentication

Modifying a password is a simpler feature that requires the following:

1, the original password must be entered correctly before you can modify the password

2, the new password needs to be between 6-18 digits

3, the second entered the new password must be the same as the first time.

4, the first three conditions meet at the same time, modify the password to succeed, or display error message.

5, error message and verification information all use AJAX submission, response

The effect chart is as follows:

(1)

(2)

(3)

(4) After the successful modification, display the prompt information, after 2 seconds automatically disappears.

The HTML code is as follows:

<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> <di
                                        V 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&gT
                                    <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 '"/><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>

The JS code is as follows:

  <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&lt                 
              ;/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&LT;/FONT&G
              t; ");}  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/ed                Itpassowrdyet ", 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. Hide (0); } else{$ ("#tip4"). Show (). HTML ("<font color=\ red\" size=\ "3\" &  Gt
                          OldPassword is wrong!</font> ");
              }                                     
                         }
                  }); } else{$ ("#tip4"). Show (). HTML ("<font color=\ red\" size=\ "3\" &GT
              Please follow the tips!</font> ");                  
        }
              });
        }); </script>

2 seconds after the automatic disappearance of the effect is through the jquery delay () and hide () function to implement, because it is asynchronous authentication, do not refresh the page, want him to appear again, it is necessary to invoke the show () function.

Another noteworthy thing is that flag that tag is very important, as long as there is not meet the requirements of the input, the flag should be set to false, to prevent users to submit changes.