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

这里是修真院前端小课堂，每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能，本篇分享的是：

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

 

目录
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()" >
    

    <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/trans...;/p>1
8.更多讨论
还有那些常见的判断方式?

Q:如今通常企业用的是什么类型的表单验证？

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

Q:防点击如何实现的，他有什么做用？

A:在angular中ng-disable为true的时候就会没法点击，因此咱们须要与表单验证绑定起来再作一个取反判断便可，它能够更加人性化，使用户免于多余操做

Q：为何要永novalidate

是在本身编写表单验证插件的时候（如jquery.validate,angular），为了不和默认的表单验证冲突，