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去空格处理方法
Nov 18 Javascript
js 新浪的一个图片播放图片轮换效果代码
Jul 15 Javascript
javascript实现面向对象类的功能书写技巧
Mar 07 Javascript
js左右弹性滚动对联广告代码分享
Feb 19 Javascript
jquery中change()用法实例分析
Feb 06 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
Dec 17 Javascript
微信小程序页面生命周期详解
Jan 31 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
Nov 27 Javascript
基于element-ui组件手动实现单选和上传功能
Dec 06 Javascript
简单两步使用node发送qq邮件的方法
Mar 01 Javascript
JS使用for in有序获取对象数据
May 19 Javascript
三种方式清除vue路由跳转router-link的历史记录
Apr 10 Vue.js
微信小程序  自定义创建详细介绍
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中的观察者模式
2010/03/24 PHP
fleaphp crud操作之findByField函数的使用方法
2011/04/23 PHP
PHP获取短链接跳转后的真实地址和响应头信息的方法
2014/07/25 PHP
php函数serialize()与unserialize()用法实例
2014/11/06 PHP
PHP session文件独占锁引起阻塞问题解决方法
2015/05/12 PHP
PHP微信刮刮卡 附微信接口
2016/07/22 PHP
PHP实现断点续传乱序合并文件的方法
2018/09/06 PHP
浅谈PHP匿名函数和闭包
2019/03/08 PHP
JQuery中each()的使用方法说明
2010/08/19 Javascript
16个最流行的JavaScript框架[推荐]
2011/05/29 Javascript
jquery 按钮状态效果 正常、移上、按下
2013/08/12 Javascript
javascript特殊用法示例介绍
2013/11/29 Javascript
JavaScript中的null和undefined区别介绍
2015/01/01 Javascript
javascript中CheckBox全选终极方案
2015/05/20 Javascript
js实现Select头像选择实时预览代码
2015/08/17 Javascript
在JavaScript中如何解决用execCommand(
2015/10/19 Javascript
JS实现图片剪裁并预览效果
2016/08/12 Javascript
深入理解Node.js的HTTP模块
2016/10/12 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
2016/11/29 Javascript
js实现获取鼠标当前的位置
2016/12/14 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
2017/01/23 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/25 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
2017/05/25 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
2017/07/12 Javascript
AngularJS创建一个上传照片的指令实例代码
2018/02/24 Javascript
JS实现的小火箭发射动画效果示例
2018/12/08 Javascript
[01:07:11]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[47:52]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第二场 11.26
2020/11/30 DOTA
Python 中迭代器与生成器实例详解
2017/03/29 Python
用python3教你任意Html主内容提取功能
2018/11/05 Python
django ORM之values和annotate使用详解
2020/05/19 Python
html5 figure和figcaption的使用方法
2018/09/10 HTML / CSS
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
2018/09/19 HTML / CSS
将一个文本文件的内容按倒序打印出来
2015/01/05 面试题
考试作弊被抓检讨书
2014/10/02 职场文书
2016党性教育学习心得体会
2016/01/21 职场文书