2.知识剖析

如何使用表单验证

原生js:获取input内容，if/switch判断，配合正则dom操作等实现目标

优点：灵活，减少加载时间；缺点：代码量大

js第三方插件：例如Bootstrap Validator

优点：代码量少；缺点：需要加载第三方js，样式比较固定

3.常见问题

表单验证有哪几种方式

1.实时判断

2.离开焦点

3.提交时验证

4.解决方案

提交时验证（onsubmit）

失去焦点（onBlur）

实时判断（onkeyup）

5.编码实战

6.扩展思考

他们的优缺点

提交时验证：

优点:性能上更好；缺点：假如输入项过多的话，会影响用户体验

适合登陆账号时检测输入内容是否合法

onBlur:

优点：用户体验好；缺点：必须鼠标点击别处后才能知道结果

常见于输入验证码，注册等功能

onKeyup:

优点：反应迅速，体验佳；缺点：用在某些地方可能看起来很蠢或影响性能，比如正在输入验证码或者检测是否重名等

适用于检测数据类型，比如注册页面的密码项

7.参考文献

https://www.oschina.net/translate/angularjs-form-validation

8 更多讨论

鸣谢

感谢大家观看

BY : 芦宇