H5+css3+js搭建带验证码的登录页面

本文实例为大家分享了H5+css3+js搭建带验证码的登录页面,供大家参考,具体内容如下

login.html

<!DOCTYPE HTML>
<html>
 <head>
 <title>EasyBuy后台管理系统</title>
 <meta charset="utf-8">
 <style>
 .main_bar{
 width:1350px;
 height:350px;
 background-color:#6495ED;
 margin-top:10%;
 }
 #login_form{
 width:40%;
 height:100%;
 background-color:#112435;
 margin:0 auto;
 }
 .title{
 width:100%;
 height:55px;
 color:#ffffff;
 border-bottom:1px solid #ffffff;
 font-size:20pt;
 font-family:"微软雅黑";
 line-height:55px;
 text-align:center;
 }
 #form_widget{
 width:100%;
 height:295px;
 background-color:#808080;
 }
 .txt{
 display:block;/*设置为独立块(换行)*/
 width:70%;
 margin:0 auto;
 height:35px;
 font-size:15pt;
 border-radius:5px;/*设置圆角样式*/
 border:0;
 padding-left:8px;
 }
 #vcode{
 height:35px;
 width:40%;
 font-size:15pt;
 margin-left:15%;
 border-radius:5px;
 border:0;
 padding-left:8px;
 }
 #code{
 color:#ffffff;/*字体颜色白色*/
 background-color:#000000;
 font-size:20pt;
 font-family:"华康娃娃体W5";
 padding:5px 35px 10px 35px;
 margin-left:5%;
 cursor:pointer;
 }
 #search_pass_link{
 width:70%;
 text-align:right;
 margin:0 auto;
 padding:5px;
 }
 /*层级选择器*/
 #search_pass_link a{
 color:#000000;
 text-decoration:none;
 }
 /*伪类*/
 #search_pass_link a:hover{
 color:#ff0000;
 text-decoration:underline;
 }
 .btn{
 width:70%;
 margin-left:15%;
 height:40px;
 border:0;
 font-size:14pt;
 font-family;"微软雅黑";
 background-color:#FC5628;
 color:#ffffff;
 cursor:pointer;/*设置指针鼠标的样式*/
 border-radius:20px;/*设置圆角样式*/
 border:0;
 }
 #copyright{
 width:100%;
 text-align:center;
 padding-top:20px;
 font-family:"微软雅黑";
 color:#e0e0e0;
 }
 </style>
 </head>
 <body leftmargin="0" οnlοad="changeImg()">
 <div class="main_bar">
 <div id="login_form">
 <div class="title">
  EasyBuy系统登录
 </div>
 <form action="main.html" οnsubmit="return check()">
 <div id="form_widget">
  <br>
  <input type="text" placeholder="请输入账号" id="box_name" class="txt" value="用户名" οnfοcus="this.value=''" οnblur="if(this.value=='')this.value='用户名'"/>
  <br>
  <input type="password" placeholder="请输入密码" id="box_pass" class="txt" value="password" οnfοcus="this.value=''" οnblur="if(this.value=='')this.value='password'"/>
  <br>
  <input type="text" id="vcode" placeholder="验证码" value="验证码" οnfοcus="this.value=''" οnblur="if(this.value=='')this.value='验证码'"/><span id="code" title="看不清,换一张"></span>
  <div id="search_pass_link">
  <a href="#" rel="external nofollow" >忘记密码?</a>
  </div>
  <input type="submit" value="登录" class="btn" οnmοuseοver="this.style.backgroundColor='#FF8D00'" οnmοuseοut="this.style.backgroundColor='#FC5628'">
  <br>
  <div id="copyright">
  Power By WXH &copy;CopyRight 2016
  </div>
 </div>
 </form>
 </div>
 </div>
 </body>
 <script type="text/javascript">
 var code;//声明一个变量用于存储生成的验证码
 document.getElementById("code").οnclick=changeImg;
 function changeImg(){
 //alert("换图片");
 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='';//重新初始化验证码
 //alert(arrays.length);
 //随机从数组中获取四个元素组成验证码
 for(var i=0;i<4;i++){
 //随机获取一个数组的下标
 var r=parseInt(Math.random()*arrays.length);
 code+=arrays[r];
 //alert(arrays[r]);
 }
 //alert(code);
 document.getElementById('code').innerHTML=code;//将验证码写入指定区域
 } 

 //效验验证码(表单被提交时触发)
 function check(){
 //获取用户输入的验证码
 var input_code=document.getElementById('vcode').value;
 //alert(input_code+"----"+code);
 if(input_code.toLowerCase()==code.toLowerCase())
 {
 //验证码正确(表单提交)
 return true;
 }
 alert("请输入正确的验证码!");
 //验证码不正确,表单不允许提交
 return false;
 }
 </script>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2020-10-09

js实现登录注册框手机号和验证码校验(前端部分)

