angular实现input输入监听
来源:互联网 发布:化学软件初中 编辑:程序博客网 时间:2024/06/05 08:59
最近做用户注册登录时,需要监控用户的输入以此来给用户提示,用到了angular的$watch功能,以下是例子:
jsp:
<form class="register ng-scope" ng-app="regist_app" onsubmit="registSumbitValid()" ng-controller="regist_control"> <div class="item"> <input id="username" name="username" placeholder="请填写11位手机号码" class="input-item" ng-model="username" > <span class="warnning">{{username_error}}</span> </div></form>
这里需要添加ng-app以及ng-controller来规定一个angularApp的范围,再在input标签中添加ng-model属性,让angularjs根据这个属性来监听输入,根据输入把用户提示放到{{username_error}}中
js:
var usernameValid=false;var registApp =angular.module('regist_app',[]);registApp.controller('regist_control',function($scope){ $scope.username=""; $scope.username_error=""; var phonePattern=/\D+/; /*验证号码输入*/ $scope.$watch('username',function(newValue,oldValue){ if(newValue!=oldValue){ if(newValue==""){ $scope.username_error="号码不能为空"; usernameValid=false; } else if(phonePattern.test(newValue)){ $scope.username_error='只能输入数字'; usernameValid=false; } else if(newValue.length!=11){ $scope.username_error='格式不正确,请输入11位号码'; usernameValid=false; }else if(newValue.length==11){ $scope.username_error=""; usernameValid=true; } } });}
usernameValid这个值用来记录当前的input输入是否合法,用于表单提交时根据usernameValid来判断。
效果截图:
阅读全文
0 0
- angular实现input输入监听
- 监听 input 输入
- input 输入监听 coocs2d-js
- 监听input框输入的监听事件
- HTML 输入框input事件监听实例
- 监听文本框输入(input & textarea)
- 原生js实时监听input、textarea输入
- jquery 自定义input输入监听事件
- 实时监听input输入的变化
- 总结 input propertychange 监听输入框
- 监听input输入框的值得变化
- jquery 监听input输入值改变方法
- input输入框内容变化实时监听
- 通过jq来监听input的输入状态,实现角标的显示/隐藏
- Vue文件中监听input输入事件v-on:input
- angular input输入框中使用filter格式化日期
- 实现两个INPUT同步输入
- JQuery 实时监听input输入框的值
- dubbo client测试工具
- hdoj 2009
- 百度网盘客户端可以提速!!!
- python学习笔记之008.py
- python中将汉字转换为拼音的库xpinyin
- angular实现input输入监听
- 六:使用码云
- python学习笔记之009.py
- Promise胡思乱想(一)
- 跨计算机、跨平台、跨语言对象表示格式JSON必火
- jquery php json cookie ajax 解决跨域的问题
- python学习笔记之010.py
- jq:对下拉框select的操作的总结
- Linux常用命令-Shell技巧及其他