Angular获取手机验证码实现移动端登录注册功能
之前一直在用jQuery来做项目,使用比较熟练,目前公司要求使用angular来做项目,遇到一个登录模块如下所示,功能有两个方面,一个是点击按钮获取验证码,一个是点击登录验证表单。从用户体验角度来考虑有两个要注意的地方,默认两个按钮应该都是不可点击的,输入正确的手机号时验证码的按钮可点击,当再输入验证码时登录按钮可点击。
代码结构如下:
aracont}}
araclass" ng-click="loginCode()" ng-if="loginForm.phoneNum.$valid">{{p
aracont}}
之前写的一版没有对获取验证码按钮进行验证,后来修改了一下,验证码的按钮要在手机号输入正确时显示可点击,但是angular没有onInput这个方法,为了方便,写了两个按钮来实现这个效果。
样式如下:
rush:js;">
.inputItem{
width:6.4rem;
height:0.9rem;
margin:0 auto;
border:1px solid #ccc;
background:#fff;
}
.inputItem:f
irst-child{
border-b
ottom: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代码了:
rush:js;">
angular.module('loginModule',[]).controller('loginCtrl',['$s
cope','$interval',function($s
cope,$interval){
//
获取验证码
$s
cope.p
aracont = '
获取验证码';
$s
cope.p
araclass = 'button01';
$s
cope.errorHint = false;
$s
cope.p
araevent = true;
$s
cope.loginCode = function(){
if($s
cope.p
araevent){
var second = 59;
$s
cope.p
aracont = second + '秒后重发';
$s
cope.p
araclass = 'null button01';
var timer = $interval(function(){
if(second <=0){
$interval.cancel(timer);
$s
cope.p
aracont = '重发验证码';
second = 59;
$s
cope.p
araclass = 'button01';
$s
cope.p
araevent = true;
}else{
second--;
$s
cope.p
aracont = second + '秒后重发';
$s
cope.p
araevent = false;
}
},1000);
}
}
//提交
$s
cope.submitForm = function(isValid){
if(isValid){
alert("success!");
}
}
}])
最终写出来的效果就是下面这个样子了。
以上所述是小编给大家介绍的Angular获取手机验证码实现移动端登录注册功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。
原文地址:https://www.jb51.cc/js/39266.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。