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 相关文章推荐
event对象的方法 兼容多浏览器
Jun 27 Javascript
js监听输入框值的即时变化onpropertychange、oninput
Jul 13 Javascript
js弹出层之1:JQuery.Boxy (二)
Oct 06 Javascript
jQuery实现切换页面布局使用介绍
Oct 09 Javascript
jquery中get和post的简单实例
Feb 04 Javascript
JavaScript获取当前页面上的指定对象示例代码
Feb 28 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
Feb 02 Javascript
Bootstrap3制作图片轮播效果
May 12 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
Oct 25 Javascript
Vue瀑布流插件的使用示例
Sep 19 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
Apr 24 Javascript
详解uniapp的全局变量实现方式
Jan 11 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/16 星际争霸
PHP运行时强制显示出错信息的代码
2011/04/20 PHP
php实现有趣的人品测试程序实例
2015/06/08 PHP
addRule在firefox下的兼容写法
2006/11/30 Javascript
js 点击按钮弹出另一页,选择值后,返回到当前页
2010/05/26 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
2014/04/29 Javascript
jQuery实现的Div窗口震动特效
2014/06/09 Javascript
JavaScript实现弹出子窗口并传值给父窗口
2014/12/18 Javascript
浅谈JavaScript中Date(日期对象),Math对象
2015/02/05 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
2015/10/09 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
2016/06/15 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
微信小程序 navbar实例详解
2017/05/11 Javascript
NodeJS 实现多语言的示例代码
2018/09/11 NodeJs
vue动画打包后失效问题的解决方法
2018/09/18 Javascript
Nodejs中获取当前函数被调用的行数及文件名详解
2018/12/12 NodeJs
用Fundebug插件记录网络请求异常的方法
2019/02/21 Javascript
深入Node TCP模块的理解
2019/03/13 Javascript
[11:27]《一刀刀一天》之DOTA全时刻20:TI4总奖金突破920W TS赛事分析
2014/06/18 DOTA
[04:02]2014DOTA2国际邀请赛 BBC每日综述中国战队将再度登顶
2014/07/21 DOTA
python实现全盘扫描搜索功能的方法
2019/02/14 Python
python中pytest收集用例规则与运行指定用例详解
2019/06/27 Python
大家都说好用的Python命令行库click的使用
2019/11/07 Python
Pycharm编辑器功能之代码折叠效果的实现代码
2020/10/15 Python
详解HTML5中的picture元素响应式处理图片
2018/01/03 HTML / CSS
两年的个人工作自我评价
2014/01/10 职场文书
运动会通讯稿400字
2014/01/28 职场文书
集体婚礼策划方案
2014/02/22 职场文书
大学运动会入场词
2014/02/22 职场文书
2014年六五普法工作总结
2014/11/25 职场文书
计算机专业自荐信范文
2015/03/26 职场文书
中学生社会实践教育活动总结
2015/05/06 职场文书
微观世界观后感
2015/06/10 职场文书
员工试用期工作总结
2019/06/20 职场文书
JS中forEach()、map()、every()、some()和filter()的用法
2022/05/11 Javascript