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

前端之家收集整理的这篇文章主要介绍了Angular获取手机验证码实现移动端登录注册功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

这里写图片描述

代码结构如下:

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

样式如下:

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代码了:

获取验证码 $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获取手机验证码实现移动端登录注册功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/js/39266.html

猜你在找的JavaScript相关文章