<!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学习————字典的增删改查

    增加:dic1['KEY'] = value -->若之前有KEY,则会覆盖.若没有KEY,则新增至尾处dic.setdefault('KEY',value/None) --->若之前有K ...

  2. Java基础学习总结（4）——对象转型

    一.对象转型介绍 对象转型分为两种:一种叫向上转型(父类对象的引用或者叫基类对象的引用指向子类对象,这就是向上转型),另一种叫向下转型.转型的意思是:如把float类型转成int类型,把double类 ...

  3. jquery及相关兼容插件的版本搭配

    1.jquery1.11.0 + jquery.validate.1.9.0.js + jquery.ui.1.10.4.js

  4. Google的10大座右铭

    1. 以用户为中心,其他一切纷至沓来. 创建伊始,Google 即以提供最佳的用户体验为其中心任务.虽然很多公司主张客户利益优先,但难以抗拒各种诱惑,往往会牺牲客户的少量利益来增加股东价值. Goog ...

  5. 【HDU 5145】 NPY and girls（组合+莫队）

    pid=5145">[HDU 5145] NPY and girls(组合+莫队) NPY and girls Time Limit: 8000/4000 MS (Java/Other ...

  6. jQuery -&gt; 怎样【先创建、再改动、后加入】 DOM元素

    怎样一气呵成地.on the fly地操作DOM元素呢? 比如顺序运行[创建]-> [改动]-> [加入]三个动作. 因为jQuery支持链式操作,事实上就是设计模式的builder模式, ...

  7. BEGINNING SHAREPOINT&#174; 2013 DEVELOPMENT 第1章节--SharePoint 2013 介绍 处理开发者需求

    BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第1章节--SharePoint 2013 介绍 处理开发者需求         SharePoint本质上是一个平台.你 ...

  8. MailKit和MimeKit的.NET基础邮件服务

    MailKit和MimeKit的.NET基础邮件服务 邮件服务是一般的系统都会拥有和需要的功能,但是对于.NET项目来说,邮件服务的创建和使用会较为的麻烦..NET对于邮件功能提供了System.Ne ...

  9. WebBrowser获取页面总高度

    case DISPID_DOCUMENTCOMPLETE: { #pragma region 获取页面总高度 HRESULT hr; IDispatch *pdisp; hr = m_pWebBrow ...

  10. Pycharm-连接服务器