angularjs 实现点击按钮获取验证码

来源：互联网发布：mac怎么安装手绘板编辑：程序博客网时间：2024/06/05 12:08

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>

阅读全文

0 0