大家好,我是IT修真院武汉分院web第16期的学员孟晨,一枚正直纯洁善良的web程序员
今天给大家分享一下,修真院官网js(职业)任务八,深度思考中的知识点——angular js常用指令 ng-blur、ng-change、ng-focus、ng-disabled是如何运用到表单验证中的?
1.背景介绍
AngularJS 表单是输入控件的集合,包含了HTML控件:input\select\button\textarea和HTML表单,通过使用ng-model来对数据进行绑定。通常表单验证中大多是输入验证,即对input内容的验证,使用$dierty\$valid\$invalid\$pristine属性来验证输入内容。今天则讲常用指令ng-blur、ng-change、ng-focus、ng-disabled是如何运用到表单验证中的。
2.知识剖析
ng-blur
定义用法:
当输入框失去焦点时执行表达式
ng-blur 指令不会覆盖原生的 onblur 事件, 如果触发该事件,ng-blur 表达式与原生的 onblur 事件都会执行。
语法:
ng-focus
定义用法:
当输入框获取焦点时执行表达式
ng-focus 指令不会覆盖元素的原始 onfocus 事件, 事件触发时,ng-focus 表达式与原始的 onfocus 事件将都会执行。
语法:
ng-change
定义用法:
当输入框的值改变时执行函数
ng-change 指令需要搭配 ng-model 指令使用。
ng-change指令不会覆盖原生的 onchange 事件, 如果触发该事件,ng-change 表达式与原生的 onchange 事件都会执行。
ng-change 事件在值的每次改变时触发,它不需要等待一个完成的修改过程,或等待失去焦点的动作。
ng-change 事件只针对输入框值的真实修改,而不是通过 JavaScript 来修改。
语法:
ng-disabled
定义用法:
禁用或启用输入框
ng-disabled 指令设置表单输入字段的 disabled 属性(input, select, 或 textarea)。
如果 ng-disabled 中的表达式返回 true 则表单字段将被禁用。
语法:
3.常见问题
常用指令ng-blur、ng-change、ng-focus、ng-disabled是如何运用到表单验证中的?
4.解决方案
ng-blur输入框失去焦点时执行函数,一般用在表单中的注册功能,如用户名重名提示信息显示。
ng-focus输入框获取焦点时执行表达式。可用在显示提醒事项。
ng-change 则可用于需要随时验证的表单数据,如设置密码输入两次的时候。
ng-disable 可用于表单输入不合法时,提交按钮则不可按的状态
5.编码实战
html的结构
<form name="f" ng-controller='c'>
<input name="input" ng-model="h" ng-change="j()" ng-blur="d()" ng-focus="b()" autocomplete="off">
<div>
<p ng-hide="v1">还没填</p>
<p ng-hide="v2">填少了</p>
</div>
<button class="btn btn-default btn-lg" disabled="disabled" ng-disabled="o">点</button>
</form>
为空时
//得到焦点就隐藏
$scope.b = function () {
$scope.v1 = true;
}
//设置默认隐藏
$scope.v1 = true;
//失焦为空
$scope.d = function () {
if ($scope.h == "") {
$scope.v1 = false;
} else {
$scope.v1 = true;
}
}
效果图
change
//得到焦点就隐藏
$scope.b = function () {
$scope.v2 = true;
}
//设置默认隐藏
$scope.v2 = true;
//change
$scope.j = function () {
if ($scope.h.length < 13) {
$scope.v2 = false;
} else {
$scope.v2 = true;
}
}
效果图
超级完整版
//得到焦点就隐藏
$scope.b = function () {
$scope.v1 = true;
$scope.v2 = true;
}
//设置默认隐藏
$scope.v1 = true;
$scope.v2 = true;
$scope.o = true;
//失焦为空
$scope.d = function () {
if ($scope.h == "") {
$scope.v1 = false;
$scope.v2 = true;
$scope.o = true;
} else {
$scope.v1 = true;
}
}
//change
$scope.j = function () {
if ($scope.h.length < 13) {
$scope.v2 = false;
$scope.o = true;
} else {
$scope.v2 = true;
$scope.o = false;
}
}
效果图
6.扩展思考
上面这些与ng-message相比的区别和优缺点在哪里?
ng-message可以直接在html文件中完成表单验证,做简单的表单验证像,字符长度等使用起来是比较方便的;指令设定了表单验证的触发条件,使用表达式判断的可以做复杂的验证,同时也增加了代码量。
7.参考文献
菜鸟教程
http://www.runoob.com/angularjs/angularjs-tutorial.html
8.更多讨论
1.原生onfocus事件和ng-focus执行的先后顺序?
原生onfocus事件执行在前,ng-focus指令执行在后。
2.ng-blur是失焦事件,当失焦以后再次获取焦点的时候会触发失焦事件吗?
失焦事件只会在失去焦点的时候触发,失去焦点再次获取焦点的时候不会触发失焦事件。
3.小课堂里失焦事件一直存在的原因
Demo中给触发事件后返回的信息进行了双向绑定,正常情况下,失焦事件消失之后提示信息也会消失的,加了双向绑定之后,除非下一次失焦事件发生返回信息发生变化,否则提示信息会一直存在的。
今天的分享就到这里啦,下面链接为修真院的链接感兴趣的童鞋可以注册看看
http://www.jnshu.com/login/1/25438437
欢迎大家点赞、转发、留言、拍砖~