原生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封装的不错的选项卡效果代码
Feb 15 Javascript
初试jQuery EasyUI 使用介绍
Apr 01 Javascript
js最简单的拖拽效果实现代码
Sep 24 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
Jul 29 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
Aug 18 Javascript
js实现获取两个日期之间所有日期的方法
Jun 17 Javascript
Angular和百度地图的结合实例代码
Oct 19 Javascript
Vue-cli创建项目从单页面到多页面的方法
Sep 20 Javascript
javascript使用正则实现去掉字符串前面的所有0
Jul 23 Javascript
vue实现商品加减计算总价的实例代码
Aug 12 Javascript
django简单的前后端分离的数据传输实例 axios
May 18 Javascript
Node与Python 双向通信的实现代码
Jul 16 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
自动跳转中英文页面
2006/10/09 PHP
linux系统下php安装mbstring扩展的二种方法
2014/01/20 PHP
PHP依赖倒置(Dependency Injection)代码实例
2014/10/11 PHP
PHP判断网络文件是否存在的方法
2015/03/12 PHP
php+Ajax无刷新验证用户名操作实例详解
2019/03/04 PHP
PHP商品秒杀问题解决方案实例详解【mysql与redis】
2019/07/22 PHP
[IE&amp;FireFox兼容]JS对select操作
2007/01/07 Javascript
ExtJS 2.0实用简明教程 之Ext类库简介
2009/04/29 Javascript
Web开发者必备的12款超赞jQuery插件
2010/12/03 Javascript
jquery struts 验证唯一标识(公用方法)
2013/03/27 Javascript
JS获取select-option-text_value的方法
2013/12/26 Javascript
JS的location.href跳出框架打开新页面的方法
2014/09/04 Javascript
使用jQuery实现返回顶部
2015/01/26 Javascript
jquery实现动态操作select选中
2015/02/11 Javascript
jQuery基于muipicker实现仿ios时间选择
2016/02/22 Javascript
JavaScript中创建对象的模式汇总
2016/04/19 Javascript
Javascript必知必会(四)js类型转换
2016/06/08 Javascript
第一个Vue插件从封装到发布
2017/11/22 Javascript
JS实现在文本指定位置插入内容的简单示例
2017/12/22 Javascript
vue 子组件向父组件传值方法
2018/02/26 Javascript
JavaScript解析及序列化JSON的方法实例分析
2019/01/04 Javascript
vue如何获取自定义元素属性参数值的方法
2019/05/14 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
2019/10/16 Javascript
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
如何实现删除numpy.array中的行或列
2018/05/08 Python
利用python将图片版PDF转文字版PDF
2019/05/03 Python
python多线程扫描端口(线程池)
2019/09/04 Python
爬虫代理池Python3WebSpider源代码测试过程解析
2019/12/20 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
解决python DataFrame 打印结果不换行问题
2020/04/09 Python
python3获取控制台输入的数据的具体实例
2020/08/16 Python
英国音乐设备和乐器商店:Gear4music
2017/10/16 全球购物
网页设计个人找工作求职信
2013/11/28 职场文书
小学红领巾中秋节广播稿
2014/01/13 职场文书
2014个人年度工作总结
2014/12/15 职场文书
OpenCV绘制圆端矩形的示例代码
2021/08/30 Python