通过jQuery Validate插件的基本使用，完成用户表单注册验证的设计与实现

jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。

jQuery Validate 官网

表单验证插件：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>
		<!-- 空格占位符 一个中文空格+四分之一空格 -->
		&#8194;&#8197;
		<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>&#8194;&#8197;
		<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的官网进行学习
如果该文章对你的学习有所帮助和启发
还请点赞支持一下
谢谢~

# jquery # javascript # 前端 # html5
Logo
CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐

嵌入式作业（七）：基于Ardunio的STM32串口通信

嵌入式作业（七）0作业要求1Ardunio 完成STM32的串口通信（1）安装Ardunio IDE（2）stm32串口通信2关于 stduino IDE0作业要求安装 Ardunio IDE 和相关软件支持库，在Ardunio 完成STM32板子的串口通信程序：（1）持续向串口输出“Hello world！”；（2）当接收到“stop!”时，停止输出。网上有一个国人版的MCU集成开发平台， st

avatar CSDN学习社区

JDBC详解

JDBC文章目录JDBC什么是JDBC?JDBC驱动程序:Java使用JDBC访问数据库的步骤:设置classpath:Oracle连接字符串的书写格式:简单的例子:常用数据库的驱动程序及JDBC URL:Oracle数据库:SQL Server数据库MySQL数据库Access数据库PreparedStatement接口:JNDI-数据源（Data Source）与连接池（Connection

avatar CSDN学习社区

“模式识别与机器学习”学习笔记no2.再谈感知机

接**上篇：上篇主要进行了PLA，Pocket算法的理论过程分析和在给定数据集上利用pocket算法对数据集进行分类学习，得到错分数量最少的分类面。上篇中pocket算法的过程已经进行了编程和测试，框架已经建立了起来，这一篇主要上篇中没有提到或涉及不深的几个问题。1.数据集的构造。上篇是直接使用了题目给的向量，这次来根据正态分布来产生数据集。np.random.normal函数可以根据均值和方差生

avatar CSDN学习社区