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 相关文章推荐
jquery.boxy插件的iframe扩展代码
Jul 02 Javascript
JavaScript弹出窗口方法汇总
Aug 12 Javascript
Javascript 读取操作Sql中的Xml字段
Oct 09 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
May 26 Javascript
jQuery 全选 全不选 事件绑定的实现代码
Jan 23 Javascript
javascript 数据存储的常用函数总结
Jun 01 Javascript
postman+json+springmvc测试批量添加实例
Mar 31 Javascript
JavaScript设计模式之职责链模式应用示例
Aug 07 Javascript
Vue.js轮播图走马灯代码实例(全)
May 08 Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
layui 弹出层回调获取弹出层数据的例子
Sep 02 Javascript
Vue.js实现可编辑的表格
Dec 11 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
Get或Post提交值的非法数据处理
2006/10/09 PHP
php adodb连接不同数据库
2009/03/19 PHP
在Linux系统的服务器上隐藏PHP版本号的方法
2015/06/06 PHP
变量在 PHP7 内部的实现(一)
2015/12/21 PHP
Laravel (Lumen) 解决JWT-Auth刷新token的问题
2019/10/24 PHP
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
2008/12/25 Javascript
javascript 获取元素位置的快速方法 getBoundingClientRect()
2009/11/26 Javascript
Jquery 数据选择插件Pickerbox使用介绍
2012/08/24 Javascript
js 绑定键盘鼠标事件示例代码
2014/02/12 Javascript
js判断为空Null与字符串为空简写方法
2014/02/24 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
2015/04/17 Javascript
以Python代码实例展示kNN算法的实际运用
2015/10/26 Javascript
js实现将选中内容分享到新浪或腾讯微博
2015/12/16 Javascript
JS定义类的六种方式详解
2016/05/12 Javascript
基于d3.js实现实时刷新的折线图
2016/08/03 Javascript
jQuery实现微信长按识别二维码功能
2016/08/26 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
2017/01/23 Javascript
JS中使用textPath实现线条上的文字
2017/12/25 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
2018/08/24 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
2020/01/12 Javascript
python获取当前日期和时间的方法
2015/04/30 Python
http请求 request失败自动重新尝试代码示例
2018/01/25 Python
python如何使用jt400.jar包代码实例
2019/12/20 Python
Python pymysql模块安装并操作过程解析
2020/10/13 Python
马来西亚在线药房:RoyalePharma
2019/12/01 全球购物
中间件分为哪几类
2016/09/18 面试题
优秀学生获奖感言
2014/02/15 职场文书
个人三严三实对照检查材料思想汇报
2014/09/22 职场文书
博士生专家推荐信
2014/09/26 职场文书
个人年底工作总结
2015/03/10 职场文书
离职证明范本
2015/06/12 职场文书
贷款工资证明范本
2015/06/12 职场文书
MySQL入门命令之函数-单行函数-流程控制函数
2021/04/05 MySQL
2022漫威和DC电影上映作品
2022/04/05 欧美动漫
Python面试不修改数组找出重复的数字
2022/05/20 Python
Python通用验证码识别OCR库ddddocr的安装使用教程
2022/07/07 Python