【JS-8】angular js常用指令 ng-blur、ng-change、ng-focus、ng-disabled是如何运用到表单验证中的?
分享人:陈静雯
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
表单验证是javascript中的高级选项之一。JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
angularjs中表单验证的方法,除了ng-message之外还有ng-blur、ng-change、ng-focus和ng-disabled。
ng-blur
ng-blur 指令用于告诉 AngularJS HTML 元素在失去焦点时需要执行的表达式。
AngularJS 中的 ng-blur 指令不会覆盖原生的 onblur 事件, 如果触发该事件,ng-blur 表达式与原生的 onblur 事件都会执行。
语法:< element ng-blur="expression">
< a >, < 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-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-disabled
ng-disabled 指令设置表单输入字段的 disabled 属性(input, select, 或 textarea)。
如果 ng-disabled 中的表达式返回 true 则表单字段将被禁用。
语法:< input ng-disabled="expression">< /input>
< input>, < select>, 和 < textarea> 元素都支持该指令。
上面这些与ng-message相比的区别和优缺点在哪里?
语法: return[()[expression][]]; 可选项 expression 参数是要从函数返回的值。如果省略,则该函数不返回值。 用 return 语句来终止一个函数的执行,并返回 expression 的值。如果 expression
被省略, 或在函数内没有 return 语句被执行,则把值 undefined 赋给调用当前函数的表达式。