<!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. LaTeX 表格

    本系列文章由 @YhL_Leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/50066137 一些LaTeX中表格的使 ...

  2. 低价购买 洛谷1108 codevs4748 dp

    首先,,我相信第一问是可以做出来的,,,做不出来自行面壁思过,,, 第二问,我们可以发现,如果f[i]为1时应该将其g[i]初始化为1,当初就是因为这个wa了一个世纪,之后先考虑不需要判重时的情况,如 ...

  3. [MST] Create Dynamic Types and use Type Composition to Extract Common Functionality

    Since MST offers a runtime type system, it can create and compose types on the fly, making it possib ...

  4. [React] Refactor a Stateful List Component to a Functional Component with React PowerPlug

    In this lesson we'll look at React PowerPlug's <List /> component by refactoring a normal clas ...

  5. 【Android进阶篇】Fragment的两种载入方式

    一.概述 Fragment(碎片,片段)是在Android 3.0后才引入的,基本的目的是为了实如今大屏幕设备上的更加动态更加灵活的UI设计. 这是由于平板电脑的屏幕比手机大得多,所以屏幕上能够放很多 ...

  6. AppCan中标首都机场移动平台项目

    近日.正益无线AppCan依托东方航空.吉祥航空.国家电网.中化集团等大客户项目的丰富成功经验,凭借企业移动信息化建设的良好口碑.强大的移动化实施部署经验和高速响应的技术团队,在与多家国内外移动厂商比 ...

  7. NSTimer解除循环引用

    NSTimer作为一个经常使用的类,却有一个最大的弊病,就是会强引用target.造成调用timer很麻烦.稍有不慎就造成内存泄漏. 下面就是为解决问题做的封装. 直接上代码: #import < ...

  8. Mysql信息数据库:Information_schema

    1. Information_schema information_schema是mysql的信息数据库. 通过该库能够查看mysql以下的数据库,表.权限等信息. 在数据库中会默认生成这个库.inf ...

  9. C#重构经典全面汇总

    C#重构经典全面汇总 1.  封装集合 概念:本文所讲的封装集合就是把集合进行封装,仅仅提供调用端须要的接口. 正文:在非常多时候,我们都不希望把一些不必要的操作暴露给调用端,仅仅须要给它所须要的操作 ...

  10. 一步一步跟我学习lucene（19）---lucene增量更新和NRT(near-real-time)Query近实时查询

    这两天加班,不能兼顾博客的更新.请大家见谅. 有时候我们创建完索引之后,数据源可能有更新的内容.而我们又想像数据库那样能直接体如今查询中.这里就是我们所说的增量索引.对于这种需求我们怎么来实现呢?lu ...