JavaScript登录验证码的实现


Posted in Javascript onOctober 27, 2016

废话不多说,实现js登录验证码的功能需要下面两步,具体实现过程如下所示:

1.js

var code="" ; //在全局 定义验证码
function createCode(){ 
code = "";
var codeLength = 6;//验证码的长度
var checkCode = document.getElementById("checkCode");
checkCode.value = "";
var selectChar = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','J','K','L','M','N','P','Q','R','S','T','U','V','W','X','Y','Z');
for(var i=0;i<codeLength;i++) {
var charIndex = Math.floor(Math.random()*32);
code +=selectChar[charIndex];
}
if(code.length != codeLength){
createCode();
}
document.getElementById("checkCode").innerHTML = code;
}
function validate () {
var inputCode = document.getElementById("checkNum").value.toUpperCase();
if(inputCode.length <=0) {
alert("请输入验证码!");
return false;
}
else if(inputCode != code ){
alert("验证码输入错误!");
createCode();
return false;
}
else {
alert("验证码通过!");
return true;
}
}

2.html

<body onload="createCode();">
<input type="text" value="" id="checkNum" />
<a id="checkCode" onclick="createCode()"></a>
<input type="button" class="btnCheck" id="gotoCheck" value="验证" onclick="validate();" />

以上所述是小编给大家介绍的JavaScript登录验证码的实现,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
特殊字符、常规符号及其代码对照表
Jun 26 Javascript
javascript编程起步(第四课)
Feb 27 Javascript
jQuery学习4 浏览器的事件模型
Feb 07 Javascript
Google Dart编程语法和基本类型学习教程
Nov 27 Javascript
js中文逗号转英文实现
Feb 11 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
Oct 16 Javascript
JS学习之表格的排序简单实例
May 16 Javascript
JavaScript 数据类型详解
Mar 13 Javascript
详解小程序用户登录状态检查与更新实例
May 15 Javascript
世界上最短的数字判断js代码
Sep 09 Javascript
浅谈TypeScript的类型保护机制
Feb 23 Javascript
JavaScript类的继承多种实现方法
May 30 Javascript
微信小程序  自定义创建详细介绍
Oct 27 #Javascript
vue中渐进过渡效果实现
Oct 27 #Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
Oct 27 #Javascript
真正好用的js验证上传文件大小的简单方法
Oct 27 #Javascript
vue的props实现子组件随父组件一起变化
Oct 27 #Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
Oct 27 #Javascript
简单理解vue中Props属性
Oct 27 #Javascript
You might like
PHP安全配置
2006/12/06 PHP
深入HTTP响应状态码速查表的详解
2013/06/07 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
thinkPHP中钩子的两种配置调用方法详解
2016/11/11 PHP
PHP后期静态绑定之self::限制实例分析
2018/12/21 PHP
基于jquery的下拉框改变动态添加和删除表格实现代码
2020/09/12 Javascript
php对mongodb的扩展(小试牛刀)
2012/11/11 Javascript
详解JavaScript函数绑定
2013/08/18 Javascript
控制input输入框中提示信息的显示和隐藏的方法
2014/02/12 Javascript
window.print打印指定div指定网页指定区域的方法
2014/08/04 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
2014/12/16 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
2017/01/22 Javascript
原生js编写2048小游戏
2017/03/17 Javascript
基于jquery实现多选下拉列表
2017/08/02 jQuery
Vue 2.0入门基础知识之内部指令详解
2017/10/15 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
2018/06/14 Javascript
vue在手机中通过本机IP地址访问webApp的方法
2018/08/15 Javascript
windows实现npm和cnpm安装步骤
2019/10/24 Javascript
JS实现简单日历特效
2020/01/03 Javascript
微信小程序实现点赞业务
2021/02/10 Javascript
浅谈python配置与使用OpenCV踩的一些坑
2018/04/02 Python
详解Django rest_framework实现RESTful API
2018/05/24 Python
python用WxPython库实现无边框窗体和透明窗体实现方法详解
2020/02/21 Python
python中实现词云图的示例
2020/12/19 Python
英国领先的男装设计师服装独立零售商:Repertoire Fashion
2020/10/19 全球购物
10条PHP编程习惯
2014/05/26 面试题
联谊活动策划书
2014/01/26 职场文书
数学系个人求职信范文
2014/01/30 职场文书
2014年元旦促销活动方案
2014/02/22 职场文书
大学老师推荐信
2014/02/25 职场文书
大学生活动总结怎么写
2014/04/29 职场文书
处级干部反四风个人对照检查材料思想汇报
2014/09/27 职场文书
中班下学期幼儿评语
2014/12/30 职场文书
如何让vue长列表快速加载
2021/03/29 Vue.js
Oracle 数据仓库ETL技术之多表插入语句的示例详解
2021/04/12 Oracle
5个pandas调用函数的方法让数据处理更加灵活自如
2022/04/24 Python