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

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

目录

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>
  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;
    }

}

6.扩展思考

他们的优缺点

提交时验证:

优点:性能上更好;缺点:假如输入项过多的话,会影响用户体验

适合登陆账号时检测输入内容是否合法

onBlur:

优点:用户体验好;缺点:必须鼠标点击别处后才能知道结果

常见于输入验证码,注册等功能

onKeyup:

优点:反应迅速,体验佳;缺点:用在某些地方可能看起来很蠢或影响性能,比如正在输入验证码或者检测是否重名等

适用于检测数据类型,比如注册页面的密码项

7 .参考文献

        <p>https://www.oschina.net/translate/angularjs-form-validation</p>

8.更多讨论

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

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

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

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

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

Q:为什么要永novalidate

是在自己编写表单验证插件的时候(如jquery.validate,angular),为了避免和默认的表单验证冲突,

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值