用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 10 Javascript
基于jquery完美拖拽,可返回拖动轨迹
Mar 29 Javascript
如何使用json在前后台进行数据传输实例介绍
Apr 11 Javascript
javascript实现数独解法
Mar 14 Javascript
AngularJS表单详解及示例代码
Aug 17 Javascript
基于Javascript实现的不重复ID的生成器
Dec 25 Javascript
canvas红包照片实例分享
Feb 28 Javascript
socket.io实现在线群聊功能
Apr 07 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
Apr 04 Javascript
浅析vue中的MVVM实现原理
Mar 04 Javascript
详解基于Vue/React项目的移动端适配方案
Aug 23 Javascript
详解datagrid使用方法(重要)
Nov 06 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
phpstorm编辑器乱码问题解决
2014/12/01 PHP
thinkPHP实现的省市区三级联动功能示例
2017/05/05 PHP
ThinkPHP5 的简单搭建和使用详解
2018/11/15 PHP
PHP并发场景的三种解决方案代码实例
2021/02/27 PHP
Javascript 中介者模式实例
2009/12/16 Javascript
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
2010/03/02 Javascript
Javascript倒计时代码
2010/08/12 Javascript
简短几句 通俗解释javascript的闭包
2011/01/17 Javascript
jQuery中将函数赋值给变量的调用方法
2012/03/23 Javascript
javascript 寻找错误方法整理
2014/06/15 Javascript
javascript 控制input只允许输入的各种指定内容
2014/06/19 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
2014/07/18 Javascript
jQuery实现textarea自动增长宽高的方法
2015/12/18 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
2016/06/20 Javascript
Javascript中apply、call、bind的巧妙使用
2016/08/18 Javascript
js带闹铃功能的倒计时代码
2016/09/29 Javascript
JS基于正则表达式的替换操作(replace)用法示例
2017/04/28 Javascript
Node.js中的child_process模块详解
2018/06/08 Javascript
解析vue、angular深度作用选择器
2019/09/11 Javascript
webpack4 optimization使用总结
2019/11/10 Javascript
python的三目运算符和not in运算符使用示例
2014/03/03 Python
python 循环while和for in简单实例
2016/08/16 Python
Python获取某一天是星期几的方法示例
2017/01/17 Python
浅谈Python里面小数点精度的控制
2018/07/16 Python
Python中xml和json格式相互转换操作示例
2018/12/05 Python
巴西服装和鞋子购物网站:Marisa
2018/10/25 全球购物
美团网旗下网上订餐平台:美团外卖
2020/03/05 全球购物
运动会广播稿60字
2014/01/15 职场文书
小学庆六一活动方案
2014/02/28 职场文书
工程资料员岗位职责
2014/03/10 职场文书
2014年英语教研组工作总结
2014/12/06 职场文书
2014年行政后勤工作总结
2014/12/06 职场文书
2016大学生诚信考试承诺书
2016/03/25 职场文书
Python基础知识之变量的详解
2021/04/14 Python
MySQL派生表联表查询实战过程
2022/03/20 MySQL
python如何读取和存储dict()与.json格式文件
2022/06/25 Python