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', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
　　var code="";
　　for(var i = 0;i < 4;i++)
　　{
　　　　var charNum = Math.floor(Math.random() * 52);
　　　　code += codeChars[charNum];
　　}
　　document.getElementById("yzphoto").value=code;
　　document.getElementById("yzm").value=code;
}

HTML代码：

<div style="height: 98%;">
<input style="width:50px;color:blue;font-style: italic;border: none;height: 98%;" readonly="readonly" type="text" id="yzphoto" value=""/>
<input type="hidden" id="yzm" value="">
</div>
<div style="padding-top: 9px;"><a href="#" onclick="yzm()">看不清换一张</a></div>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • JavaScript登录验证基础教程

    JavaScript登录验证基础教程

    本文实例为大家分享了js登录验证的具体代码,供大家参考,具体内容如下 1.<script></script>的三种用法: 1.放在<body>中 2.放在<head>中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>欢迎你,请先登陆!</title> &l

  • javascript和jquery分别实现用户登录验证

    javascript和jquery分别实现用户登录验证

    在上一篇文章http://www.jb51.net/article/83504.htm中,用javascript实现了用户验证,但并没有对密码进行验证,这次追加了这个功能,并分别用javascript和jquery实现. 一.用jquery的ajax实现的关键代码 实现如下 /*jquery实现 $(document).ready(function(){ $("#account").blur(function(event) { $.ajax({ type:"GET"

  • JavaScript登录验证码的实现

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

  • 用JS实现简单的登录验证功能

    用JS实现简单的登录验证功能

    实现过程示意图 代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登录</title> <style> .ok { color: green; border: 1px solid green; } .error { color: red; border: 1px solid red; } </style> <s

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

    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

  • node.js+captchapng+jsonwebtoken实现登录验证示例

    node.js+captchapng+jsonwebtoken实现登录验证示例

    提到登录验证,大家肯定能想到的就是12306的验证码了吧.12306为了防止刷票,可以说是煞费苦心,验证码也越来越难识别,最终即使是人也可能识别不了了. 今天,小编就给大家说一下node如何实现图片验证码,以及使用token验证登录.学习本文你将学到: 1.使用captchapng生成图片验证码 2.使用jsonwebtoken实现登录验证 一.图片验证码生成(最后有全部代码) 首先,我们理一下流程,第一步服务器要随机生成一组四位数. 第二步,将这四位数用canvas绘图生成图片. 第三步,我们

  • 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',

  • 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:#

  • node.js 实现手机号验证码登录功能

    node.js 实现手机号验证码登录功能

    1.注册容联云通信账号(免费) 1.官网进行注册:https://www.yuntongxun.com/ 第二步 拿到自己的ACCOUNT_SID.AUTH_TOKEN.Rest_URL.AppID 第三步注册自己的测试手机号 第四步 下载包 1.npm i md5 --save2.npm i moment --save3.npm i js-base64 --save4.npm i request --save 一次下载 :npm i md5 moment js-base64 request -

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

    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; /** * 验证码生成器类,可生成数字.大写.小写字母及三者混合类型的验证码. 支持自定义验证码字符数量: 支持自定义验证码图片的大小: 支持自定义需排除的特殊字符: * 支持自定义干扰线

  • js实现登录时记住密码的方法分析

    本文实例讲述了js实现登录时记住密码的方法.分享给大家供大家参考,具体如下: 常见的很多网站登录,都有记住密码功能,下面是用js实现的记住密码功能(代码用的源生js,不用引入任何插件,大家如果引入了jQuery,可以进行修改,优化) js部分 window.onload = function(){ var oForm = document.getElementById('myForm'); var oUser = document.getElementById('username'); var

  • Idea中maven项目实现登录验证码功能

    Idea中maven项目实现登录验证码功能

    1.配置maven环境变量,将maven安装的bin⽬录添加到path路径中(此电脑->属性->高级系统设置->环境变量->) 路径为maven安装目录 2.找到ValidateCode.jar包的本地路径 3.制作Jar包 原jar包地址:链接: https://pan.baidu.com/s/1QpqiZaF_ZYhW1Qn3ifn2eg 提取码: uc47 无法直接使用,需要命令行制作,命令如下: mvn install:install-file -DgroupId=it.s

  • 基于Python实现原生的登录验证码详情

    基于Python实现原生的登录验证码详情

    目录 1.概述 2.验证码实现的演进过程 2.1 路由及页面 2.2 视图函数中验证码的推导 2.2.1 图片发送到前端 2.2.2 引入动态图片 2.2.3 内存管理模块图片 2.2.4 完整图片验证码 2.3 登录验证中使用验证码 2.4 前端页面点击自动刷新 3.效果展示 4.小结 1.概述 在前面的文章中,我有分享了vue+drf+第三方滑动验证码接入的实现(文中也留了分享图片验证码功能的实现),即本文将要分享的是基于 python 实现原生的登录验证码 通常的验证码,人眼看上去更像是一

  • Spring Security配置多个数据源并添加登录验证码的实例代码

    Spring Security配置多个数据源并添加登录验证码的实例代码

    目录 1.配置多个数据源 2. 添加登录验证码 1.配置多个数据源 多个数据源是指在同一个系统中,用户数据来自不同的表,在认证时,如果第一张表没有查找到用户,那就去第二张表中査询,依次类推. 看了前面的分析,要实现这个需求就很容易了,认证要经过AuthenticationProvider,每一 个 AuthenticationProvider 中都配置了一个 UserDetailsService,而不同的 UserDetailsService 则可以代表不同的数据源,所以我们只需要手动配置多个A

  • Spring Boot实现登录验证码功能的案例详解

    Spring Boot实现登录验证码功能的案例详解

    目录 验证码的作用 案例要求 前端页面准备 准备login.html页面 随机验证码工具类 后端控制器 验证码的作用 验证码的作用:可以有效防止其他人对某一个特定的注册用户用特定的程序暴力破解方式进行不断的登录尝试我们其实很经常看到,登录一些网站其实是需要验证码的,比如牛客,QQ等.使用验证码是现在很多网站通行的一种方式,这个问题是由计算机生成并且评判的,但是必须只有人类才能解答,因为计算机无法解答验证码的问题,所以回答出问题的用户就可以被认为是人类.验证码一般用来防止批量注册. 案例要求 验证

随机推荐