angualrjs之注册页面

最新推荐文章于 2022-07-25 15:31:43 发布

隐藏的文艺妹子

最新推荐文章于 2022-07-25 15:31:43 发布

阅读量645

点赞数

分类专栏： angular 文章标签： angular 验证码

本文链接：https://blog.csdn.net/zhaoqiaomua/article/details/72637648

版权

angular 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

注册页面逻辑思维

注册页面需要有手机号，密码，确认密码，验证码，获取验证码按钮，提交按钮

点击注册按钮是进行判断信息是否输入，输入的信息是否正确，哪一步的输入有误

首先判断手机号是否输入，输入的格式是否正确（正则表达式），输入后判断是否已经注册过

再判断输入的两次密码是否一致（也可以增加判断输入的密码格式是否有误）

获取验证码，判断验证码是否输入有误

代码

html部分

<form class="form-register zform" name="Form" >
  <div class="form-group" ng-class="{'has-error':Form.mobile.$dirty && Form.mobile.$invalid, 'has-success':Form.mobile.$valid}">
    <span>手机：</span>
    <span class="input-icon">
      <input type="text" class="form-control" name="mobile" placeholder="手机" ng-model="user.Mobile"
             ng-pattern="/^(((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/" required>
    </span>
    <span class="symbol required margin-left-5"></span>
  </div>
  <div class="form-group" ng-show="exist">
    <p class="text-red padding-left-15">该手机号已被注册，请重新输入</p>
  </div>
  <div class="form-group" ng-class="{'has-error':Form.smsCode.$dirty && Form.smsCode.$invalid, 'has-success':Form.smsCode.$valid}">
    <span>验证码：</span>
    <span class="input-icon">
    <input type="text" class="form-control" name="smsCode" placeholder="手机验证码" ng-model="user.smsCode" required>
    </span>
    <span class="symbol required margin-left-5"></span>
  </div>
  <div class="form-group">
    <button class="btn btn-primary zgetcode" ng-click="getSmsCode()" ng-disabled="state.indexOf('s') != -1 || disabledSmsCode">
      {{slogan}} {{state}}</button>
  </div>
  <div class="form-group" ng-class="{'has-error':Form.password.$dirty && Form.password.$invalid, 'has-success':Form.password.$valid}">
    <span>密码：</span>
    <span class="input-icon">
      <input type="password" class="form-control" name="password" placeholder="密码" ng-model="user.password" required>
      </span>
    <span class="symbol required margin-left-5"></span>
  </div>
  <div class="form-group" ng-class="{'has-error':Form.password_again.$dirty && Form.password_again.$invalid, 'has-success':Form.password_again.$valid}">
    <span>确认密码：</span>
    <span class="input-icon">
      <input type="password" class="form-control" name="password_again" placeholder="确认密码"
             ng-model="password_again" required>
    </span>
    <span class="symbol required margin-left-5"></span>
  </div>
  <div class="form-group zlogin">
    <button ng-disabled="Form.$invalid" class="btn btn-primary" ng-click="signUp()">提交</button>
  </div>
</form>

angularjs部门

//用户注册controller
.controller('registerCtrl',function($scope,Account,SweetAlert,$state,$interval){
 $scope.user = {};   //用户为空
 $scope.exist = false;   //手机号已注册提示显示为false
 $scope.checkTelephone = function(){  //输入手机号是引发的函数
  var pattern = /^(((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/;  //手机号格式
  var stat = pattern.test($scope.user.Mobile);   //定义stat为格式化输出的用户手机号
  if(stat && $scope.user.Mobile !== "" && $scope.user.Mobile !== undefined){  //如果手机号格式输入正确调用这个方法
   Account.checkTelephone({tel:$scope.user.Mobile},function(data){   //如果满条件，则得到数据
    $scope.exist = data.exist;   //提示框   
    if(data.exist){   //如果手机号已注册显示某些提示隐藏某些提示
     $scope.disabledSmsCode = true;    
           $scope.zsuccess = true;    
           $scope.zerror = false;
    }else{
     $scope.disabledSmsCode = false;
           $scope.zsuccess = false;
           $scope.zerror = true;
    }
   })
  }
 };

 $scope.$watch("user.Mobile",function(){  //$watch是一个scope函数，用于监听模型变化，当你的模型部分发生变化时它会通知你。
  if($scope.user.Mobile === "" || $scope.user.Mobile === undefined){   //监听手机号是否输入 如果手机号没有输入
   $scope.exist = false;    //显示提示
   $scope.disabledSmsCode = true;
       $scope.zsuccess = true;
       $scope.zerror = false;
  }else if($scope.user.Mobile && $scope.user.Mobile.length === 11){   //如果手机号输入并且长度为11位
   $scope.checkTelephone();  //输入手机号格式正确 调用函数判断手机号是否注册  
  }else{
   $scope.disabledSmsCode = true; 

  }
 });

 $scope.signUp = function(){  //提交按钮点击时候发生的事件
  if($scope.password_again === $scope.user.password){  //如果密码相同，用户正确，判断是否成功，如果不成功则是验证码输入错误
   Account.signUp($scope.user,function(data){   //如果密码相同调用方法
    if(data.msg === 'success'){   //如果返回的数据为成功
     SweetAlert.swal({   //弹出注册成功提示框
      title:'',
      text: "注册成功",
      type: "success",
      showCancelButton: false,
      confirmButtonColor: "#DD6B55",
      confirmButtonText: "是",
      cancelButtonText: "否",
      closeOnConfirm: true,
      closeOnCancel: true
     },function(isConfirm){    //弹框选择是否   是就登陆
      if (isConfirm) {  //如果确认
       $state.go('account.login');
      }
     });
    }else{  //如果返回的数据是失败    则就验证码输入有误  因为前面判断了手机是否正确，父级判断了密码是否相同，只有验证码没判断
     SweetAlert.swal("","验证码有误","error");
    }
   });
  }else{     //如果两次密码输入不一致，就不调用注册方法 弹框显示密码不一致的提示
   SweetAlert.swal("","两次密码不一致，请重新输入","warning");
  }
 };

 $scope.state = "获取验证码";   
 $scope.slogan = "";     //定义一个空的变量
 $scope.getSmsCode = function(){    //获取验证码点击时候触发函数
  if($scope.user.Mobile){  //如果手机号正确就开始倒计时  并调用方法
   var number = 60;     //定义一个变量
   $scope.state = number + ' s';   //修改state的值为拼接的字符串
   $scope.slogan = "请等待";        //修改值
   var timer = $interval(function(){  //$interval间隔  触发函数
    if(number === 0){     //判断时间为0秒 
     $scope.slogan = "";     
     $scope.state = "重新发送";
     $interval.cancel(timer);  //终止计时
    }else{
     number --;   //进行倒计时  number自减 
     $scope.state = number + ' s';    
    }
   },1000);  //1秒  每一秒触发一次函数 
   Account.sendSmsCode({telephone:$scope.user.Mobile},function(data){   //获取验证码的方法
    console.log(data);  //在控制台打印返回的数据
   })
  }else{   //如果手机号输入不正确 则不发生倒计时 获取验证码事件 直接弹框提示
   SweetAlert.swal("","请输入手机号码","info");   
  }
 }
})