用AngularJS来实现监察表单按钮的禁用效果  更新时间:2016年11月02日 11:08:25   作者:bboyjoe   本篇文章主要介绍了用AngularJS来实现监察表单按钮的禁用效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。 这篇博文主要是写给新手的,是给那些刚刚开始接触Angular,并且想了解数据绑定是如何工作的人。 这里主要是用到了$watch监察数据的变化,并用正则判断数据是否符合要求。 关键HTML代码: 提 交 关键CSS代码: .col-form{ padding: 5% 2%; margin-bottom: 10%; } .col-form .list label{ margin-bottom:0.2rem; border-radius: 0.5rem; } .col-form .list input{ font:normal 1rem fzltxhjw; } .item-my-style{ padding: 0.5rem; } .row-code{ padding-left: 0; padding-right: 0; } .button.code-btn{ margin:0; border-radius: 0.5rem; background-color: #ffba07; color: #51110a; } .col-mobile{ padding-left: 0; } .col-code{ padding-right: 0; } 这里主要是AngularJS的代码部分: var myApp=angular.module(‘myApp’, [‘ionic’]); myApp.controller(“FirstController”,[“$scope”,function($scope){ //监察手机号 $scope.isDisabled=true; $scope.mobileNum=””; $scope.mobileVal=function(){ return $scope.mobileNum; }; $scope.$watch($scope.mobileVal,function(newValue,oldValue){ var regex = /^(13[0-9]|14[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$/; if(regex.test(newValue)){ $scope.isDisabled=false; }else{ $scope.isDisabled=true; } }); //监察验证码 $scope.isSubmitted=true; $scope.codeNum=””; $scope.codeVal=function(){ return $scope.codeNum; }; $scope.$watch($scope.codeVal,function(newValue,oldValue){ if(newValue.length==4){ $scope.isSubmitted=false; }else{ $scope.isSubmitted=true; } }); }]); 显示效果: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。 您可能感兴趣的文章: AngularJS实现按钮提示与点击变色效果 ionic+AngularJs实现获取验证码倒计时按钮 使用AngularJS2中的指令实现按钮的切换效果 Angular2搜索和重置按钮过场动画 AngularJS 实现点击按钮获取验证码功能实例代码 用angular实现多选按钮的全选与反选实例代码 Angular.js实现获取验证码倒计时60秒按钮的简单方法 使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解 Angular实现点击按钮后在上方显示输入内容的方法 angularjs 表单 相关文章 Angular中使用ui router实现系统权限控制及开发遇到问题 这篇文章主要介绍了Angular中使用ui router实现系统权限控制及开发遇到问题的相关资料,本文分步骤介绍的非常详细,具有参考借鉴价值,需要的朋友可以参考下 2016-09-09 Angular利用trackBy提升性能的方法 这篇文章主要介绍了在Angular中利用trackBy来提升性能的实现方法,需要的朋友可以参考下 2018-01-01 AngularJS中比较两个数组是否相同 这篇文章主要介绍了AngularJS中比较两个数组是否相同,介绍的非常详细,具有参考借鉴价值,感兴趣的朋友一起看下吧 2016-08-08 Angular实现点击按钮后在上方显示输入内容的方法 这篇文章主要介绍了Angular实现点击按钮后在上方显示输入内容的方法,涉及AngularJS事件响应及页面元素属性动态设置相关操作技巧,需要的朋友可以参考下 2017-12-12 AngularJS基础 ng-click 指令示例代码 本文介绍AngularJS ng-click 指令,这里整理了ng-click指令的基础知识并且附有简单示例代码和实现效果图,有需要的小伙伴参考下 2016-08-08 深入理解Angular4中的依赖注入 在Angular中使用依赖注入,可以帮助我们实现松耦合,可以说只有在组件中使用依赖注入才能真正的实现可重用的组件。 2017-06-06 基于Angularjs+mybatis实现二级评论系统(仿简书) 这篇文章主要为大家详细介绍了基于Angularjs+mybatis实现二级评论系统,模仿简书效果制作,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-02-02 初学者AngularJS的环境搭建过程 这篇文章主要介绍了初学者AngularJS的环境搭建过程,在文章给大家提到了Angular-cli的特性,大家一起看看吧 2017-10-10 angularjs $http调用接口的方式详解 今天小编就为大家分享一篇angularjs $http调用接口的方式详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-08-08 angular *Ngif else用法详解 这篇文章主要介绍了angular *Ngif else用法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 2020-12-12 最新评论

这篇博文主要是写给新手的,是给那些刚刚开始接触Angular,并且想了解数据绑定是如何工作的人。

这里主要是用到了$watch监察数据的变化,并用正则判断数据是否符合要求。

关键HTML代码:

<div class="row row-form"> 
   <div class="col col-form"> 
    <div class="list"> 
     <div class="row row-code"> 
      <div class="col col-60 col-mobile"> 
       <label class="item item-input mobile-btn"> 
        <input type="text" placeholder="手机号" name="mobile_num" id="mobile_num" ng-model="mobileNum"> 
       </label> 
      </div> 
      <div class="col col-40 col-code"> 
        <input type="button" class="button button-block code-btn" id="get_num_btn" ng-click="getCode()" ng-value="info" ng-disabled="isDisabled"> 
      </div> 
     </div> 
 
     <label class="item item-input"> 
      <input type="text" placeholder="验证码" name="check_num" id="check_num" ng-model="codeNum"> 
     </label> 
     <button class="button button-block button-my-style" id="submit_btn" ng-click="submit()" ng-disabled="isSubmitted">提 交</button> 
    </div> 
   </div> 
  </div> 

关键CSS代码:

 .col-form{ 
 padding: 5% 2%; 
 margin-bottom: 10%; 
} 
.col-form .list label{ 
  margin-bottom:0.2rem; 
  border-radius: 0.5rem; 
} 
.col-form .list input{ 
 font:normal 1rem fzltxhjw; 
} 
.item-my-style{ 
 padding: 0.5rem; 
} 
.row-code{ 
 padding-left: 0; 
 padding-right: 0; 
} 
.button.code-btn{ 
 margin:0; 
 border-radius: 0.5rem; 
 background-color: #ffba07; 
 color: #51110a; 
} 
.col-mobile{ 
 padding-left: 0; 
} 
.col-code{ 
 padding-right: 0; 
} 

这里主要是AngularJS的代码部分:

var myApp=angular.module('myApp', ['ionic']); 
myApp.controller("FirstController",["$scope",function($scope){ 
  //监察手机号 
  $scope.isDisabled=true; 
  $scope.mobileNum=""; 
  $scope.mobileVal=function(){ 
    return $scope.mobileNum; 
  }; 
  $scope.$watch($scope.mobileVal,function(newValue,oldValue){ 
    var regex = /^(13[0-9]|14[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$/; 
    if(regex.test(newValue)){ 
      $scope.isDisabled=false; 
    }else{ 
      $scope.isDisabled=true; 
    } 
  }); 
  //监察验证码 
  $scope.isSubmitted=true; 
  $scope.codeNum=""; 
  $scope.codeVal=function(){ 
    return $scope.codeNum; 
  }; 
  $scope.$watch($scope.codeVal,function(newValue,oldValue){ 
    if(newValue.length==4){ 
      $scope.isSubmitted=false; 
    }else{ 
      $scope.isSubmitted=true; 
    } 
  }); 
   
}]); 

显示效果:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

  • AngularJS实现按钮提示与点击变色效果
  • ionic+AngularJs实现获取验证码倒计时按钮
  • 使用AngularJS2中的指令实现按钮的切换效果
  • Angular2搜索和重置按钮过场动画
  • AngularJS 实现点击按钮获取验证码功能实例代码
  • 用angular实现多选按钮的全选与反选实例代码
  • Angular.js实现获取验证码倒计时60秒按钮的简单方法
  • 使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
  • Angular实现点击按钮后在上方显示输入内容的方法
张贴在3