这篇文章将为大家详细讲解有关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>
<h2 class='title'>忘记密码</h2>
</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如何实现点击按钮获取验证码功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。