angularjs 常用指令

大家好,我是IT修真院顺义分院学员,一枚正直善良的web程序员。

今天给大家分享一下,修真院官网angularjs 常用表单验证指令!

1. 背景介绍

什么是表单验证?

表单验证是javascript中的高级选项之一。JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

-

2. 知识剖析

常见的表单验证有哪些?

比如登陆页面的账号和密码,我们可以限制账号和密码的长度,可以限制他不可以为空

比如我们在某些平台实名认证的时候,姓名,身份证号,手机号必填

3. 常见问题

如何实现表单验证呢??

4. 解决方案

h5自带表单验证

jQuery的表单验证

angular表单验证

angular表单验证中的ng-blur、ng-change、ng-focus、ng-disabled是如何运用到表单验证中的

1、ng-blur 指令用于告诉 AngularJS HTML 元素在失去焦点时需要执行的表达式。

AngularJS 中的 ng-blur 指令不会覆盖原生的 onblur 事件, 如果触发该事件,ng-blur 表达式与原生的 onblur 事件都会执行。

2、ng-focus 指令用于告诉 AngularJS 在 HTML 元素获取焦点时需要执行的操作。

ng-focus 指令不会覆盖元素的原始 onfocus 事件, 事件触发时,ng-focus 表达式与原始的 onfocus 事件将都会执行。

3、ng-change 指令用于告诉 AngularJS 在 HTML 元素值改变时需要执行的操作。

ng-change 指令需要搭配 ng-model 指令使用。

AngularJS ng-change 指令不会覆盖原生的 onchange 事件, 如果触发该事件,ng-change 表达式与原生的 onchange 事件都会执行。

ng-change 事件在值的每次改变时触发,它不需要等待一个完成的修改过程,或等待失去焦点的动作

ng-change 事件只针对输入框值的真实修改,而不是通过 JavaScript 来修改。

4、ng-disabled 指令设置表单输入字段的 disabled 属性(input, select, 或 textarea)。

如果 ng-disabled 中的表达式返回 true 则表单字段将被禁用。

5. 编码实战

demo

6.扩展思考

还有哪些表单验证的方式?

7. 参考文献

菜鸟

8. 更多讨论

今天的分享就到这里啦,欢迎大家点赞、转发、留言、拍砖~

感谢大家观看

PPT

视频

你可能感兴趣的:(angularjs 常用指令)