大家好,我是IT修真院北京总院第24期的学员,一枚正直纯洁善良的web程序员
今天给大家分享一下,修真院官网JS任务10,深度思考中的知识点——谈谈以前端角度出发做好SEO需要考虑什么?
1.背景介绍
JavaScript 可在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。以减轻后台数据传送压力,提高数据传送的质量和效率。
HTML5自带的表单验证属性
js代码
js第三方插件
2.知识剖析
验证时间
输入时进行实时验证(.onchange)京东注册
退出焦点时验证(.onblur)修真院官网
提交表单时进行本地验证亚马逊登录
H5自带的表单验证属性
JS代码
if/switch,或者正则表达式,DOM操作
缺点:代码量大,耗时多
优点:相比于第三方库,可以减少加载的js文件大小,样式灵活
如果网站的表但很少,或者格式简单,或者对性能的要求高,可以手工写
利用JS第三方插件
优点:全站适用,手工代码量少
缺点:有可能加重服务器负担,样式相对固定
3.常见问题
1.表单验证常见的验证信息
2.不同的方法分别是什么写法?
4.解决方案
表单验证常见信息
是否为空(必填/选填)
字符长度(用户名,密码,姓名,电话,邮编,身份证)
大小写
标点,符号
是否支持中文
格式(邮箱,手机,银行卡)
两次密码
主要介绍三大类写法,分别是:js原生写法、angular js的表单验证写法、angular插件ng-message写法。
5.编码实战
1.js原生写法
2.angularJs ng-show写法
3.angularjs ng-message(angular表单验证插件)(推荐)
6.扩展思考
其他的插件
BootstrapValidator
7.参考文献
8.更多讨论
不同验证时间的优缺点是什么?
第一种输入时进行实时验证,获取焦点时显示提示,随着输入的过程,符合要求后给予用户通过验证的反馈,缺点是会影响一些性能,这个缺点也是很小的,一般情况下注册页都是单独出现的,所以只是执行几个keydown这种小函数应该也谈不上影响性能。
第二种失去焦点验证,会导致用户输入完账号后发现上边不符合标准,还要点回去进行修改,也是会影响一些用户体验。
第三种提交时才验证,这种就有些故意为了降低服务器而设置的表单验证了,考虑机器的成分大,对用户体验不够重视,是不被推荐的验证方式。
为什么要做表单验证?
减少后端的压力,提高页面性能,提高用户体验性,减少不必要的数据交互。
自己写判断还是用正则好?
如果是常用的,简单一些,非特殊的条件,可以用正则来进行判断,减少代码量,但有些时候用正则无法适用,或者用正则会出现报错,就需要我们自己来写。
感谢大家观看
今天的分享就到这里啦,欢迎大家点赞、转发、留言、拍砖~
技能树.IT修真院
“我们相信人人都可以成为一个工程师,现在开始,找个师兄,带你入门,掌控自己学习的节奏,学习的路上不再迷茫”。
这里是技能树.IT修真院,成千上万的师兄在这里找到了自己的学习路线,学习透明化,成长可见化,师兄1对1免费指导。快来与我一起学习吧~
我的邀请码:12361358,或者你可以直接点击此链接:http://www.jnshu.com/login/1/12361358