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

视频

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容