<!Doctype html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>验证码 </title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			a{
				text-decoration: none;
			}
			.main_bar{
				width:100%;
				height: 350px;
				margin-top:200px;
			}
			.login_form{
				width:30%;
				height:80%;
				margin:0 auto;
				/*border:2px solid #16A085;*/
				border-radius: 15px;
				padding:10px;
				background: #ECF0F1;
			}
			.name,.pwd,.sbm_btn{
				display:block;
				width:70%;
				margin:0 auto;
				height:35px;
				font-size:16px;
				border-color:transparent;
				border-radius: 5px;
				border:0;
				padding-left:8px;

			}
			.yzm{
				height: 35px;
				margin:0 auto;
				width: 72%;
				line-height: 35px;
				position: relative;
				margin-bottom: 10px;
			}
			.code{
				width:50%;
				height: 35px;
				border:0;
				border-color: transparent;
				font-size:16px;
				border-radius: 5px;
				padding-left: 8px;
			}
			.code_pic{
				display: block;
				width:40%;
				height:35px;
				background-color: #34495e;
				color:#FFF;
				position: absolute;
				top: 0px;
				left:60%;
				border-radius: 5px;
				text-align: center;
			}
			.name{
				margin-top:20px;
			}
			.sbm_btn{
				text-align: center;
				background-color: #1abc9c;
				color:#fff;
				line-height: 35px;
			}
			.re_pwd {
			    width: 25%;
			    margin: 10px auto 10px;
			}
			.re_pwd a{
				text-decoration: none;
				font-size:14px;
				color: #ccc;
			}
			.re_pwd a:hover{
				cursor: pointer;
				color:#16A085;
			}
			.errorTips{
				width:70%;
				color:red;
				font-size: 14px;
				margin:0 auto;
				height: 20px;
				line-height:20px;
			}
		</style>
	</head>

	<body onload="changeImg()">
		<div class="main_bar">
			<div id="login_form" class="login_form">
				<div class="title"></div>
				<form action="login.html">
					<div id="form_widgt">
						<input type="text" name="name" class="name" placeholder="请输入账号""><br>
						<input type="password" name="pwd" class="pwd"  placeholder="请输入密码"><br>
						<p class="yzm"><input type="text" name="code" id="codeInput" class="code" placeholder="验证码">
						<span id="code" class="code_pic" title="看不清，换一张"></span></p>
						<p class="errorTips" id="errorTips"></p>
						<a href="javascript:;" name="sbm" class="sbm_btn" onclick="return check()">登录</a>

					</div>
				</form>
				<div class="re_pwd"><a href="">忘记密码了</a></div>
			</div>
		</div>
		<script type="text/javascript">
			// 声明一个变量用于存储生成的验证码
			document.getElementById('code').onclick = changeImg;
			function changeImg(){
				// 验证码组成库
				var arrays=new Array(
	                '1','2','3','4','5','6','7','8','9','0',
	                'a','b','c','d','e','f','g','h','i','j',
	                'k','l','m','n','o','p','q','r','s','t',
	                'u','v','w','x','y','z',
	                'A','B','C','D','E','F','G','H','I','J',
	                'K','L','M','N','O','P','Q','R','S','T',
	                'U','V','W','X','Y','Z'
            	);
				// 重新初始化验证码
				code ='';
				// 随机从数组中获取四个元素组成验证码
				for(var i = 0; i<4; i++){
					// 随机获取一个数组的下标
					var r = parseInt(Math.random()*arrays.length);
					code += arrays[r];
				}
				// 验证码写入span区域
				document.getElementById('code').innerHTML = code;

			}

			// 验证验证码
			function check(){
				var error;
				// 获取用户输入的验证码
				var codeInput = document.getElementById('codeInput').value;
				if(codeInput.toLowerCase() == code.toLowerCase()){
					console.log('123');
					return true;
				}else{
					error = '验证码错误，重新输入';
					document.getElementById('errorTips').innerHTML = error;
					return false;
				}
			}
		</script>
	</body>
</html>

来自：http://www.qdfuns.com/notes/36006/cf15d94839a45798f77a58626f0c2059.html

js生成验证码并验证的登录页面的更多相关文章

  1. js生成验证码并验证

    前台代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.as ...

  2. js生成验证码并且验证

    <html> <head> <title>验证码</title> <style type="text/css"> #co ...

  3. JAVA WEB项目中生成验证码及验证实例（附源码及目录结构）

    [我是一个初学者,自己总结和网上搜索资料,代码是自己敲了一遍,亲测有效,现将所有的目录结构和代码贴出来分享给像我一样的初学者] 作用 验证码为全自动区分计算机和人类的图灵测试的缩写,是一种区分用户是计 ...

  4. 纯js生成验证码

    实现代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"& ...

  5. H5+JS生成验证码

    效果图如下: <canvas id="canvas1" style="margin-left: 200px;"></canvas>< ...

  6. node.js生成验证码及图片

    示例代码: var svgCaptcha = require('svg-captcha'); var fs = require('fs'); var codeConfig = { size: 5,// ...

  7. js生成验证码并检验

    <html> <head> <title>验证码</title> <style type="text/css"> #co ...

  8. js生成验证码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. js生成验证码并且判断

       <style type="text/css">        .code        {            font-family: Arial;      ...

随机推荐

  1. Python: 自定义类对象序列化为Json串

    之前已经实现了Python: Json串反序列化为自定义类对象,这次来实现了Json的序列化. 测试代码和结果如下: import Json.JsonTool class Score: math = ...

  2. java实现上传图片

    1.将图片上传到tomcat下 2.将相对路径存放到数据库中 @RequestMapping(params="upLoadPicture") @ResponseBody publi ...

  3. 通过案例快速学会Picasso图片缓存库

    picasso是Square公司开源的一个Android图形缓存库,官网地址http://square.github.io/picasso/,可以实现图片下载和缓存功能.        下载地址:ht ...

  4. ios的notification机制是同步的还是异步的

    与javascript中的事件机制不同.ios里的事件广播机制是同步的,默认情况下.广播一个通知,会堵塞后面的代码: -(void) clicked { NSNotificationCenter *c ...

  5. Ubuntu下用glade和GTK+开发C语言界面程序(一)

    前言:对于大学中计算机系的每年暑假的课设有太多想说的,能从中学到非常多东西,当然不排除打酱油的,这些能够掠过哦,凡事都打酱油.人生也是打酱油的吧. 2333. 对于大三曾经的课设一般的要求都是用C写的 ...

  6. 查看spark是否有僵尸进程，有的话，先杀掉。可以使用下面命令

    查看spark是否有僵尸进程,有的话,先杀掉.可以使用下面命令yarn application -listyarn application -kill <jobid>

  7. es6 --- class 类的继承使用

    传统的javascript中只有对象,没有类的概念.它是基于原型的面向对象语言.原型对象特点就是将自身的属性共享给新对象.这样的写法相对于其它传统面向对象语言来讲,很有一种独树一帜的感脚!非常容易让人 ...

  8. 1.CMD命令

    CMD命令:开始->运行->键入cmd或command(在命令行里可以看到系统版本.文件系统版本)1. appwiz.cpl:程序和功能 2. calc:启动计算器 3. certmgr. ...

  9. <Sicily>Pair

    一.题目描述 The N cities of Estiah are connected by N-1 roads. The roads are built in a way that it's alw ...

  10. 洛谷 P2542 [AHOI2005]航线规划 树链剖分_线段树_时光倒流_离线

    Code: #include <map> #include <cstdio> #include <algorithm> #include <cstring&g ...