原生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 相关文章推荐
js 弹出框 替代浏览器的弹出框
Oct 29 Javascript
基于jquery的关于动态创建DOM元素的问题
Dec 24 Javascript
JS 页面计时器示例代码
Oct 28 Javascript
深入探寻javascript定时器
Jan 02 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
Sep 16 Javascript
jQuery拖动元素并对元素进行重新排序
Dec 30 Javascript
纯JS打造网页中checkbox和radio的美化效果
Oct 13 Javascript
微信小程序 less文件编译成wxss文件实现办法
Dec 05 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
Oct 11 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
May 22 Javascript
JS函数进阶之继承用法实例分析
Jan 15 Javascript
vuex中store存储store.commit和store.dispatch的用法
Jul 24 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取整函数ceil,floo,round的用法及介绍
2013/08/31 PHP
PHP采用自定义函数实现遍历目录下所有文件的方法
2014/08/19 PHP
PHP实现绘制3D扇形统计图及图片缩放实例
2014/10/01 PHP
Codeigniter检测表单post数据的方法
2015/03/21 PHP
PHP的全局错误处理详解
2016/04/25 PHP
PHP文件上传操作实例详解
2016/09/27 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
JavaScript获取网页中第一个图片id的方法
2015/04/03 Javascript
JSON字符串和对象相互转换实例分析
2016/06/16 Javascript
通过javascript进行UTF-8编码的实现方法
2016/06/27 Javascript
深入浅析JavaScript中的scrollTop
2016/07/11 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
2016/10/18 Javascript
Angularjs为ng-click事件传递参数
2017/06/15 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
2017/12/09 Javascript
JS实现图片居中悬浮效果
2017/12/25 Javascript
Javascript的console['']常用输入方法汇总
2018/04/26 Javascript
vue中 this.$set的用法详解
2019/09/06 Javascript
Vue通过provide inject实现组件通信
2020/09/03 Javascript
[03:02]辉夜杯主赛事第二日 每日之星
2015/12/27 DOTA
python线程池的实现实例
2013/11/18 Python
Python使用cookielib模块操作cookie的实例教程
2016/07/12 Python
Python运算符重载详解及实例代码
2017/03/07 Python
回调函数的意义以及python实现实例
2017/06/20 Python
Python实现1-9数组形成的结果为100的所有运算式的示例
2017/11/03 Python
Python 将RGB图像转换为Pytho灰度图像的实例
2017/11/14 Python
Django使用httpresponse返回用户头像实例代码
2018/01/26 Python
python实现基于朴素贝叶斯的垃圾分类算法
2019/07/09 Python
基于python3的socket聊天编程
2020/02/17 Python
十岁生日父母答谢词
2014/01/18 职场文书
小学生家长评语集锦
2014/01/30 职场文书
历史学专业求职信
2014/06/19 职场文书
2015年建党94周年演讲稿
2015/03/19 职场文书
汉字听写大会观后感
2015/06/12 职场文书
莫言获奖感言(全文)
2015/07/31 职场文书
浅谈Redis中的RDB快照
2021/06/29 Redis
python百行代码实现汉服圈图片爬取
2021/11/23 Python