有哪些常见的验证表单方式,他们各自的优缺点是什么?

大家好,我是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.参考文献

angularJs的表单验证

ng-show指令

AngularJS 输入验证

bootstrap validator插件使用流程

HTML 5 input required 属性

8.更多讨论

不同验证时间的优缺点是什么?

第一种输入时进行实时验证,获取焦点时显示提示,随着输入的过程,符合要求后给予用户通过验证的反馈,缺点是会影响一些性能,这个缺点也是很小的,一般情况下注册页都是单独出现的,所以只是执行几个keydown这种小函数应该也谈不上影响性能。

第二种失去焦点验证,会导致用户输入完账号后发现上边不符合标准,还要点回去进行修改,也是会影响一些用户体验。

第三种提交时才验证,这种就有些故意为了降低服务器而设置的表单验证了,考虑机器的成分大,对用户体验不够重视,是不被推荐的验证方式。

为什么要做表单验证?

减少后端的压力,提高页面性能,提高用户体验性,减少不必要的数据交互。

自己写判断还是用正则好?

如果是常用的,简单一些,非特殊的条件,可以用正则来进行判断,减少代码量,但有些时候用正则无法适用,或者用正则会出现报错,就需要我们自己来写。



视频链接

ppt链接


感谢大家观看

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

技能树.IT修真院

“我们相信人人都可以成为一个工程师,现在开始,找个师兄,带你入门,掌控自己学习的节奏,学习的路上不再迷茫”。

这里是技能树.IT修真院,成千上万的师兄在这里找到了自己的学习路线,学习透明化,成长可见化,师兄1对1免费指导。快来与我一起学习吧~

我的邀请码:12361358,或者你可以直接点击此链接:http://www.jnshu.com/login/1/12361358

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,015评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,262评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,727评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,986评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,363评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,610评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,871评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,582评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,297评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,385评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,035评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2 270

推荐阅读更多精彩内容