Angular獲取手機驗證碼實現移動端登錄注冊功能

2019-11-19 16:34:34

字體：大中小

來源：轉載

供稿：網友

之前一直在用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!");       }  }  }])

最終寫出來的效果就是下面這個樣子了。

這里寫圖片描述