1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > angularjs 实现点击按钮获取验证码

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

时间:2024-06-03 09:46:17

相关推荐

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

html :样式采用了sui框架的样式,请自行引入查看,angularjs,自己引入,

<divng-controller="forGetPassword" ng-app="routingDemoApp"><formnovalidate name="forget"><headerclass="bar bar-nav"><ahref="javascript:history.go(-1);"class="ui-header-btn ui-header-btn-sm"></a><h1class='title'>忘记密码</h1></header><divclass="gorgetpassowrd"><ul><li><inputtype="number"placeholder="请输入您的手机号码"required ng-model="mobile"name="mobile"ng-pattern="/^1[3|4|5|7|8]{1}[0-9]{9}$/"></li><divng-show="forget.mobile.$dirty && !forget.mobile.invalid"><pclass="textinfo"ng-show="forget.mobile.$error.required">手机号码必填</p><pclass="textinfo"ng-show="forget.mobile.$error.pattern">手机号码格式不正确</p></div><li><inputtype="number"placeholder="验证码"name="code"ng-model="code"required ng-minlength="6"ng-maxlength="6"><aclass="getCode paraclass"ng-click="getCode()"ng-bind="paracont"ng-disabled="paraevent"></a></li><divng-show="forget.code.$dirty && !forget.code.invalid"><pclass="textinfo"ng-show="forget.code.$error.required">验证码必填</p><pclass="textinfo"ng-show="forget.code.$error.minlength">验证码为6位数字</p><pclass="textinfo"ng-show="forget.code.$error.maxlength">验证码为6位数字</p></div></ul><pclass="textinfo"ng-bind="mobiletest"></p><aclass="button button-warning next-btn">下一步</a></div></form><divclass="changePwd"><formnovalidate name="changePwd"><ul><li><inputtype="password"placeholder="请输入新密码"required ng-model="newPwd"name="newPwd"ng-pattern="/^[a-zA-Z0-9]{6,20}/"></li><divng-show="changePwd.newPwd.$dirty && !changePwd.newPwd.invalid"><pclass="textinfo"ng-show="changePwd.newPwd.$error.required">密码必须填</p><pclass="textinfo"ng-show="changePwd.newPwd.$error.pattern">密码由8-20位数字和字母组成</p></div><li><inputtype="password"placeholder="再次输入新密码"name="resetPwd"ng-model="resetPwd"></li><divng-show="changePwd.newPwd.$valid"><pclass="textinfo"ng-show="newPwd != resetPwd">两次输入的密码不一致</p></div></ul><aclass="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;varsecond =null,timePromise =undefined;$scope.getCode =function(){varmobile = $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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。