angularjs 實現點擊按鈕獲取驗證碼

html :樣式採用了sui框架的樣式,請自行引入查看,angularjs,自己引入,

<div ng-controller="forGetPassword" ng-app="routingDemoApp">
   <form novalidate name="forget">
       <header class="bar bar-nav">
           <a href="javascript:history.go(-1);" class="ui-header-btn ui-header-btn-sm"></a>
           <h1 class='title'>忘記密碼</h1>
       </header>
       <div class="gorgetpassowrd">
           <ul>
               <li>
                   <input type="number" placeholder="請輸入您的手機號碼" required ng-model="mobile" name="mobile" ng-pattern="/^1[3|4|5|7|8]{1}[0-9]{9}$/">
               </li>
               <div ng-show="forget.mobile.$dirty && !forget.mobile.invalid">
                   <p class="textinfo" ng-show="forget.mobile.$error.required">手機號碼必填</p>
                   <p class="textinfo" ng-show="forget.mobile.$error.pattern">手機號碼格式不正確</p>
               </div>
               <li>
                   <input type="number" placeholder="驗證碼"  name="code" ng-model="code" required ng-minlength="6" ng-maxlength="6">
                   <a class="getCode paraclass" ng-click="getCode()" ng-bind="paracont" ng-disabled="paraevent"></a>
               </li>
               <div ng-show="forget.code.$dirty && !forget.code.invalid">
                   <p class="textinfo" ng-show="forget.code.$error.required">驗證碼必填</p>
                   <p class="textinfo" ng-show="forget.code.$error.minlength">驗證碼爲6位數字</p>
                   <p class="textinfo" ng-show="forget.code.$error.maxlength">驗證碼爲6位數字</p>
               </div>
           </ul>
           <p class="textinfo" ng-bind="mobiletest"></p>
           <a class="button  button-warning next-btn">下一步</a>
       </div>
   </form>


        <div class="changePwd">
            <form novalidate name="changePwd">
            <ul>
                <li>
                    <input type="password" placeholder="請輸入新密碼" required ng-model="newPwd" name="newPwd" ng-pattern="/^[a-zA-Z0-9]{6,20}/">
                </li>
                <div ng-show="changePwd.newPwd.$dirty && !changePwd.newPwd.invalid">
                    <p class="textinfo" ng-show="changePwd.newPwd.$error.required">密碼必須填</p>
                    <p class="textinfo" ng-show="changePwd.newPwd.$error.pattern">密碼由8-20位數字和字母組成</p>
                </div>
                <li>
                    <input type="password" placeholder="再次輸入新密碼"  name="resetPwd" ng-model="resetPwd" >
                </li>
                <div ng-show="changePwd.newPwd.$valid">
                    <p class="textinfo" ng-show="newPwd != resetPwd">兩次輸入的密碼不一致</p>
                </div>
            </ul>
            <a class="button  button-warning next-btn">確認修改</a>
            </form>
        </div>

</div>

<script>
var myCtrl = angular.module('routingDemoApp', ['ngRoute','infinite-scroll'])
myCtrl.controller('forGetPassword',function($scope,$interval){
    $scope.paracont = "獲取驗證碼";
    $scope.paraclass = "but_null";
    $scope.paraevent = true;
    var second = null,timePromise = undefined;
    $scope.getCode =function(){
        var mobile = $scope.mobile;
        if(second === null){
            second = 60;
            if(mobile == undefined || mobile ==""){
                $scope.mobiletest = "請輸入手機號碼";
                return false;
            }else{
                $scope.mobiletest = "";
                timePromise = $interval(function(){
                    if(second<=0){
                        $interval.cancel(timePromise);
                        timePromise = undefined;
                        second = null;
                        $scope.paracont = "重發驗證碼";
                        $scope.paraclass = "but_null";
                        $scope.paraevent = true;
                    }else{
                        $scope.paracont = second + "s";
                        second--;
                    }
                },1000,100);
            }
        }else{
            return false;
        }

    }
});

</script>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章