Some JS code for the user to bind the mobile authentication in the personal center.

Demand:

1: Mobile number check (format check, mobile phone number has been bound)---not implemented

2: Fill out the mobile phone number, click Send Verification code, the phone will receive a message

3: Send Verification Code button is not available, become resend Countdown

1): Can be sent after 60 seconds

2): Front page refresh, click the Send Verification Code button, as long as the time 60s, still can not send, the foreground prompt to send frequent

4: Enter the phone verification code received

5: Click OK, verify the code is correct, bind the phone

1): Wrong CAPTCHA, unable to bind

2): The phone number of the binding must be the same as the phone number that sent the verification code

3): The verification code itself set the expiration time normally 5 minutes

JS Code:

1$(function(){2         //This code will appear if the phone is not bound3<#if!userinfo.isbindphone>4         //add time to click-bound phone5$ ("#btn_showBindPhone"). Click (function(){6$ ("#bindPhoneModal"). Modal ("show"));7         })8         9         //Click the Send button countdown processingTen$ ("#sendVerifyCode"). Click (function(){ One             varphonenumber=$ ("#phoneNumber"). Val (); A             var_me=$ ( This); -             if(phonenumber) { -_me.attr ("Disabled",true); the                 varTime=60; - $.ajax ({ -DataType: "JSON", -Type: "POST", +URL: "/sendverifycode.do", - Data:{phonenumber:phonenumber}, +Successfunction(data) { A                         if(data.success) { at                             //send success, start countdown processing -                             varTimer=window.setinterval (function(){ -time--; -                                 if(time>0){ -_me.text (time+ "seconds after resend!")); -}Else{ in                                     //Clear Timer - Window.clearinterval (timer); to_me.text ("Resend Verification Code"); +_me.attr ("Disabled",false); -                                 } the},1000); *}Else{ $                             //send failed with prompt error messagePanax Notoginseng $.messager.popup (data.msg); -_me.attr ("Disabled",false);//reset button is available the                         } +                     } A                 }); the             } +         }); -          $         //Submit Bind Phone button response Event $$ ("#bindPhone"). Click (function(){ -$ ("#bindForm"). Ajaxsubmit (function(data) { -                 if(data.success) { the$.messager.confirm ("Hint", "bind phone succeeded!",function(){ -                         //bind succeeded, reload pageWuyi window.location.reload (); the                     }); -}Else{ Wu $.messager.popup (data.msg); -                 } About             }); $         }) -     }); -</#if >

Modal Frame:

1 <#if!userinfo.isbindphone>2         <!--bind phone Mode window -3         <Divclass= "Modal Fade"ID= "Bindphonemodal"TabIndex= "-1"role= "Dialog"Aria-labelledby= "Examplemodallabel">4           <Divclass= "Modal-dialog"role= "Document">5             <Divclass= "Modal-content">6               <Divclass= "Modal-header">7             <Buttontype= "button"class= "Close"Data-dismiss= "Modal"Aria-label= "Close"><spanAria-hidden= "true">&times;</span></Button>8             <h4class= "Modal-title"ID= "Examplemodallabel">Binding phone</h4>9               </Div>Ten               <Divclass= "Modal-body"> One                 <formclass= "Form-horizontal"ID= "Bindform"Method= "POST"Action= "/bindphone.do"> A                     <Divclass= "Form-group"> -                             <label for= "PhoneNumber"class= "Col-sm-2 Control-label">Phone Number:</label> -                             <Divclass= "Col-sm-4"> the                               <inputtype= "text"class= "Form-control"ID= "PhoneNumber"name= "PhoneNumber" /> -                               <ButtonID= "Sendverifycode"class= "Btn btn-primary"type= "button">Send Verification Code</Button> -                             </Div> -                         </Div> +                         <Divclass= "Form-group"> -                             <label for= "Verifycode"class= "Col-sm-2 Control-label">Verification Code:</label> +                             <Divclass= "Col-sm-4"> A                               <inputtype= "text"class= "Form-control"ID= "Verifycode"name= "Verifycode" /> at                             </Div> -                         </Div> -                 </form> -               </Div> -               <Divclass= "Modal-footer"> -                 <Buttontype= "button"class= "Btn Btn-default"Data-dismiss= "Modal">Cancel</Button> in                 <Buttontype= "button"class= "Btn btn-primary"ID= "Bindphone">Save</Button> -               </Div> to             </Div> +           </Div> -         </Div> the  </#if>

Some JS code for the user to bind the mobile authentication in the personal center.