angularjs+ionic注冊頁面表單驗證（手機號、確認密碼、60s后重發驗證碼）

在已建立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的<form>表單中name為number的<input>輸入框；$dirty：<input>輸入框已與用戶進行交互；$invalid：<input>輸入框內容未通過自己設置的校驗。
• 33-- ng-disabled="registerForm.$invalid"：<form>表單都通過了校驗，才可用

注意：不要在<label>標簽里添加點擊事件！！

<ion-view title="注冊賬號">
    <ion-content class="text-center register-content">
        <div class="card">
            <form name="registerForm" novalidate>
                <label class="item  item-input">
                    <span class="input-label">手機號</span>
                    <input type="number" placeholder="請輸入11位手機號" name="number" required ng-minlength="11" ng-maxlength="11" ng-model="user.number">
                </label>
                <label class="item item-input">
                    <span class="input-label">輸入密碼</span>
                    <input type="password" placeholder="6-30位數字或字母" name="password" required ng-pattern="/[a-zA-Z0-9]/" ng-maxlength="30" ng-minlength="6" ng-model="user.password">
                </label>
                <label class="item item-input">
                    <span class="input-label">確認密碼</span>
                    <input type="password" placeholder="再次輸入密碼" name="password2" required ng-model="password2">
                </label>
                <div class="item item-input">
                    <span class="input-label col-25">驗證碼</span>
                    <input type="text" name="testcode" required ng-model="user.testcode">
                    <button  class="button gettestcode col-40" ng-click="getTestCode()" ng-bind="description" ng-disabled="canClick">
                    </button>
                </div>
            </form>
        </div>
            <span class="usererr assertive" ng-show="registerForm.number.$dirty && registerForm.number.$invalid">手機號輸入有誤</span>
            <span class="usererr assertive" ng-show="registerForm.password.$dirty && registerForm.password.$invalid">密碼輸入格式有誤</span>
        <span class="usererr assertive" ng-show="registerForm.password2.$dirty && user.password!=password2">兩次密碼輸入不一致</span>
        <label class="useragree">
            <input type="checkbox" name="useragree" ng-checked="true">
            <span> 同意<a href="javascript:;">發貨么用戶協議</a></span>
        </label>
        </ion-radio>
        <button class="button btn-load" ui-sref="tabs.mypage" ng-disabled="registerForm.$invalid">注冊</button>
     <br><br>
    </ion-content>
</ion-view>

 

在路由綁定的控制器js：

功能：點擊觸發獲取驗證碼函數，在倒計時59s期間不可再次發送請求。

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

    $scope.canClick=false;
    $scope.description="獲取驗證碼";
    var second=59;
    var timerHandler;
    $scope.getTestCode=function(){10         timerHandler=$interval(function(){
            if(second<=0){
            $interval.cancel(timerHandler);
            second=59;
            $scope.description="獲取驗證碼";
            $scope.canClick=false;
        }else{
            $scope.description=second+"s后重發";
            second--;
            $scope.canClick=true;
        }
            },1000)
    };