通过jQuery Validate插件的基本使用，完成用户表单注册验证的设计与实现
jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。
表单验证插件：jQuery Validate 中文API
验证码插件：jQuery canvas验证码
Validate默认验证规则
| 规则 | 描述 |
|---|---|
| required:true | 必须输入的字段。 |
| remote:“check.php” | 使用 ajax 方法调用 check.php 验证输入值。 |
| email:true | 必须输入正确格式的电子邮件。 |
| url:true | 必须输入正确格式的网址 |
| date:true | 必须输入正确格式的日期。日期校验 ie6 出错，慎用。 |
| dateISO:true | 必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。 |
| number:true | 必须输入合法的数字（负数，小数）。 |
| digits:true | 必须输入整数。 |
| creditcard: | 必须输入合法的信用卡号。 |
| equalTo:"#field" | 输入值必须和 #field 相同。 |
| accept: | 输入拥有合法后缀名的字符串（上传文件的后缀） |
| maxlength:5 | 输入长度最多是 5 的字符串（汉字算一个字符）。 |
| minlength:10 | 输入长度最小是 10 的字符串（汉字算一个字符）。 |
| rangelength:[5,10] | 输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。 |
| range:[5,10] | 输入值必须介于 5 和 10 之间。 |
| max:5 | 输入值不能大于 5。 |
| min:10 | 输入值不能小于 10。 |
实现效果展示
注册页面
错误提示
引入JS库
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<!-- 表单验证jquery插件 validate -->
<script src="js/jquery.validate.min.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入jq_canvas-验证码.js -->
<script src="js/jq_canvas-验证码.js" type="text/javascript" charset="utf-8"></script>
HTML布局
<form action="#" method="get" id="zhuce">
<img src="images/豹.png" width="150px">
<!-- <h3>用户注册</h2> -->
<div class="kuang">
<span>用户名</span>
<!-- 空格占位符 一个中文空格+四分之一空格 -->
  
<input type="text" class="inp" id="user" name="username" placeholder="请输入用户名" />
</div>
<div class="kuang">
<span>设置密码</span>
<input type="password" class="inp" id="pwd" name="password" placeholder="请输入密码" />
</div>
<div class="kuang">
<span>确认密码</span>
<input type="password" class="inp" id="second_pwd" name="second_pwd" placeholder="请再次输入密码" />
</div>
<div class="kuang">
<span>电子邮箱</span>
<input id="email" class="inp" name="email" type="email" placeholder="请输入正确的邮箱格式">
</div>
<div class="kuang">
<select style="width: 80px;height: 30px;">
<option value="中国 +86" selected >中国 +86</option>
<option value="中国香港特别行政区 +852">中国香港特别行政区 +852</option>
<option value="中国澳门特别行政区 +853" >中国澳门特别行政区 +853</option>
<option value="中国台湾地区 +886" >中国台湾地区 +886</option>
</select>
<input type="text" class="inp" name="phone" placeholder="手机号码" />
</div>
<!-- 自己添加的 验证码jqc插件 -->
<div class="kuang" id="yzm">
<label>验证码</label>  
<input type="text" placeholder="验证码不区分大小写" class="inp" id="input-val"/>
<canvas id="canvas" width="100" height="43" style="background-color: #fff;"></canvas>
<br />
<label id="yan"></label>
</div>
<div id="check">
<input type="checkbox" style="padding-top: 80px;" ><label>我已阅读并同意</label>
<a target="_blank" href="#">《使用条款》</a>
及
<a target="_blank" href="#">《非活跃帐号处理规范》</a>
</div>
<div><button type="submit" class="sub">提交</button></div>
</form>
CSS样式
body{
background-image: url(images/pexels-maksim-romashkin-10304563.jpg);
/* 把背景图片放大到适合元素容器的尺寸，图片比例不变， */
background-size: cover;
/* background-repeat: no-repeat; */
}
img{
opacity: 0.8;
display: block;
margin-left: auto;
margin-right: auto;
}
.inp{
height: 35px;
border: 3px solid #aee1ec;
/* border: none; */
border-radius: 15px;
background-color: #f9f9f9;
}
.kuang{
display: block;
font-size: 20px;
padding: 5px;
/* text-align: center; */
margin-top: 5px;
margin-bottom: 5px;
margin-left: 53px;
/* width: 400px; */
}
/* 提示语的颜色设置 */
.error{
color: #ff0000;
}
#zhuce{
/* background: #f9f9f9; */
background: rgba(255,255,255,0.4);
/* opacity: 0.9; */
position: relative;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
border: 5px solid #989898;
border-radius: 50px;
width: 500px;
box-shadow: 15px 20px 15px #5b5b5b;
display: block;
/* text-align: center; */
}
.sub{
margin-left: 100px;
margin-bottom: 20px;
font-size: 25px;
width: 250px;
height: 40px;
background-color: #06bf9a;
border: none;
/* border: 5px #5cff92 outset; */
border-radius: 15px;
/* 手势 */
cursor: pointer;
}
#check{
margin-top: 10px;
margin-bottom: 10px;
margin-left: 60px;
}
a{
color: #FF0000;
text-decoration: none;
}
/* 验证码 */
#yzm{
width: 370px;
}
#canvas{
float: right;
border-radius: 5px;
display: inline-block;
cursor: pointer;
}
#yan{
color: #FF0000;
margin-left: 90px;
font-size: 18px;
}
JavaScript
实现表单的验证和报错信息的提示
$(function(){
// Validate 插件为表单提供验证功能
$("#zhuce").validate({
rules:{
// 绑定的是 name
username:{
required: true,
},
password:{
required: true,
rangelength:[8,20],
},
second_pwd:{
required: true,
rangelength:[8,20],
equalTo:"#pwd",
},
email:{
required: true,
email:true,
},
phone:{
required: true,
minlength:11,
}
},
messages:{
username:'请输入用户名',
password:{
required:'密码不能为空',
rangelength:"密码长度在8~20位",
},
second_pwd:{
required:'密码不能为空',
rangelength:"密码长度在8~20位",
equalTo:'两次密码不同',
},
email:{
required:'请输入电子邮箱',
email:'请输入正确的邮箱格式',
},
phone:{
required:"手机号码不能为空",
minlength:"手机号应为11位",
},
}
});
// 验证码 jquery代码
code_draw();
// 点击后刷新验证码
$("#canvas").on('click', function() {
code_draw();
})
$(".sub").on('click', function() {
// 将输入的内容转为大写，可通过这步进行大小写验证
let val = $("#input-val").val().toLowerCase();
// 获取生成验证码值
var num = $('#canvas').attr('data-code');
if (val == '') {
// alert('请输入验证码！');
// $("<br>"+"<label >验证码为空</label>").appendTo("#yan");
$("#yan").text("验证码不能为空");
} else if (val == num) {
// alert('提交成功！');
$("#yan").text("验证码输入正确");
$("#input-val").val('');
draw(show_num);
} else {
// alert('验证码错误！请重新输入！');
$("#yan").text("验证码错误！请重新输入！");
$("#input-val").val('');
draw(show_num);
}
// console.log(1);
});
});
$.validator.setDefaults({
submitHandler: function() {
alert("表单提交成功!!!!");
}
});
以上便是本篇博客文章的所有内容
如果想要了解更多关于Validate的使用
可以前往菜鸟教程或者是Validate的官网进行学习
如果该文章对你的学习有所帮助和启发
还请点赞支持一下
谢谢~
1232
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
