先上一段,页面的html代码:
<!--html-->
<!-- 添加页面登陆功能,登陆后才可抽奖 -->
<div class="login" ng-if="showLogin">
<div class="login-content">
<div class="login-title">
<p class="welcomeLogin">欢迎登录</p>
</div>
<div class="login-body">
<div class="body-wrapper">
<div class="login-phone">
<span>手机号:</span>
<input type="text" name="phone" value="" ng-model="$parent.mobile" ng-blur="mobileCheck()">
</div>
<hr/>
<div class="login-verification">
<span>验证码:</span>
<input type="text" name="verification" value="">
<a ng-click="sendCode()" ng-bind="paracont" ng-disabled="paraevent"></a>
</div>
</div>
<p ng-if="mobileErr">请输入格式正确的手机号码</p>
<button class="login-bnt">登录</button>
<div class="begin" ng-click="closeLogin()">
<span>开始抽奖 >></span>
</div>
</div>
<div class="login-footer">
</div>
</div>
</div>
踩坑实记:ng-if会创建一个子scope作用域,会继承父级作用域的属性。对于值类型的变量来说,如果修改了ng-if中的变量的值,父scope中的值是不会修改的。这里我们用ng-model绑定input输入框的内容。必须加上$parent才可以绑定到父级scope的作用域上。
- 验证手机号是否合法
var app = angular.module("app",[])
app.controller("luckCtrl", function($scope, $http, $interval){
$scope.mobileErr = false; //设置默认的验证状态为正确
$scope.mobileCheck = function(){
var mobile = $scope.mobile + '';//强制转换为字符串
if(mobile.length == 0 || mobile.length != 11){
$scope.mobileErr = true;
return false;//将登录状态设置为false
}//长度验证
var checkRegex = /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,2,3,5-9])|19[0-9])\d{8}$/;
if(!checkRegex.test(mobile)){//正则表达式合法性验证
$scope.mobileErr = true;
return false
}
$scope.mobileErr = false;
}
}
2.发送验证码
var app = angular.module("app",[])
app.controller("luckCtrl", function($scope, $http, $interval){
$scope.paracont = "发送验证";//发送验证时的默认文本
$scope.paraevent = true;//发送验证可否点击
var second = null;
var timePromise = undefined;
$scope.sendCode = function(){
var mobile = $scope.mobile
if(second === null){
second = 60;//初始化发送间隔为60s
$scope.mobiletest = "";
timePromise = $interval(
function(){
if(second<=0){
$interval.cancel(timePromise)//超时则取消间隔定时器
timePromise = undefined;
second = null;
$scope.paracont = "重新获取";//重置状态
$scope.paraevent = true//可点击重新获取
}else{
$scope.paracont = second + "s"
second--;//计时中国
}
},1000,100)
}else{
return false;
}
}
}