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 实现点击按钮获取验证码功能实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月25日
2024年09月25日
- 范文芳.1996-FNNTASY【HYPE】【WAV+CUE】
- 纯音入心系列纯音乐《韵味古筝曲》1CD[MP3][146.2MB]
- 纯音入心系列纯音乐《古筝系列-传统乐曲》1CD[MP3][974.7MB]
- 纯音入心系列纯音乐《古筝系列-弦凝指咽声停处》1CD[MP3][656.5MB]
- 群星.1994-大烂片2辑【派森】【WAV+CUE】
- 吴倩莲.1997-望爱【EMI百代】【WAV+CUE】
- 杨千嬅.2002-万紫千红演唱会2CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 郭采洁.2015-Begin.Again爱造飞鸡【华纳】【FLAC分轨】
- 许志安.2011-ON.AND.ON【东亚】【WAV+CUE】
- 潘秀琼.1994-木兰从军【名将】【WAV+CUE】
- 纯音入心系列纯音乐《古筝系列-当流行乐遇到古筝》1CD[MP3][1.9GB]
- 纯音入心系列纯音乐《精选古筝名曲100首》1CD[MP3][388.7MB]
- 纯音入心系列纯音乐《天籁古筝》1CD[MP3][331MB]
- 男女对唱典藏天碟《发烧对唱·那个季节里的歌DSD》10CD[WAV]
- 群星2010-歌林精选辑[歌林][WAV+CUE]