忘记密码验证码60秒

爱被打了一巴掌 2022-06-04 10:12 166阅读 0赞

<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>

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>