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 相关文章推荐
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
May 03 Javascript
js查错流程归纳
May 04 Javascript
js截取小数点后几位的写法
Nov 14 Javascript
学习JavaScript设计模式之代理模式
Jan 12 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
Aug 30 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
Jan 21 Javascript
JavaScript 实现 Tab 点击切换实例代码
Mar 25 Javascript
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
jQuery EasyUI开发技巧总结
Sep 26 jQuery
微信小程序实现自定义加载图标功能
Jul 19 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
Jul 19 Javascript
在Layui中实现开关按钮的效果实例
Sep 29 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
解析在zend Farmework下如何创立一个FORM表单
2013/06/28 PHP
php下载文件超时时间的设置方法
2016/10/06 PHP
分享5个非常有用的Laravel Blade指令
2018/05/30 PHP
通过js脚本复制网页上的一个表格的不错实现方法
2006/12/29 Javascript
Javascript 判断是否存在函数的方法
2013/01/03 Javascript
基于KMP算法JavaScript的实现方法分析
2013/05/03 Javascript
基于JavaScript 下namespace 功能的简单分析
2013/07/05 Javascript
jQuery点击弹出下拉菜单的小例子
2013/08/01 Javascript
js使用post 方式打开新窗口
2015/02/26 Javascript
jQuery实现的简洁下拉菜单导航效果代码
2015/08/26 Javascript
Js 获取、判断浏览器版本信息的简单方法
2016/08/08 Javascript
详解原生JS回到顶部
2019/03/25 Javascript
vue中datepicker的使用教程实例代码详解
2019/07/08 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
2019/09/23 Javascript
JavaScript面向对象核心知识与概念归纳整理
2020/05/09 Javascript
Javascript柯里化实现原理及作用解析
2020/10/22 Javascript
浅谈python中的面向对象和类的基本语法
2016/06/13 Python
Python实现连接两个无规则列表后删除重复元素并升序排序的方法
2018/02/05 Python
python2.7读取文件夹下所有文件名称及内容的方法
2018/02/24 Python
python获取文件路径、文件名、后缀名的实例
2018/04/23 Python
python实现对列表中的元素进行倒序打印
2019/11/23 Python
Python3常见函数range()用法详解
2019/12/30 Python
python分布式爬虫中消息队列知识点详解
2020/11/26 Python
pycharm 快速解决python代码冲突的问题
2021/01/15 Python
python中HTMLParser模块知识点总结
2021/01/25 Python
canvas绘制表情包的示例代码
2018/07/09 HTML / CSS
html5小技巧之通过document.head获取head元素
2014/06/04 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
2020/12/01 HTML / CSS
French Connection官网:女装、男装及家居用品
2019/03/18 全球购物
Ray-Ban雷朋太阳眼镜英国官网:Ray-Ban UK
2019/11/23 全球购物
英国手工制作的现代与经典的沙发和床:Love Your Home
2020/09/26 全球购物
汉语言文学毕业生求职信
2013/10/01 职场文书
幼儿园亲子活动总结
2014/04/26 职场文书
如何起草一份正确的合伙创业协议书?
2019/07/04 职场文书
竞聘演讲报告:基本写作有哪些?附开头范文
2019/10/16 职场文书
nginx配置文件使用环境变量的操作方法
2021/06/02 Servers