这里是修真院前端小课堂，每篇分享文从
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解析前端知识/技能，本篇分享的是：
【有哪些常见的验证表单方式,他们各自的优缺点是什么？】
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
1.背景介绍
JavaScript 可在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。以减轻后台数据传送压力，提高数据传送的质量和效率。
2.知识剖析
如何使用表单验证
原生js:获取input内容，if/switch判断，配合正则dom操作等实现目标
优点：灵活，减少加载时间；缺点：代码量大
js第三方插件：例如Bootstrap Validator
优点：代码量少；缺点：需要加载第三方js，样式比较固定
3.常见问题
表单验证有哪几种方式
1.实时判断
2.离开焦点
3.提交时验证
4.解决方案
5.代码实战
JS表单验证 <p>是否填写以及长度限制</p> <form name="a" onsubmit="return test()"><!--onsubmit表示表单提交时执行一段js代码，当该事件触发的函数中返回false时，表单就不会被提交，不能掉了return，否则表单永远会提交。--> <input type="text" name="b" placeholder="不超过5个字符" onkeyup="keyUp()" > <br> <input type="submit" name="Submit" value="check"> </form>1234567
function test() {
if (document.a.b.value == null || document.a.b.value == "") {
console.log("请输入字符");
return false;
}
if (document.a.b.value.length > 5) {
console.log("不能超过5个字符！");
return false;
}
}
function onBlur() {//失去焦点
if (document.a.b.value == null || document.a.b.value == "") {
console.log("请输入字符");
return false;
}
if (document.a.b.value.length > 5) {
console.log("不能超过5个字符！");
return false;
}
}
function keyUp() {//按键后判断
if (document.a.b.value == null || document.a.b.value == "") {
console.log("请输入字符");
return false;
}
if (document.a.b.value.length > 5) {
console.log("不能超过5个字符！");
return false;
}
}1234567891011121314151617181920212223242526272829303132
6.扩展思考
他们的优缺点
提交时验证：
优点:性能上更好；缺点：假如输入项过多的话，会影响用户体验
适合登陆账号时检测输入内容是否合法
onBlur:
优点：用户体验好；缺点：必须鼠标点击别处后才能知道结果
常见于输入验证码，注册等功能
onKeyup:
优点：反应迅速，体验佳；缺点：用在某些地方可能看起来很蠢或影响性能，比如正在输入验证码或者检测是否重名等
适用于检测数据类型，比如注册页面的密码项
7 .参考文献
<p>https://www.oschina.net/translate/angularjs-form-validation</p>1
8.更多讨论
还有那些常见的判断方式?
Q:现在一般企业用的是什么类型的表单验证？
A:腾讯阿里百度都是用的失去焦点验证，京东是实时验证
Q:防点击如何实现的，他有什么作用？
A:在angular中ng-disable为true的时候就会无法点击，所以我们需要与表单验证绑定起来再做一个取反判断即可，它可以更加人性化，使用户免于多余操作
Q：为什么要永novalidate
是在自己编写表单验证插件的时候（如jquery.validate,angular），为了避免和默认的表单验证冲突，
--------------------- 作者：luyu3283 来源：CSDN 原文：https://blog.csdn.net/luyu3283/article/details/82974678?utm_source=copy 版权声明：本文为博主原创文章，转载请附上博文链接！
更多内容，可以加入IT交流群565734203与大家一起讨论交流
这里是技能树·IT修真院：https://www.jnshu.com，初学者转行到互联网的聚集地