原生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 相关文章推荐
firefox中JS读取XML文件
Dec 21 Javascript
filemanage功能中用到的lib.js
Apr 08 Javascript
JavaScript 对象、函数和继承
Jul 07 Javascript
jQuery的实现原理的模拟代码 -5 Ajax
Aug 07 Javascript
Javascript的时间戳和php的时间戳转换注意事项
Apr 12 Javascript
js全屏显示显示代码的三种方法
Nov 11 Javascript
浅谈JavaScript异常处理语句
Jun 26 Javascript
JavaScript动态添加事件之事件委托
Jul 12 Javascript
怎样判断jQuery当前元素是隐藏还是显示
Nov 23 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
Oct 09 Javascript
Angular2 自定义表单验证器的实现方法
Dec 14 Javascript
微信小程序实现的canvas合成图片功能示例
May 03 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获取ip对应地区和使用网络类型的方法
2015/03/11 PHP
CodeIgniter扩展核心类实例详解
2016/01/20 PHP
PHP与Java对比学习日期时间函数
2016/07/03 PHP
注意!PHP 7中不要做的10件事
2016/09/18 PHP
Javascript技术技巧大全(五)
2007/01/22 Javascript
如何判断图片地址是否失效
2007/02/02 Javascript
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
2007/04/20 Javascript
jquery加载页面的方法(页面加载完成就执行)
2011/06/21 Javascript
JS使用for循环遍历Table的所有单元格内容
2014/08/21 Javascript
node.js中的fs.appendFileSync方法使用说明
2014/12/17 Javascript
jQuery设置和移除文本框默认值的方法
2015/03/09 Javascript
jquery获得当前html页面源码的方法
2015/07/14 Javascript
Jquery实现顶部弹出框特效
2015/08/08 Javascript
全面解析Bootstrap表单使用方法(表单样式)
2015/11/24 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
2016/11/09 Javascript
js中变量的连续赋值(实例讲解)
2017/07/08 Javascript
Vue2实时监听表单变化的示例讲解
2018/08/30 Javascript
解决vue无法设置滚动位置的问题
2018/10/07 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
2019/03/28 Javascript
详解JavaScript自定义函数
2020/07/29 Javascript
jquery实现广告上下滚动效果
2021/03/04 jQuery
python网络爬虫采集联想词示例
2014/02/11 Python
python:目标检测模型预测准确度计算方式(基于IoU)
2020/01/18 Python
Python操作注册表详细步骤介绍
2020/02/05 Python
TensorFlow tf.nn.conv2d_transpose是怎样实现反卷积的
2020/04/20 Python
Python 使用生成器代替线程的方法
2020/08/04 Python
基于python+selenium自动健康打卡的实现代码
2021/01/13 Python
Python爬虫UA伪装爬取的实例讲解
2021/02/19 Python
移动端Web页面的CSS3 flex布局快速上手指南
2016/05/31 HTML / CSS
打架检讨书300字
2014/02/02 职场文书
卫生安全检查制度
2014/02/04 职场文书
你的创业计划书怎样才能打动风投
2014/02/06 职场文书
2016银行招聘自荐信
2016/01/28 职场文书
vue实现水波涟漪效果的点击反馈指令
2021/05/31 Vue.js
javascript canvas实现雨滴效果
2021/06/09 Javascript
Python识别花卉种类鉴定网络热门植物并自动整理分类
2022/04/08 Python