AngularJS 实现点击按钮获取验证码功能实例代码
时间:2019-03-30
本文章向大家介绍AngularJS 实现点击按钮获取验证码功能实例代码,主要包括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 实现点击按钮获取验证码功能实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- 3955 最长严格上升子序列(加强版)
- POJ 1985 Cow Marathon(树的直径)
- Django内置的分页模块
- Cookie和Session
- POJ 1655 Balancing Act(树的重心)
- Python黑帽编程 4.1 Sniffer(嗅探器)之数据捕获(上)
- Django之ORM其他骚操作
- Centos 7下 FTP 服务器
- Django之views系统
- Brackets
- django之urls系统
- 最长公共子序列(稀疏序列)nlogn解法
- P1776 宝物筛选_NOI导刊2010提高(02)(背包的二进制优化)
- PYTHON黑帽编程 4.1 SNIFFER(嗅探器)之数据捕获(下)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 一天一大 lee(回文对)难度:困难-Day20200806
- 一天一大 lee(扫雷游戏)难度:中等-Day20200820
- 一天一大 lee(重新安排行程)难度:中等-Day20200827
- 一天一大 lee(机器人能否返回原点)难度:简单-Day20200828
- 一天一大 lee(有序链表转换二叉搜索树)难度:中等-Day20200818
- 一天一大 lee(钥匙和房间)难度:中等-Day20200831
- 一天一大 lee(最短回文串)难度:困难-Day20200829
- 一天一大 lee(预测赢家)难度:中等-Day20200901
- 一天一大 lee(反转字符串中的单词 III)难度:简单-Day20200830
- 一天一大 lee(平衡二叉树)难度:简单-Day20200817
- 一天一大 lee(组合总和)难度:中等-Day20200909
- 一天一大 lee(回文子串)难度:中等-Day20200819
- 一天一大 lee(组合)难度:中等-Day20200908
- es6学习笔记
- 一天一大 lee(图像渲染)难度:简单-Day20200816