Angularjs + ionic registration page form verification (mobile phone number, Confirm Password, re-Send verification code after 60 s), angularjsionic

Angularjs + ionic registration page form verification (mobile phone number, Confirm Password, re-Send verification code after 60 s), angularjsionic
On the registration page of the created tabs and route, html:

Function:

• The mobile phone number and password format are verified. If the two passwords are the same, they are correct and the check box is selected before you can click Register to go To the tabs. mypage page.
• The verification code is not actually sent, the data obtained from the backend verification code is compared with the entered verification code.

Usage:

• 4 -- novalidate: Disable <form> form native verification to avoid conflict with the self-configured verification method.
• 7 -- type = "number": Specifies the input number type. required: The value cannot be blank. ng-minlength/ng-maxlength: specifies the minimum and maximum length of input characters.
• 11 -- type = "password": semantic, password format; ng-pattern = "/[a-zA-Z0-9]/": Enter numbers or letters with regular expressions
• 20 -- ng-click = "getTestCode ()": bind click event; ng-bind = "description": Text displayed on the control button; ng-disabled = "canClick ": control Button availability to avoid multiple requests in a short time
• 25 -- ng-show = "": displays the prompt text according to the condition; registerForm. number: The <input> input box of the <form> form with name as number with registerForm; $ dirty: <input> the input box has interacted with the user; $ invalid: <input> the content of the input box does not pass the self-set verification.
• 33 -- ng-disabled = "registerForm. $ invalid": <form> the form is verified before it can be used.

Note:Do not add click events in the <label> label !!

1 <ion-view title = "registered account"> 2 <ion-content class = "text-center register-content"> 3 <div class = "card"> 4 <form name = "registerForm" novalidate> 5 <label class = "item-input"> 6 <span class = "input-label"> mobile phone number </span> 7 <input type = "number" placeholder = "Enter the 11-digit mobile phone number" name = "number" required ng-minlength = "11" ng-maxlength = "11" ng-model = "user. number "> 8 </label> 9 <label class =" item-input "> 10 <span class = "Input-label"> enter password </span> 11 <input type = "password" placeholder = "6-30 digits or letters" name = "password" required ng-pattern = "/[a-zA-Z0-9]/" ng-maxlength = "30" ng-minlength = "6" ng-model = "user. password "> 12 </label> 13 <label class =" item-input "> 14 <span class =" input-label "> Confirm password </span> 15 <input type = "password" placeholder = "Enter password again" name = "password2" required ng-model = "password2"> 16 </label> 17 <div class = "item I Tem-input "> 18 <span class =" input-label col-25 "> Verification Code </span> 19 <input type =" text "name =" testcode "required ng- model = "user. testcode "> 20 <button class =" button gettestcode col-40 "ng-click =" getTestCode () "ng-bind =" description "ng-disabled =" canClick "> 21 </button> 22 </div> 23 </form> 24 </div> 25 <span class = "usererr assertive" ng-show = "registerForm. number. $ dirty & registerForm. number. $ invalid "> incorrect mobile phone number </spa N> 26 <span class = "usererr assertive" ng-show = "registerForm. password. $ dirty & registerForm. password. $ invalid "> incorrect password format </span> 27 <span class =" usererr assertive "ng-show =" registerForm. password2. $ dirty & user. password! = Password2 "> two passwords are inconsistent </span> 28 <label class =" useragree "> 29 <input type =" checkbox "name =" useragree "ng-checked = "true"> 30 <span> agree <a href = "javascript :; "> shipping User Agreement </a> </span> 31 </label> 32 </ion-radio> 33 <button class =" button btn-load "ui-sref = "tabs. mypage "ng-disabled =" registerForm. $ invalid "> Registration </button> 34 <br> 35 </ion-content> 36 </ion-view>

 

In the Controller js bound to the route:

Function:Click to trigger the function to obtain the verification code. The request cannot be sent again during the countdown of 59s.

Note:Remember to inject $ interval into the Controller

1 $ scope. canClick = false; 2 $ scope. description = "get verification code"; 3 var second = 59; 4 var timerHandler; 5 $ scope. getTestCode = function () {10 timerHandler = $ interval (function () {11 if (second <= 0) {12 $ interval. cancel (timerHandler); 13 second = 59; 14 $ scope. description = "get verification code"; 15 $ scope. canClick = false; 16} else {17 $ scope. description = second + "resend after s"; 18 second --; 19 $ scope. canClick = true; 20} 21 }, 1000) 22 };