Angular获取手机验证码实现移动端登录注册功能


Posted in Javascript onMay 17, 2017

之前一直在用jQuery来做项目,使用比较熟练,目前公司要求使用angular来做项目,遇到一个登录模块如下所示,功能有两个方面,一个是点击按钮获取验证码,一个是点击登录验证表单。从用户体验角度来考虑有两个要注意的地方,默认两个按钮应该都是不可点击的,输入正确的手机号时验证码的按钮可点击,当再输入验证码时登录按钮可点击。

Angular获取手机验证码实现移动端登录注册功能 

代码结构如下:

<form name="loginForm" ng-controller="loginCtrl" ng-submit="submitForm(loginForm.$valid)" novalidate>
  <div class="inputItem">
    <input type="number" name="phoneNum" placeholder="手机号" ng-model="userPhone" ng-pattern="/^1[3|4|5|7|8]\d{9}$/" required/>
  </div>
  <div class="inputItem">
    <input type="number" name="phoneCode" placeholder="短信验证码" ng-model="userPhoneCode" ng-focus="errorHint=ture" required/>
    <div class="button01 null" ng-if="loginForm.phoneNum.$invalid">{{paracont}}</div>
    <div ng-class="paraclass" ng-click="loginCode()" ng-if="loginForm.phoneNum.$valid">{{paracont}}</div>
    <div class="errorHint fontred" ng-if="errorHint">验证码不正确</div>
  </div>
  <button type="submit" class="button02" ng-disabled="loginForm.$invalid">登 录</button>
</form>

之前写的一版没有对获取验证码按钮进行验证,后来修改了一下,验证码的按钮要在手机号输入正确时显示可点击,但是angular没有onInput这个方法,为了方便,写了两个按钮来实现这个效果。

样式如下:

.inputItem{
  width:6.4rem;
  height:0.9rem;
  margin:0 auto;
  border:1px solid #ccc;
  background:#fff;
}
.inputItem:first-child{
  border-bottom:none;
}
.inputItem input{
  padding:0.1rem 0;
  margin:0.2rem;
  width:3.7rem;
}
.button01{
  width:2rem;
  height:0.7rem;
  border:1px solid #ccc;
  text-align: center;
  line-height:0.7rem;
  font-size:0.26rem;
  float:right;
  margin:0.1rem 0.2rem 0 0;
  box-sizing:border-box;
}
.button01.null{
  color:#999;
}
.fontred{
  color:#red;
}
.button02{
  display:block;
  width:6.4rem;
  height:0.9rem;
  text-align: center;
  line-height:0.9rem;
  border:1px solid #ccc;
  margin:0.8rem auto 0;
  background:#fff; 
}
.errotHint{
  line-height:0.6rem;
  font-size:0.24rem;
  padding-left:0.2rem;
  }

接下来就是比较重要的AngularJS代码了:

angular.module('loginModule',[]).controller('loginCtrl',['$scope','$interval',function($scope,$interval){
  //获取验证码
  $scope.paracont = '获取验证码';
  $scope.paraclass = 'button01';
  $scope.errorHint = false;
  $scope.paraevent = true;
  $scope.loginCode = function(){
    if($scope.paraevent){
      var second = 59;
      $scope.paracont = second + '秒后重发';
      $scope.paraclass = 'null button01';
      var timer = $interval(function(){
        if(second <=0){
          $interval.cancel(timer);
          $scope.paracont = '重发验证码';
          second = 59;
          $scope.paraclass = 'button01';
          $scope.paraevent = true;
        }else{
          second--;
          $scope.paracont = second + '秒后重发';
          $scope.paraevent = false;
        }        
      },1000);
    }
  }
  //提交
  $scope.submitForm = function(isValid){
    if(isValid){
      alert("success!");   
    }
  }  
}])

最终写出来的效果就是下面这个样子了。

Angular获取手机验证码实现移动端登录注册功能

以上所述是小编给大家介绍的Angular获取手机验证码实现移动端登录注册功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQuery分别取得每行最后一列和最后一行的示例代码
Aug 18 Javascript
js判断浏览器是否支持html5
Aug 17 Javascript
纯JS实现旋转图片3D展示效果
Apr 12 Javascript
javascript中caller和callee详解
Aug 10 Javascript
微信小程序仿微信运动步数排行(交互)
Jul 13 Javascript
详解适配器在JavaScript中的体现
Sep 28 Javascript
手动下载Chrome并解决puppeteer无法使用问题
Nov 12 Javascript
Vue 组件注册实例详解
Feb 23 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
Sep 16 Javascript
Javascript如何递归遍历本地文件夹
Aug 06 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
Oct 29 Javascript
15个值得收藏的JavaScript函数
Sep 15 Javascript
原生JS实现层叠轮播图
May 17 #Javascript
JavaScript手风琴页面制作
May 17 #Javascript
jQuery查找dom的几种方法效率详解
May 17 #jQuery
bootstrap的工具提示实例代码
May 17 #Javascript
js字符串与Unicode编码互相转换
May 17 #Javascript
JavaScript实现省市县三级级联特效
May 16 #Javascript
原生js简单实现放大镜特效
May 16 #Javascript
You might like
星际中的相关伤害
2020/03/04 星际争霸
DOTA2游戏同人动画《龙之血》导演接受采访
2021/03/05 欧美动漫
PHP实现把文本中的URL转换为链接的auolink()函数分享
2014/07/29 PHP
PHP类的声明与实例化及构造方法与析构方法详解
2016/01/26 PHP
Laravel Reponse响应客户端示例详解
2020/09/03 PHP
统一接口:为FireFox添加IE的方法和属性的js代码
2007/03/25 Javascript
Prototype ObjectRange对象学习
2009/07/19 Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
2011/09/02 Javascript
在Windows上安装Node.js模块的方法
2011/09/25 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
2013/04/19 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
2014/02/10 Javascript
javascript模拟枚举的简单实例
2014/03/06 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
2015/02/13 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
2015/03/24 Javascript
jquery使用animate方法实现控制元素移动
2015/03/27 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
2015/04/26 Javascript
jquery实现简单的遮罩层
2016/01/08 Javascript
jQuery内容过滤选择器用法示例
2016/09/09 Javascript
微信小程序 保留小数(toFixed)详细介绍
2016/11/16 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
2019/03/07 Javascript
解决Antd Table组件表头不对齐的问题
2020/10/27 Javascript
数据挖掘之Apriori算法详解和Python实现代码分享
2014/11/07 Python
python获取当前计算机cpu数量的方法
2015/04/18 Python
python实现的系统实用log类实例
2015/06/30 Python
200行自定义python异步非阻塞Web框架
2017/03/15 Python
django反向解析和正向解析的方式
2018/06/05 Python
Python IDLE清空窗口的实例
2018/06/25 Python
python 返回列表中某个值的索引方法
2018/11/07 Python
python实现文件的备份流程详解
2019/06/18 Python
django数据模型on_delete, db_constraint的使用详解
2019/12/24 Python
Python numpy矩阵处理运算工具用法汇总
2020/07/13 Python
通过实例解析Python文件操作实现步骤
2020/09/21 Python
简单英文演讲稿
2014/01/01 职场文书
优秀毕业生主要事迹材料
2015/11/04 职场文书
应届毕业生的自我评价
2019/06/21 职场文书
PHP实现rar解压读取扩展包小结
2021/06/03 PHP