验证码验证工具

最新推荐文章于 2024-05-13 09:51:52 发布

飞鸿酱

最新推荐文章于 2024-05-13 09:51:52 发布

阅读量913

点赞数

分类专栏： front-end-jqurey

本文链接：https://blog.csdn.net/weixin_38465623/article/details/80949386

版权

front-end-jqurey 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>DengLu</title>
		<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
		<script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

	</head>

	<body class="gray-bg">

		<header class="clearfix">
			<!-- 头部 -->

			<nav class="navbar navbar-default" role="navigation">
				<div class="container-fluid">
					<div class="navbar-header">

						<a class="navbar-brand" href="主页.html">温州市波普大数据研究院</a>
						<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
      <span class="sr-only">切换导航</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
					</div>
					<div class="collapse navbar-collapse" id="example-navbar-collapse">
						<ul class="nav navbar-nav navbar-right">

							<li>
								<a href="私信界面.html">私信</a>
							</li>
							<li class="divider"></li>
							<li>
								<a href="个人中心.html">个人中心</a>
							</li>

						</ul>
					</div>
				</div>
			</nav>
		</header>

		<main class="content">
			<div id="biaodan">
				<form action="" method="post" name="form1" target="_blank" id="form1" onSubmit="return check_login()">

					<br>
					<br><br><br>
					<h1>登录</h1>

					<!--<input type="text" name="username" class="form-control" οnblur="CheckInput(this,document.getElementById('username'))" placeholder="手机/邮箱/用户名" />-->

					<!--<span id="username"></span>-->
					<!--账号-->
					<input id="username" type="text" name="username" class="form-control" placeholder="手机/邮箱/用户名" οnfοcus="showTips('username','手机/邮箱/用户名必填！')" οnblur="check('username','手机/邮箱/用户名不能为空！')" />
					<br>
					<span class="msg" id="usernamespan" style="margin-left: -110px;"></span>
					<br>
					<!--<input name="password" type="password" class="form-control" οnblur="CheckInput(this,document.getElementById('password'))" placeholder="密码" />
					<br>
					<span id="password"></span>-->

					<!--密码-->
					<input id="password" type="password" name="password" class="form-control" placeholder="密码" οnfοcus="showTips('password','密码必填！')" οnblur="check('password','密码不能为空！')" />
					<br>
					<span class="msg" id="passwordspan" style="margin-left: -180px;"></span>
					<br>

					<!--验证码验证-->
					<div id="yan">
						<p5 style="margin-left: -8px;">验证码</p5>
						<input type="text" id="yanzhengma" class="form-control photokey" value="请输入验证码" onBlur="textBlur(this)" onFocus=" textFocus(this) " />
						<span class="add phoKey"></span>
						<span class="error error7"></span>
					</div>

					<br>

					<input id="btnOk" class="btn btn-success" type="submit" value="确定" />
					<br> <br>

					<a href="注册.html"><input id="lianjie" type="button" value="注册" class="btn btn-link"> </a>|
					<a href="输入账号.html"><input id="lianjie" type="button" value="忘记密码" class="btn btn-link" /></a>

				</form>
			</div>
		</main>

	</body>

