发表于： 2017-07-02 22:39:28
1 783
今天完成的事情：
【JS-10】angular.js常用指令ng-blur、ng-change、ng-focus、ng-disabled是如何运用到表单验证中的？
深圳分院小课堂第159期
分享人：覃腾波
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
1.背景介绍
除了使用ng-message进行表单验证外，我们还可以用angular哪些指令进行验证呢？
2.知识剖析
ng-blur
ng-blur 指令用于告诉 AngularJS HTML 元素在失去焦点时需要执行的表达式。
AngularJS 中的 ng-blur 指令不会覆盖原生的 onblur 事件， 如果触发该事件，ng-blur 表达式与原生的 onblur 事件都会执行。
语法:< element ng-blur="expression"></ element >
< a >, < input >, < select >, < textarea >,窗口对象支持。
ng-change
ng-change 指令用于告诉 AngularJS 在 HTML 元素值改变时需要执行的操作。
ng-change 指令需要搭配 ng-model 指令使用。
AngularJS ng-change 指令指令不会覆盖原生的 onchange 事件, 如果触发该事件，ng-change 表达式与原生的 onchange 事件都会执行。
ng-change 事件在值的每次改变时触发，它不需要等待一个完成的修改过程，或等待失去焦点的动作。
ng-change 事件只针对输入框值的真实修改，而不是通过 JavaScript 来修改。
语法：< element ng-change="expression">< /element>
< input>, < select>, 和 < textarea> 元素支持。
ng-focus
ng-focus 指令用于告诉 AngularJS 在 HTML 元素获取焦点时需要执行的操作。
ng-focus 指令不会覆盖元素的原始 onfocus 事件, 事件触发时，ng-focus 表达式与原始的 onfocus 事件将都会执行。
语法：< element ng-focus="expression">< /element>
< a>, < input>, < select>, < textarea>, 和 window 对象都支持该指令。
ng-disabled
指令设置表单输入字段的 disabled 属性(input, select, 或 textarea)。
如果 ng-disabled 中的表达式返回 true 则表单字段将被禁用。
语法:< input ng-disabled="expression">< /input>
< input>, < select>, 和 < textarea> 元素都支持该指令。
DEMO：
<body ng-controller="demo as vm">
<div class="abc">
<p>ng-change Demo</p>
<form>
<label>请输入昵称：<input type="text" ng-model="vm.name" ng-change="vm.fn1()"><span class="marlef">{{ vm.tip1 }}</span></label>
<p>ng-focus Demo</p>
<label>请修改密码：<input type="password" ng-model="vm.pwd" ng-focus="vm.fn2()" ng-blur="vm.fa()"><span class="marlef">{{ vm.tip2 }}</span></label>
<p>ng-blur Demo</p>
<label>请再次输入密码：<input type="password" ng-model="vm.pwd1" ng-blur="vm.fn3()"><span class="marlef">{{ vm.tip3 }}</span></label>
</form>
<p>ng-disabled Demo</p>
<button type="button" class="button" ng-disabled="vm.name == undefined || vm.pwd == undefined || vm.pwd1 == undefined || vm.pwd !== vm.pwd1" ng-click="vm.sub()">提交注册</button>
<span class="green">{{ vm.tip4 }}</span>
</div>
<script>
var myApp = angular.module("app", []);
myApp.controller("demo", demo);
function demo() {
var vm = this;
vm.fn1 = function() {
if(vm.name !== undefined && vm.name.length < 3) {
vm.tip1 = "昵称长度至少为3";
}
else if(vm.name !== undefined && vm.name.length > 10) {
vm.tip1 = "昵称长度最大为10";
}
else if(vm.name == undefined) {
vm.tip1 = "昵称不允许为空";
}
else {
vm.tip1 = "";
}
}
vm.pwd = 123456;
vm.fn2 = function() {
vm.tip2 = "请输入较复杂的字母和数字组合";
}
vm.fa = function() {
vm.tip2 = "";
}
vm.fn3 = function() {
if(vm.pwd1 !== vm.pwd) {
vm.tip3 = "两次输入的密码不一致";
}
else {
vm.tip3 = "";
}
}
vm.sub = function() {
vm.tip4 = "提交成功";
}
}
</script>
明天计划的事情：
首页模块的编写
遇到的问题：
暂无
收获：
ng-blur、ng-focus、ng-change、ng-disabled的用法
返回列表
评论