JavaScript
发布时间：2022-04-16 发布网站：大佬教程 code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Angular获取手机验证码实现移动端登录注册功能，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
之前一直在用jQuery来做项目，使用比较熟练，目前公司要求使用angular来做项目，遇到一个登录模块如下所示，功能有两个方面，一个是点击按钮获取验证码，一个是点击登录验证表单。从用户体验角度来考虑有两个要注意的地方，默认两个按钮应该都是不可点击的，输入正确的手机号时验证码的按钮可点击，当再输入验证码时登录按钮可点击。
代码结构如下：
m.phoneNu
m.$valid">
{{paracont}}
之前写的一版没有对获取验证码按钮进行验证，后来修改了一下，验证码的按钮要在手机号输入正确时显示可点击，但是angular没有onInput这个方法，为了方便，写了两个按钮来实现这个效果。
样式如下：
{
width:6.4rem;
height:0.9rem;
margin:0 auto;
border
:1px solid #cc
c;
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 #cc
c;
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 #cc
c;
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)
{
$interva
l.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 收集整理的教程希望能对你有所帮助，如果觉得菜鸟教程不错，可分享给好友！感谢支持。
大佬总结
以上是大佬教程为你收集整理的Angular获取手机验证码实现移动端登录注册功能全部内容，希望文章能够帮你解决Angular获取手机验证码实现移动端登录注册功能所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