</html>
<style type="text/css">
	/*输入验证码*/
	
	#yanzhengma {
		text-indent: 4px;
		width: 160px;
		font-size: 14px;
	}
	
	.add {
		width: 200px;
		height: 34px;
		_display: inline;
		cursor: pointer;
		margin-left: 10px;
	}
	
	.input-code {
		font-family: Arial;
		font-style: italic;
		cursor: pointer;
		text-indent: 0;
	}
	/*蓝框验证码*/
	
	.phoKey {
		width: 200px;
		background: #1572DD;
		text-align: center;
		font-size: 18px;
		color: #fff;
		letter-spacing: 3px;
		padding: 5px;
		border-radius: 3px;
	}
	
	.error {
		margin-left: -87px;
		display: block;
		color: red;
		margin-bottom: -10px;
	}
	
	input {
		background-color: #fff;
		outline: none;
	}
	
	.errorC {
		border: 1px solid red;
		font-size: 20px;
	}
	/*验证码结束*/
	/*背景色*/
	
	.gray-bg,
	.btn-link {
		background-color: #f3f3f4;
	}
	/*左右固定*/
	
	html,
	body {
		overflow-x: hidden;
	}
	/*头部样式*/
	
	header .navbar-default {
		background-color: #1572DD;
	}
	
	header .navbar-brand {
		color: #fff !important;
	}
	
	.navbar-default .navbar-toggle .icon-bar {
		background-color: #fff !important;
	}
	
	.navbar-default .navbar-nav > li > a {
		color: #fff !important;
	}
	
	.navbar-default .navbar-nav > li > a:focus,
	.navbar-default .navbar-nav > li > a:hover {
		color: #eee !important;
	}
	/*中间内容*/
	
	.content {
		text-align: center;
		min-height: calc(100vh - 20px);
		display: flex;
		/*使子项目水平居中*/
		justify-content: center;
		/*使子项目垂直居中*/
		align-items: center;
	}
	/*文本框*/
	
	.form-control {
		display: inline-block;
		width: 296px;
	}
	/*确定*/
	
	#btnOk {
		color: white;
		background-color: #1572DD;
		height: 40px;
		width: 296px;
		border-color: #1572DD;
		border-radius: 3px;
	}
	/*表单背景*/
	
	#biaodan {
		width: 860px;
		height: 600px;
		background-color: white;
	}
	/*注册密码样式*/
	
	#lianjie {
		background-color: white;
	}
</style>

<script language="JavaScript">
	//文本框默认提示文字  
	function textFocus(el) {
		if(el.defaultValue == el.value) {
			el.value = '';
			el.style.color = '#333';
		}
	}

	function textBlur(el) {
		if(el.value == '') {
			el.value = el.defaultValue;
			el.style.color = '#999';
		}
	}

	$(function() {

		/*生成验证码*/
		(function create_code() {
			function shuffle() {
				var arr = ['1', 'r', 'Q', '4', 'S', '6', 'w', 'u', 'D', 'I', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p',
					'q', '2', 's', 't', '8', 'v', '7', 'x', 'y', 'z', 'A', 'B', 'C', '9', 'E', 'F', 'G', 'H', '0', 'J', 'K', 'L', 'M', 'N', 'O', 'P', '3', 'R',
					'5', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
				];
				return arr.sort(function() {
					return(Math.random() - .5);
				});
			};
			shuffle();

			function show_code() {
				var ar1 = '';
				var code = shuffle();
				for(var i = 0; i < 4; i++) {
					ar1 += code[i];
				};
				//var ar=ar1.join('');  
				$(".phoKey").text(ar1);
			};
			show_code();
			$(".phoKey").click(function() {
				show_code();
			});
		})();

		//账户输入框失去焦点  
		(function login_validate() {

			/*验证码输入框失去焦点*/
			$(".photokey").blur(function() {
				var code1 = $('input.photokey').val().toLowerCase();
				var code2 = $(".phoKey").text().toLowerCase();
				if(code1 != code2) {
					$(this).addClass("errorC");
					$(this).next().next().html("验证码输入错误！");
					$(this).next().next().css("display", "block");
				} else {
					$(this).removeClass("errorC");
					$(this).next().next().empty();
					$(this).addClass("checkedN");
				}
			})
		})();
	});
 
	//验证码结束
	//	表单验证,验证通过提交信息
	function check_login() {
		var msg = document.getElementsByClassName("msg");
		if(document.getElementById("username").value == "") {
			document.getElementById("username").focus();
			return false;
		} else if(document.getElementById("password").value == "") {
			document.getElementById("password").focus();
			return false;
		}
		return true;
	}

	function showTips(id, info) {
		document.getElementById(id + "span").innerHTML = "<font color='gray'>" + info + "</font>";
	}

	function check(id, info) {
		//1.获取用户输入的用户名数据
		var uValue = document.getElementById(id).value;
		//2.进行校验
		if(uValue == "") {
			document.getElementById(id + "span").innerHTML = "<font color='red'>" + info + "</font>";
		} else {
			document.getElementById(id + "span").innerHTML = "";
		}
	}
</script>

效果：

项目描述：

使用的时候发现输出验证码的框大小会变，固定不住，调试的时候，把宽高写死了都没什么用处。

飞鸿酱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
验证码验证工具

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; &l
复制链接

扫一扫

专栏目录