angualrjs之注册页面

注册页面逻辑思维

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

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

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

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

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

代码

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");     } }})