开发的很多场景中都会用到手机号的校验和验证码的校验,具体实现如下 <div> <input type="text" name="phonenumber" placeholder="请输入您的手机号码" /> <input type="text" name="verify" placeholder="请输入验证码" /><input type=&q

JSP实现登录功能之添加验证码

jsp登陆验证,网页登陆验证带验证码校验,登录功能之添加验证码 part_1:专门用于生成一个验证码图片的类:VerificationCode.Java package cn.mike.javase.test; import java.awt.Color; import java.awt.Font; import java.awt.Graphics2D; import java.awt.image.BufferedImage; import java.io.File; import java.i

JavaScript登录验证码的实现

废话不多说,实现js登录验证码的功能需要下面两步,具体实现过程如下所示: 1.js var code="" ; //在全局 定义验证码 function createCode(){ code = ""; var codeLength = 6;//验证码的长度 var checkCode = document.getElementById("checkCode"); checkCode.value = ""; var selec

JSP + Servlet实现生成登录验证码示例

随机生成四位数验证码,包括汉字,数字,英文大小写. 1.Servlet类 package servlet; import java.awt.BasicStroke; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.geom.AffineTransform; import java.awt.geom.Line2D; i

js实现登录验证码

Js代码: /** * 验证码 */ function yzm(){ var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, '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',

Java中SSM+Shiro系统登录验证码的实现方法

 先给大家展示下效果图: 1.验证码生成类: import java.util.Random; import java.awt.image.BufferedImage; import java.awt.Graphics; import java.awt.Font; import java.awt.Color; /** * 验证码生成器类,可生成数字.大写.小写字母及三者混合类型的验证码. 支持自定义验证码字符数量: 支持自定义验证码图片的大小: 支持自定义需排除的特殊字符: * 支持自定义干扰线

Angular.js实现获取验证码倒计时60秒按钮的简单方法

前言 本文主要介绍了关于Angular.js实现获取验证码倒计时60秒按钮的相关内容,关于这个功能相信不用多介绍,大家都不陌生,所以下面话不多说了,来一起看看实现的方法吧. 一.controller中代码 angular.module('controllers') .controller('LoginCtrl', function ($scope, $location,$ionicLoading,$rootScope,$interval,$timeout) { $scope.timer = fa

纯JS实现图片验证码功能并兼容IE6-8(推荐)

最近要搞一个图片验证码功能,但是又不想自己写后台代码.于是自己准备搞一个纯前端的验证码功能,于是网上搜索了一下,找到一个插件gVerify.js,简单好用,实现完美.不过后面接到说要兼容IE8,想想也是醉了.万恶的IE,不过也还好,也没有想着在去找插件,准备自己搞一搞,顺便拿来学习一下并加强自己的知识.下面看我是如何搞定它的,虽然花了一点时间,不过也值得. 使用方法 使用特别简单,定义一个DIV一验证码输入框,引入下载的js插件,创建一个GVerify对象,参数可以自定义一些或者传入DIV的ID

PHP编写登录验证码功能 附调用方法

本文实例为大家分享了一个PHP写的登录验证码功能,供大家参考,具体内容如下 ShowKey.php <?php session_start(); //设置COOKIE或Session function esetcookie($name,$str,$life=0){ //本函数将字符串 str 全部变小写字符串使验证码输入不区分大小写----在提交表单进行session比较同样需要次函数转化 $_SESSION[$name]=strtolower($str); } //获取随机字符 此函数区分字符

PHP登录验证码的实现与使用方法

本文实例讲述了PHP登录验证码的实现与使用方法.分享给大家供大家参考,具体如下: 1. 新建code.php验证码生成文件 在此之前必须打开php的GD库,修改php.ini文件的配置,取消extension=php_gd2.dll前面的分号.代码如下: <?php session_start(); //生成验证码图片 Header("Content-type: image/PNG"); $im = imagecreate(44,18); $back = ImageColorAl

C#可用于登录验证码的四位随机数生成方法

本文实例讲述了C#可用于登录验证码的四位随机数生成方法.分享给大家供大家参考.具体实现方法如下: 这里提供了两种方法,调用其一即可: 复制代码 代码如下: using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; namespace SJ_random {     class Class_main     {        

JS设置手机验证码60s等待实现代码

 html: <div class="input"> <input class="tel input_all" type="text" name="tel" placeholder="手机号"> </div> <div class="input huoqu"> <input class="yzm input_all"

js判断登录与否并确定跳转页面的方法

本文实例讲述了js判断登录与否并确定跳转页面的方法.分享给大家供大家参考.具体如下: 使用session存储,确定用户是否登录,从而确定页面跳转至哪个页面. 判断本地有无customerID: function jumpTo(p, url) { var customerId=sessionStorage.customerId; if (customerId == undefined) { p.attr("href", "page/Login/login.html")