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);" rel="external nofollow" 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>

以上所述是小编给大家介绍的AngularJS 实现点击按钮获取验证码功能实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

以上是 AngularJS 实现点击按钮获取验证码功能实例代码 的全部内容, 来源链接: utcz.com/z/319647.html

回到顶部