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 相关文章推荐
客户端脚本中常常出现的一些问题和调试技巧
Jan 09 Javascript
用js实现的检测浏览器和系统的函数
Apr 09 Javascript
用js脚本控制asp.net下treeview的NodeCheck的实现代码
Mar 02 Javascript
js控制淡入淡出示例代码
Nov 12 Javascript
javascript发送短信验证码实现代码
Nov 12 Javascript
js判断空对象的实例(超简单)
Jul 26 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
Dec 08 Javascript
Vue-resource实现ajax请求和跨域请求示例
Feb 23 Javascript
jstree单选功能的实现方法
Jun 07 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
Aug 02 Javascript
vue如何实现动态加载脚本
Feb 05 Javascript
ES2020系列之空值合并运算符 '??'
Jul 22 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获取类中常量,属性,及方法列表的方法
2009/04/09 PHP
PHP正则表达式入门教程(推荐)
2016/05/18 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
PHP自定义错误处理的方法分析
2018/12/19 PHP
Laravel如何创建服务器提供者实例代码
2019/04/15 PHP
Code:findPosX 和 findPosY
2006/12/20 Javascript
2007/12/23更新创意无限,简单实用(javascript log)
2007/12/24 Javascript
jquer之ajaxQueue简单实现代码
2011/09/15 Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
2012/02/02 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
2013/11/27 Javascript
Javascript写入txt和读取txt文件示例
2014/02/12 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
2014/08/12 Javascript
JavaScript绑定事件监听函数的通用方法
2016/05/14 Javascript
完美实现js选项卡切换效果(一)
2017/03/08 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
2017/04/12 Javascript
使用Node.js搭建静态资源服务详细教程
2017/08/02 Javascript
vue better-scroll插件使用详解
2018/01/25 Javascript
在vue中使用Autoprefixed的方法
2018/07/27 Javascript
详解在React中跨组件分发状态的三种方法
2018/08/09 Javascript
vue项目实现多语言切换的思路
2020/09/17 Javascript
Python 使用os.remove删除文件夹时报错的解决方法
2017/01/13 Python
python生成词云的实现方法(推荐)
2017/06/13 Python
django主动抛出403异常的方法详解
2019/01/04 Python
Keras设定GPU使用内存大小方式(Tensorflow backend)
2020/05/22 Python
HTML5 textarea高度自适应的两种方案
2020/04/08 HTML / CSS
ASOS亚洲:ASOS Asia
2018/03/04 全球购物
澳大利亚购买最佳炊具品牌网站:Cookware Brands
2019/02/16 全球购物
澳大利亚在线消费电子产品商店:TobyDeals
2020/01/05 全球购物
大门门卫岗位职责
2013/11/30 职场文书
模具专业毕业推荐信
2014/03/08 职场文书
房地产活动策划方案
2014/05/14 职场文书
应用外语系自荐信
2014/06/26 职场文书
学习与创新自我评价
2015/03/09 职场文书
实习报告范文
2019/07/30 职场文书
Python3 如何开启自带http服务
2021/05/18 Python
Android 界面一键变灰 深色主题工具类
2022/04/28 Java/Android