溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
之前一直在用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獲取手機驗證碼實現移動端登錄注冊功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
