原生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 相关文章推荐
javascript获取设置div的高度和宽度兼容任何浏览器
Sep 22 Javascript
javascript事件冒泡和事件捕获详解
May 26 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
Oct 08 Javascript
jquery判断复选框是否被选中的方法
Oct 16 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
Sep 25 Javascript
微信小程序实现图片上传功能
May 28 Javascript
js中自定义react数据验证组件实例详解
Oct 19 Javascript
JS中注入eval, Function等系统函数截获动态代码
Apr 03 Javascript
VUE写一个简单的表格实例
Aug 06 Javascript
微信小程序学习总结(一)项目创建与目录结构分析
Jun 04 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
Jul 12 Javascript
如何管理Vue中的缓存页面
Feb 06 Vue.js
基于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学习之运算符相关概念
2011/06/09 PHP
openPNE常用方法分享
2011/11/29 PHP
CodeIgniter框架中_remap()使用方法2例
2014/03/10 PHP
php实现json编码的方法
2015/07/30 PHP
巧妙破除网页右键禁用的十大绝招
2006/08/12 Javascript
js一组验证函数
2008/12/20 Javascript
javascript面向对象的方式实现的弹出层效果代码
2010/01/28 Javascript
Javascript Jquery 遍历Json的实现代码
2010/03/31 Javascript
高亮显示web页表格行的javascript代码
2010/11/19 Javascript
jquery蒙版控件实现代码
2010/12/08 Javascript
window.onload和$(function(){})的区别介绍
2013/10/30 Javascript
JS复制到剪贴板示例代码
2013/10/30 Javascript
JS数组去重与取重的示例代码
2014/01/24 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
2014/02/19 Javascript
jQuery中removeClass()方法用法实例
2015/01/05 Javascript
jquery特效 点击展示与隐藏全文
2015/12/09 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
2016/01/28 Javascript
jQuery动态生成表格及右键菜单功能示例
2017/01/13 Javascript
vue-cli扩展多模块打包的示例代码
2018/04/09 Javascript
对mac下nodejs 更新到最新版本的最新方法(推荐)
2018/05/17 NodeJs
vue 中 beforeRouteEnter 死循环的问题
2019/04/23 Javascript
微信公众号平台接口开发 获取access_token过程解析
2019/08/14 Javascript
[53:36]Liquid vs VP Supermajor决赛 BO 第三场 6.10
2018/07/05 DOTA
Python实现计算两个时间之间相差天数的方法
2017/05/10 Python
pandas的object对象转时间对象的方法
2018/04/11 Python
使用python验证代理ip是否可用的实现方法
2018/07/25 Python
浅谈Python3识别判断图片主要颜色并和颜色库进行对比的方法
2019/10/25 Python
Keras loss函数剖析
2020/07/06 Python
ONLY德国官方在线商店:购买时尚女装
2017/09/21 全球购物
俄罗斯玩具、儿童用品、儿童服装和鞋子网上商店:MyToys.ru
2019/10/14 全球购物
中专毕业生的自我鉴定
2013/12/01 职场文书
能源工程专业应届生求职信
2014/03/01 职场文书
2014年幼儿园老师工作总结
2014/12/05 职场文书
2014年班主任德育工作总结
2014/12/05 职场文书
“5.12”护士节主持词
2015/07/04 职场文书
《浅水洼里的小鱼》教学反思
2016/02/16 职场文书