AngularJS 实现点击按钮获取验证码功能实例代码


Posted in Javascript onJuly 13, 2017

 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 实现点击按钮获取验证码功能实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
XmlUtils JS操作XML工具类
Oct 01 Javascript
jquery 日期分离成年月日的代码
May 14 Javascript
EasyUI中的tree用法介绍
Nov 01 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
Apr 26 Javascript
js 时间格式与时间戳的相互转换示例代码
Dec 25 Javascript
jQuery实现的支持IE的html滑动条
Mar 16 Javascript
JavaScript iframe数据共享接口实现方法
Jan 06 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
Nov 08 Javascript
浅谈vue-cli 3.0.x 初体验
Apr 11 Javascript
JS实现自定义弹窗功能
Aug 08 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
Aug 12 Javascript
js加减乘除精确运算方法实例代码
Jan 17 Javascript
解决Vue页面固定滚动位置的处理办法
Jul 13 #Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
Jul 13 #Javascript
Angular如何引入第三方库的方法详解
Jul 13 #Javascript
详解如何构建Angular项目目录结构
Jul 13 #Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
Jul 13 #Javascript
JS实现弹出下载对话框及常见文件类型的下载
Jul 13 #Javascript
vue开发调试神器vue-devtools使用详解
Jul 13 #Javascript
You might like
PHP转换IP地址到真实地址的方法详解
2013/06/09 PHP
PHP实现的简单网络硬盘
2015/07/29 PHP
PHP实现简单ajax Loading加载功能示例
2016/12/28 PHP
sina的lightbox效果。
2007/01/09 Javascript
一个用js实现控制台控件的代码
2007/09/04 Javascript
window.open被浏览器拦截后的自定义提示效果代码
2007/11/19 Javascript
Jquery中获取iframe的代码
2011/01/11 Javascript
无阻塞加载脚本分析[全]
2011/01/20 Javascript
PHP结合jQuery实现红蓝投票功能特效
2015/07/22 Javascript
Javascript控制div属性动态变化实例分析
2015/10/08 Javascript
jQuery mobile 移动web(4)
2015/12/20 Javascript
Vue通过input筛选数据
2020/10/26 Javascript
JS倒计时实例_天时分秒
2017/08/22 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
2017/09/13 Javascript
vue.js项目中实用的小技巧汇总
2017/11/29 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
2018/03/16 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
2018/09/10 Javascript
Vue项目引进ElementUI组件的方法
2018/11/11 Javascript
vue动画效果实现方法示例
2019/03/18 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
2019/12/04 Javascript
[01:16]DOTA2小知识课堂 Ep.03 芒果树无伤肉山
2019/12/05 DOTA
[39:19]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第二场 11.26
2020/11/30 DOTA
在Python中操作字符串之startswith()方法的使用
2015/05/20 Python
详解Python IO编程
2020/07/24 Python
Python 解析简单的XML数据
2020/07/24 Python
python 基于pygame实现俄罗斯方块
2021/03/02 Python
世界顶级俱乐部的官方球衣和套装:Subside Sports
2018/04/22 全球购物
内部类的定义、种类以及优点
2013/10/16 面试题
三个儿子教学反思
2014/02/03 职场文书
生物制药专业求职信
2014/03/11 职场文书
工地例会施工汇报材料
2014/08/22 职场文书
无保留意见审计报告
2015/06/05 职场文书
合同补充协议书
2016/03/24 职场文书
光之国的四大叛徒:第一贝利亚导致宇宙毁灭,赛文奥特曼在榜
2022/03/18 日漫
最新动漫情报:2022年7月新番定档超过30部, OVERLORD骨王第四季也在其中噢
2022/05/04 日漫
教你如何用cmd快速登录服务器
2022/06/10 Servers