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

时间:2021-10-03 13:27:38

一.背景介绍

表单验证是javascript中的高级选项之一。JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证,以减轻后台数据传送压力,提高数据传送的质量和效率

二.知识剖析

表单验证的作用

用户是否已填写表单中的必填项目?

用户输入的邮件地址是否合法?

用户是否已输入合法的日期?

用户是否在数据域(numeric field) 中输入了文本?

如何使用表单验证

1.利用手工js代码

if/switch,或者正则表达式,+DOM操作

缺点:代码量大,耗时多

优点:相比于第三方库,可以减少加载的js文件大小,样式灵活

如果网站的表但很少,或者格式简单,或者对性能的要求高,可以手工写

2.利用js第三方插件

优点:全站适用,手工代码量少

缺点:有可能加重服务器负担,样式相对固定

三.常见问题

表单验证有那几种方式?

四.解决方案

1.输入时进行实时验证(.keydown)

采用了ng-message的表单验证,使用$touched,实时的反馈验证情况

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

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

2.退出焦点时验证(.onblur)

使用了$dirty,结束输入后进行判断

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

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

3.提交表单时进行本地验证

html5自带的判断的方法,可以判断是否为空以及长度,种类是否符合规范

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

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

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

$validng-validBoolean 告诉我们这一项当前基于你设定的规则是否验证通过

$invalidng-invalidBoolean 告诉我们这一项当前基于你设定的规则是否验证未通过

$pristineng-pristineBoolean 如果表单或者输入框没有使用则为True

$dirtyng-dirtyBoolean 如果表单或者输入框有使用到则为True

五.编码实战

六.拓展思考

这些验证方法的优缺点是什么?

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

第二种失去焦点验证,会导致用户输入完账号后发现上边不符合标准,还要点回去进行修改,也是会影响一些用户体验。第三种提交时才验证,这种就有些故意为了降低服务器而设置的表单验证了,考虑机器的成分大,对用户体验不够重视,是不被推荐的验证方式

七.参考资料

AngularJS 的表单验证

八.更多讨论

还有那些常见的判断方式?


Q:现在一般企业用的是什么类型的表单验证?

A:腾讯阿里百度都是用的失去焦点验证,京东是实时验证

Q:防点击如何实现的,他有什么作用?

A:在angular中ng-disable为true的时候就会无法点击,所以我们需要与表单验证绑定起来再做一个取反判断即可,它可以更加人性化,使用户免于多余操作

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

点击有惊喜