欢迎来到代码驿站!

AngularJS

当前位置:首页 > 网页前端 > AngularJS

AngularJS 实现点击按钮获取验证码功能实例代码

时间:2021-06-19 08:16:05|栏目:AngularJS|点击:

 html :样式采用了sui框架的样式,请自行引入查看,AngularJS,自己引入,

<div ng-controller="forGetPassword" ng-app="routingDemoApp">
  <form novalidate name="forget">
    <header class="bar bar-nav">
      <a href="javascript:history.go(-1);" rel="external nofollow" class="ui-header-btn ui-header-btn-sm"></a>
      <h1 class='title'>忘记密码</h1>
    </header>
    <div class="gorgetpassowrd">
      <ul>
        <li>
          <input type="number" placeholder="请输入您的手机号码" required ng-model="mobile" name="mobile" ng-pattern="/^1[3|4|5|7|8]{1}[0-9]{9}$/">
        </li>
        <div ng-show="forget.mobile.$dirty && !forget.mobile.invalid">
          <p class="textinfo" ng-show="forget.mobile.$error.required">手机号码必填</p>
          <p class="textinfo" ng-show="forget.mobile.$error.pattern">手机号码格式不正确</p>
        </div>
        <li>
          <input type="number" placeholder="验证码" name="code" ng-model="code" required ng-minlength="6" ng-maxlength="6">
          <a class="getCode paraclass" ng-click="getCode()" ng-bind="paracont" ng-disabled="paraevent"></a>
        </li>
        <div ng-show="forget.code.$dirty && !forget.code.invalid">
          <p class="textinfo" ng-show="forget.code.$error.required">验证码必填</p>
          <p class="textinfo" ng-show="forget.code.$error.minlength">验证码为6位数字</p>
          <p class="textinfo" ng-show="forget.code.$error.maxlength">验证码为6位数字</p>
        </div>
      </ul>
      <p class="textinfo" ng-bind="mobiletest"></p>
      <a class="button button-warning next-btn">下一步</a>
    </div>
  </form>
    <div class="changePwd">
      <form novalidate name="changePwd">
      <ul>
        <li>
          <input type="password" placeholder="请输入新密码" required ng-model="newPwd" name="newPwd" ng-pattern="/^[a-zA-Z0-9]{6,20}/">
        </li>
        <div ng-show="changePwd.newPwd.$dirty && !changePwd.newPwd.invalid">
          <p class="textinfo" ng-show="changePwd.newPwd.$error.required">密码必须填</p>
          <p class="textinfo" ng-show="changePwd.newPwd.$error.pattern">密码由8-20位数字和字母组成</p>
        </div>
        <li>
          <input type="password" placeholder="再次输入新密码" name="resetPwd" ng-model="resetPwd" >
        </li>
        <div ng-show="changePwd.newPwd.$valid">
          <p class="textinfo" ng-show="newPwd != resetPwd">两次输入的密码不一致</p>
        </div>
      </ul>
      <a class="button button-warning next-btn">确认修改</a>
      </form>
    </div>
</div>
<script>
var myCtrl = angular.module('routingDemoApp', ['ngRoute','infinite-scroll'])
myCtrl.controller('forGetPassword',function($scope,$interval){
  $scope.paracont = "获取验证码";
  $scope.paraclass = "but_null";
  $scope.paraevent = true;
  var second = null,timePromise = undefined;
  $scope.getCode =function(){
    var mobile = $scope.mobile;
    if(second === null){
      second = 60;
      if(mobile == undefined || mobile ==""){
        $scope.mobiletest = "请输入手机号码";
        return false;
      }else{
        $scope.mobiletest = "";
        timePromise = $interval(function(){
          if(second<=0){
            $interval.cancel(timePromise);
            timePromise = undefined;
            second = null;
            $scope.paracont = "重发验证码";
            $scope.paraclass = "but_null";
            $scope.paraevent = true;
          }else{
            $scope.paracont = second + "s";
            second--;
          }
        },1000,100);
      }
    }else{
      return false;
    }
  }
});
</script>

上一篇:angularjs实现猜大小功能

栏    目:AngularJS

下一篇:Angular ng-repeat指令实例以及扩展部分

本文标题:AngularJS 实现点击按钮获取验证码功能实例代码

本文地址:http://www.codeinn.net/misctech/144326.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有