首頁 > web前端 > js教程 > 主體

angularjs+ionic註冊頁面表單驗證

PHPz
發布: 2017-03-12 15:59:14
原創
2017 人瀏覽過

在已建立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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!