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获取变量
Aug 24 Javascript
js禁止回车提交表单的示例代码
Dec 23 Javascript
extjs每个组件要设置唯一的ID否则会出错
Jun 15 Javascript
JS中字符串trim()使用示例
May 26 Javascript
Jquery中巧用Ajax的beforeSend方法
Jan 20 Javascript
javascript中href和replace的比较(详解)
Nov 25 Javascript
浅谈mint-ui 填坑之路
Nov 06 Javascript
React/Redux应用使用Async/Await的方法
Nov 16 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
Mar 15 Javascript
JavaScript获取用户所在城市及地理位置
Apr 21 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
Mar 15 Javascript
JavaScript强制类型转换和隐式类型转换操作示例
May 01 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
德生PL330的评价与改造
2021/03/02 无线电
德生PL550的电路分析
2021/03/02 无线电
wamp安装后自定义配置的方法
2014/08/23 PHP
php 生成签名及验证签名详解
2016/10/26 PHP
PHP应用跨时区功能的实现方法
2019/03/21 PHP
PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能
2019/05/21 PHP
javascript 读取XML数据,在页面中展现、编辑、保存的实现
2009/10/27 Javascript
JavaScript对象链式操作代码(jquery)
2010/07/04 Javascript
通过一段代码简单说js中的this的使用
2013/07/23 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
2015/02/13 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
2015/03/21 Javascript
js实现简单选项卡与自动切换效果的方法
2015/04/10 Javascript
JS实现的仿淘宝交易倒计时效果
2015/11/27 Javascript
微信小程序 地图定位简单实例
2016/10/14 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
2017/01/23 Javascript
详解Vue.js Mixins 混入使用
2017/09/15 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
2018/03/09 Javascript
[00:27]DOTA2战队VP、Secret贺新春
2018/02/11 DOTA
python自动安装pip
2014/04/24 Python
Python实现将Excel转换成xml的方法示例
2018/08/25 Python
Django实现网页分页功能
2019/10/31 Python
python 实现单通道转3通道
2019/12/03 Python
Django import export实现数据库导入导出方式
2020/04/03 Python
利用pyecharts读取csv并进行数据统计可视化的实现
2020/04/17 Python
python多进程下的生产者和消费者模型
2020/05/07 Python
Python3爬虫中Ajax的用法
2020/07/10 Python
前端面试必备之CSS3的新特性
2017/09/05 HTML / CSS
法国亚马逊官方网站:Amazon.fr
2020/12/19 全球购物
初中英语教学反思
2014/01/25 职场文书
文案策划专业自荐信
2014/07/07 职场文书
大学生安全责任书
2014/07/25 职场文书
幼儿园亲子活动感想
2015/08/07 职场文书
2016年学习雷锋精神广播稿
2015/12/17 职场文书
党风廉政建设心得体会(2016最新版)
2016/01/22 职场文书
聊聊Python String型列表求最值的问题
2022/01/18 Python
Three.js实现雪糕地球的使用示例详解
2022/07/07 Javascript