angularjs+ionic註冊頁面表單驗證

在已建立tabs和路由的註冊頁面html：

功能：

• #進行了手機號碼、密碼格式驗證，兩次密碼輸入是否相同的判斷，都正確且複選框勾選後才可點擊註冊，進入tabs.mypage頁面。

• 未進行驗證碼真正傳送、取得後台驗證碼資料與輸入驗證碼進行比較。

使用：

• 4--  novalidate：禁止執行<form>表單原生校驗，避免與自己設定的校驗方法發生衝突

• 7-- type="number"：限定輸入數字類型；required：限定不能為空; ng-minlength/ng-maxlength：限定輸入字元最小、最大長度

• 11-- type= "password"：語意化，密碼格式；ng-pattern="/[a-zA-Z0-9]/"：用正規限定輸入數字或字母

• 20-- ng-click="getTestCode()"：綁定點擊事件;ng-bind="description"：控制按鈕顯示文字；ng-disabled="canClick"：控制按鈕可用性，避免短時間內多次要求

• 25-- ng-show=""：依照條件顯示提示文字；registerForm. number：name為registerForm的

  表單中name為number的輸入框；$dirty：輸入框已與使用者進行互動；$invalid：輸入框內容未通過自己設定的校驗。

• 33-- ng-disabled="registerForm.$invalid"：表單都通過了校驗，才可用

注意：不要在標籤裡新增點擊事件！ ！

                                                                  手机号                                                                            输入密码                                                                            确认密码                                                                            验证码                                                                                                                   手机号输入有误             密码输入格式有误         两次密码输入不一致                                    同意发货么用户协议                           注册

在路由綁定的控制器js：

#功能：點擊觸發取得驗證碼函數，在倒數59s期間不可再傳送請求。

注意：記得在控制器中註入$interval

#

 1     $scope.canClick=false; 2     $scope.description="获取验证码"; 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="获取验证码";15             $scope.canClick=false;16         }else{17             $scope.description=second+"s后重发";18             second--;19             $scope.canClick=true;20         }21             },1000)22     };

 

# 

#

以上是angularjs+ionic註冊頁面表單驗證的詳細內容。更多資訊請關注PHP中文網其他相關文章！