2021-08-24验证码

最新推荐文章于 2021-10-04 15:29:43 发布

Bear child

最新推荐文章于 2021-10-04 15:29:43 发布

阅读量128

点赞数

文章标签： web

本文链接：https://blog.csdn.net/weixin_45318552/article/details/119897188

版权

本文介绍了网页验证码的实现过程，包括定义div，设置div样式，并强调了登录时未通过验证码会导致登录按钮失效的重要细节。

摘要由CSDN通过智能技术生成

验证码

网页验证码的实现

定义一个div

<div class="col-md-offset-4 col-md-4">
<div id="mpanel5" ></div>
</div> </div>

给这个div定义样式

	$('#mpanel5').pointsVerify({
		defaultNum : 4,	//默认的文字数量
		checkNum : 2,	//校对的文字数量
		vSpace : 5,	//间隔
		imgName : ['1.jpg', '2.jpg'],
		imgSize : {
			width: '300px',
			height: '150px',
		},
		barSize : {
			width : '300px',
			height : '40px',
		},
		ready : function() {
		},
		success : function() {
			document.getElementById("login").disabled=false;
			//alert('验证成功，添加你自己的代码！');
			//......后续操作
		},
		error : function() {
			document.getElementById("login").disabled=true;

//		        	alert('验证失败！');
		}
		 
		
	});
    </script>

需要导入验证码所需要的css和js文件

    <script src="js/jquery-3.1.1.min.js"></script>
    <script src="js/verify.min.js"></script>
    <link href="css/verify.css" rel="stylesheet">

需要注意的是我们在登录的时候验证码没有通过登录按钮不能使用

<button type="submit" id="login"  disabled="disabled" class="btn btn-primary block full-width m-b">登录</button>

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compat

最低0.47元/天解锁文章

Bear child

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