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

之前一直在用jQuery来做项目，使用比较熟练，目前公司要求使用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获取手机验证码实现移动端登录注册功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

• Ionic+AngularJS实现登录和注册带验证功能
• ionic+AngularJs实现获取验证码倒计时按钮
• 使用jQuery,Angular实现登录界面验证码详解
• AngularJS 验证码60秒倒计时功能的实现
• Ionic + Angular.js实现验证码倒计时功能的方法