大家好，我是IT修真院郑州分院第四期的学员王相博，一枚正直纯洁善良的XX程序员
今天给大家分享一下，修真院官网JS（职业）任务10，深度思考中的知识点——表单验证
一.背景介绍
JavaScript 可在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。以减轻后台数据传送压力，提高数据传送的质量和效率。
二.知识剖析
了解一下表单验证
H5自带的表单验证属性
在点击提交时进行本地验证demo
利用手工js代码
if/switch，或者正则表达式，+DOM操作
缺点：代码量大，耗时多
优点：相比于第三方库，可以减少加载的js文件大小，样式灵活
如果网站的表但很少，或者格式简单，或者对性能的要求高，可以手工写demo2
利用js第三方插件
优点：全站适用，手工代码量少
缺点：有可能加重服务器负担，样式相对固定
三.常见问题
何时进行验证？
四.解决方案
输入时进行实时验证(.keydown)京东注册
退出焦点时验证(.onblur)demo3
提交表单时进行本地验证亚马逊登录
五.编码实战
var regP = /^\d{6,16}$/;
var regU = /^([A-Za-z0-9\S]){5,16}$/;
$("input:first").blur(function(){
var user = $("input:first").val();
if (regU.test(user) == true ){
$("p:eq(1)").html("输入正确")
}else{
$("p:eq(1)").html("请输入正确的用户名")
}
});
6.拓展思考
这些验证方法的优缺点是什么？
第一种京东的方法还是挺好的，毕竟大公司，获取焦点时显示提示，随着输入的过程，符合要求后给予用户通过验证的反馈，缺点是会影响一些性能，这个缺点也是很小的，一般情况下注册页都是单独出现的，所以只是执行几个keydown这种小函数应该也谈不上影响性能。第二种失去焦点验证，会导致用户输入完账号后发现上边不符合标准，还要点回去进行修改，也是会影响一些用户体验。第三种提交时才验证，这种就有些故意为了降低服务器而设置的表单验证了，考虑机器的成分大，对用户体验不够重视，是不被推荐的验证方式。
7.参考资料
8.更多讨论
今天没讲到的验证方式与其优缺点
表单验证的优劣_腾讯视频
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
下期预告：强制缓存和协商缓存，不见不散~
网友评论