用AngularJS来实现监察表单按钮的禁用效果


Posted in Javascript onNovember 02, 2016

这篇博文主要是写给新手的,是给那些刚刚开始接触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来实现监察表单按钮的禁用效果

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

Javascript 相关文章推荐
javascript 出生日期和身份证判断大全
Nov 13 Javascript
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
Oct 24 Javascript
Jquery倒数计时按钮setTimeout的实例代码
Jul 04 Javascript
jQuery事件用法实例汇总
Aug 29 Javascript
jquery制作漂亮的弹出层提示消息特效
Dec 23 Javascript
JS实现的表格行鼠标点击高亮效果代码
Nov 27 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
Jun 08 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
Jan 05 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
Mar 15 Javascript
react router4+redux实现路由权限控制的方法
May 03 Javascript
nuxt 每个页面head标签内容设置方式
Nov 05 Javascript
正则表达式基础与常用验证表达式
Jun 16 Javascript
AngularJS入门教程之Cookies读写操作示例
Nov 02 #Javascript
js导出excel文件的简洁方法(推荐)
Nov 02 #Javascript
AngularJS入门教程之多视图切换用法示例
Nov 02 #Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
Nov 02 #Javascript
arcgis for js 修改infowindow样式的方法
Nov 02 #Javascript
快速解决js中window.location.href不工作的问题
Nov 02 #Javascript
javascript创建对象的3种方法
Nov 02 #Javascript
You might like
如何选购合适的收音机
2021/03/01 无线电
destoon实现调用自增数字从1开始的方法
2014/08/21 PHP
Yii实现多按钮保存与提交的方法
2014/12/03 PHP
php的ddos攻击解决方法
2015/01/08 PHP
详解PHP的Yii框架的运行机制及其路由功能
2016/03/17 PHP
php实现websocket实时消息推送
2018/03/30 PHP
php实现微信发红包功能
2018/07/13 PHP
Laravel Eloquent ORM 多条件查询的例子
2019/10/10 PHP
JSON 入门指南 想了解json的朋友可以看下
2009/08/26 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
2014/12/16 Javascript
js实现商品抛物线加入购物车特效
2020/11/18 Javascript
AngularJS控制器继承自另一控制器
2016/05/09 Javascript
详解JavaScript中Hash Map映射结构的实现
2016/05/21 Javascript
angularJs关于指令的一些冷门属性详解
2016/10/24 Javascript
js中数组插入、删除元素操作的方法
2017/02/15 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
2017/08/29 jQuery
如何选择适合你的JavaScript框架
2017/11/20 Javascript
js调用设备摄像头的方法
2018/07/19 Javascript
vue中各种通信传值方式总结
2019/02/14 Javascript
详解JavaScript栈内存与堆内存
2019/04/04 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
2019/05/14 Javascript
vue iview 隐藏Table组件里的某一列操作
2020/11/13 Javascript
[42:32]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.27
2020/12/01 DOTA
python 把数据 json格式输出的实例代码
2016/10/31 Python
Python爬虫实现简单的爬取有道翻译功能示例
2018/07/13 Python
Python Pandas 如何shuffle(打乱)数据
2019/07/30 Python
佐卡伊官网:中国知名珠宝品牌
2017/02/05 全球购物
AJAX都有哪些有点和缺点
2012/11/03 面试题
致跳远、跳高运动员广播稿
2014/01/09 职场文书
公司端午节活动方案
2014/02/04 职场文书
超市重阳节活动方案
2014/02/10 职场文书
优秀高中生事迹材料
2014/02/11 职场文书
手把手教你制定暑期学习计划,让你度过充实的暑假
2019/08/22 职场文书
python实现socket简单通信的示例代码
2021/04/13 Python
对讲机的最大通讯距离是多少
2022/02/18 无线电
使用python绘制分组对比柱状图
2022/04/21 Python