原生js实现验证码功能


Posted in Javascript onMarch 16, 2017

效果图:

原生js实现验证码功能

代码如下:

<!doctype html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>js验证码</title>
 <style type="text/css">
 #code{
 width:80px;
 height:30px;
 font-size:20px;
 font-family:Arial; 
 font-style:italic; 
 font-weight:bold; 
 border:0; 
 letter-spacing:2px; 
 color:blue; 
 }
 </style>
 </head>
 <body>
<div> 
 <input type = "text" id = "input"/> 
 <input type = "button" id="code" /> 
 <input type = "button" value = "验证" id="check"/> 
</div> 
<script type="text/javascript">
window.onload=function(){
 var code=document.getElementById("code");
 function change(){
 // 验证码组成库
 var arrays=new Array( 
 '1','2','3','4','5','6','7','8','9','0', 
 'a','b','c','d','e','f','g','h','i','j', 
 'k','l','m','n','o','p','q','r','s','t', 
 'u','v','w','x','y','z', 
 'A','B','C','D','E','F','G','H','I','J', 
 'K','L','M','N','O','P','Q','R','S','T', 
 'U','V','W','X','Y','Z'        
       ); 
  // 重新初始化验证码
  codes ='';
  // 随机从数组中获取四个元素组成验证码
  for(var i = 0; i<4; i++){
   // 随机获取一个数组的下标
   var r = parseInt(Math.random()*arrays.length);
   codes += arrays[r];
  }
 // 验证码添加到input里
  code.value = codes;
 }
  change();//加载显示在页面上
  code.onclick = change;//单击更换验证码
//单击验证
 var check=document.getElementById("check");
 var input=document.getElementById("input");
 check.onclick=function(){
   var inputCode = input.value.toUpperCase(); //取得输入的验证码并转化为大写   
  if(inputCode.length==0) { //若输入的验证码长度为0
   alert("请输入验证码!"); //则弹出请输入验证码
  } 
  else if(inputCode!=codes.toUpperCase()) { //若输入的验证码与产生的验证码不一致时
   alert("验证码输入错误!请重新输入"); //则弹出验证码输入错误
   change();//刷新验证码
   input.value="";//清空文本框
  }    
  else{ //输入正确时
   alert("输入正确"); //弹出输入正确
  } 
  }
}
</script>
 </body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
利用jQuery 实现GridView异步排序、分页的代码
Feb 06 Javascript
jcrop基本参数一览
Jul 16 Javascript
jquery实现类似淘宝星星评分功能实例
Sep 12 Javascript
jquery实现具有嵌套功能的选项卡
Feb 12 Javascript
jQuery获取table行数并输出单元格内容的实现方法
Jun 30 Javascript
原生js仿jquery实现对Ajax的封装
Oct 04 Javascript
Node.js Sequelize如何实现数据库的读写分离
Oct 23 Javascript
JavaScript实现二维坐标点排序效果
Jul 18 Javascript
40行代码把Vue3的响应式集成进React做状态管理
May 20 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
Aug 13 Javascript
js实现直播点击飘心效果
Aug 19 Javascript
原生js拖拽功能制作滑动条实例代码
Feb 05 Javascript
基于vue实现多引擎搜索及关键字提示
Mar 16 #Javascript
vue图片加载与显示默认图片实例代码
Mar 16 #Javascript
js中作用域的实例解析
Mar 16 #Javascript
Vue.2.0.5过渡效果使用技巧
Mar 16 #Javascript
JS实现页面打印功能
Mar 16 #Javascript
Vue中添加过渡效果的方法
Mar 16 #Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
Mar 16 #Javascript
You might like
PHP中实现生成静态文件的方法缓解服务器压力
2014/01/07 PHP
typecho插件编写教程(一):Hello World
2015/05/28 PHP
Javascript 面向对象 继承
2010/05/13 Javascript
基于jQuery架构javascript基础体系
2011/01/01 Javascript
ajax中get和post的说明及使用与区别
2012/12/23 Javascript
JavaScript中textRange对象使用方法小结
2015/03/24 Javascript
javascript实现回到顶部特效
2015/05/06 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
2015/08/26 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
2016/01/08 Javascript
javascript弹出带文字信息的提示框效果
2016/07/19 Javascript
深入理解(function(){... })();
2016/08/16 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
2016/12/18 Javascript
JS获得一个对象的所有属性和方法实例
2017/02/21 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
2017/09/05 jQuery
jQuery选择器之表单元素选择器详解
2017/09/19 jQuery
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
2017/10/26 Javascript
js实现rem自动匹配计算font-size的示例
2017/11/18 Javascript
Vue.js实现分页查询功能
2020/11/15 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
2019/03/11 Javascript
关于vue状态过渡transition不起作用的原因解决
2019/04/09 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
2020/10/13 Javascript
微信小程序选择图片控件
2021/01/19 Javascript
JavaScript使用setTimeout实现倒计时效果
2021/02/19 Javascript
理解Python中的类与实例
2015/04/27 Python
Python 搭建Web站点之Web服务器与Web框架
2016/11/06 Python
Python中查看文件名和文件路径
2017/03/31 Python
Flask框架学习笔记之模板操作实例详解
2019/08/15 Python
django连接mysql数据库及建表操作实例详解
2019/12/10 Python
python数据类型强制转换实例详解
2020/06/22 Python
python 如何利用argparse解析命令行参数
2020/09/11 Python
elf彩妆英国官网:e.l.f. Cosmetics英国(美国平价彩妆品牌)
2017/11/02 全球购物
澳大利亚儿童鞋在线:The Trybe
2019/07/16 全球购物
CK巴西官方网站:Calvin Klein巴西
2019/07/19 全球购物
大学生职业生涯规划书模板
2014/01/18 职场文书
2016优秀班主任个人先进事迹材料
2016/02/26 职场文书
详解CSS故障艺术
2021/05/25 HTML / CSS