推荐一款十分好用的客户端表单输入校验插件，JQuery的vali
2021-06-10 本文已影响0人
似朝朝我心
回归一个很原始的问题，那就是客户端为什么要进行表单验证呢？表单验证有什么好处?
我们知道表单验证的数据最终都是要提交到服务器上的，那么服务器是不是宁缺毋滥，无论用户输入的表单信息是正确的还是错误的，都不作任何判断，都毫无遗漏地存到服务器上？
答案当然是只需要保留用户输入的正确数据，而用户输入的那一部分错误表单信息，通通过滤掉，而validate插件的存在就是让表单的输入的错误信息数据止步于客户端这一端，到服务器的这条路上它会说此路不通，不会让错误的表单输入数据也上传到服务器上当宝进行保存，避免浪费空间。
比如用户明明输入的是一些乱七八糟的特殊字符，不合法的输入，客户端提交了数据之后，等待服务器来进行检验，进而服务器这边马不停蹄地开始干活，把一个错误信息的反馈给客户端。
这样明知道服务器返回来的是失败结果反馈，还非要往服务器跑一趟，不仅浪费用户的带宽还浪费了用户的等待时间，这是一种十分不好的体验。
所以我们十分有必要让表单输入验证止步于客户端，只有客户端检验通过后，才上传到服务器上，这样服务器拿到的就是正确的表单输入，进而保存起来。
客户端表单验证的原理：
表单验证有哪些情形?
- 邮箱地址填写格式有误？
- 用户输入的两次密码不一致？
- 手机号码输入非数字或者不满足11位数？
- 验证码输入错误？
- 密码输入应该符合特定长度，不能涵盖特殊字符
- 用户名不合法等等。
validate插件的优势：
- 可自行搭配的规则
- 验证规则众多
- 方便调用
- 提示个性化
- 控制表单提交与否
使用validate插件时需要的环境搭建
官网：
https://jqueryvalidation.org/
版本解释：常用的是开发版本、带min的是经过压缩的发布版本
官网cdn下载位置：
使用：点击链接，跳转之后，全选复制，然后回到自己的项目当中新建一个jquery.validate.js文件进行粘贴,或者直接选择链接右键另存为。
其他支持：validate插件的实现依赖Jquery框架，所以想要使用validate插件，必须引入Jquery的语法支持。
JQuery官网：
https://jquery.com/
选择链接右键另存为
在网页中调用插件资源
值得注意的是引入文件的顺序：必须是jquery3.6.js语法最先引入，jquery.validate.js插件次之。
<head>
<meta charset="utf-8">
<title>validate插件的尝试</title>
<script src="jquery3.6.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.validate.js" type="text/javascript" charset="utf-8"></script>
</head>
具体使用教程：
- 首先准备好一份表单框架
- 启动表单验证插件：需要给form标签绑定一个id属性，其成员input框绑定name属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>validate插件的尝试</title>
<script src="./jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="./jquery.validate.js" type="text/javascript" charset="utf-8"></script>
</head>
<style>
.level_prompt {
margin-top: -40px;
margin-left: 160px;
width: 120px;
height: 25px;
position: relative;
background-color: rgba(1, 162, 241, 0.9);
border-radius: 7px;
}
.arrow {
position: absolute;
width: 40px;
height: 40px;
bottom: -7px;
left: -28px;
}
.arrow * {
display: block;
border-width: 10px 10px;
position: absolute;
border-style: solid;
font-size: 0;
line-height: 0;
}
.arrow span {
border-color:transparent rgba(1, 162, 241, 0.9) transparent transparent ;
top: 10px;
left: 10px;
}
</style>
<body>
<script type="text/javascript">
$(document).ready(function(){
$("#myForm").validate({
rules:{
account:{
required:true,
digits:true,
},
password:{
required:true,
minlength:6,
maxlength:12,
},
enter_again:{
equalTo:'#identify'
},
email:{
email:true
}
},
messages:{
account:{
required:"账号为必填！",
digits:"<span style='color:red'>账号必须为整数！</span>"
},
password:{
required:"<span style='color:red;border:1px solid red'>密码为必填！</span>",
minlength:'密码不能少于6位！',
maxlength:'密码不能大于12位！'
},
enter_again:{
equalTo:
`
<div class='level_prompt position-absolute'>
<p>密码输入不一致</p>
<div class='arrow'>
<span></span>
</div>
</div>
`
},
email:{
email:"<span><img style='width:20px;height:20px' src='./warn.png'>必须输入正确的电子邮箱格式</span>"
}
}
})
})
</script>
<form id="myForm" action="#" method="post">
<table border="1" cellspacing="" cellpadding="">
<tr>
<td>账号:</td>
<td><input type="text" name="account" /></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="password" id="identify"/></td>
</tr>
<tr>
<td>重复密码:</td>
<td><input type="password" name="enter_again" /></td>
</tr>
<tr>
<td>邮箱:</td>
<td><input type="email" name="email" /></td>
</tr>
<tr>
<td colspan="2"><input style="width: 100%;" type="submit" value="提交" /></td>
</tr>
</table>
</form>
</body>
</html>
表单验证效果图预览：
validate插件常用的rules规则表：
