大家好,我是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. 编码实战
6.扩展思考
还有哪些表单验证的方式?
7. 参考文献
8. 更多讨论
今天的分享就到这里啦,欢迎大家点赞、转发、留言、拍砖~
感谢大家观看