原生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代码
Oct 09 Javascript
一个JQuery写的点击上下滚动的小例子
Aug 27 Javascript
innerText 使用示例
Jan 23 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
Oct 22 Javascript
javaScript基础语法介绍
Feb 28 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
Mar 30 Javascript
Angularjs 实现分页功能及示例代码
Sep 14 Javascript
js插件Jcrop自定义截取图片功能
Oct 14 Javascript
基于Phantomjs生成PDF的实现方法
Nov 07 Javascript
通过js动态创建标签,并设置属性方法
Feb 24 Javascript
JS实现获取数组中最大值或最小值功能示例
Mar 02 Javascript
JavaScript函数柯里化实现原理及过程
Dec 02 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
php网站来路获取代码(针对搜索引擎)
2010/06/08 PHP
smarty中js的调用方法示例
2014/10/27 PHP
用 Composer构建自己的 PHP 框架之使用 ORM
2014/10/30 PHP
PHP获取文件夹内文件数的方法
2015/03/12 PHP
php生成年月日下载列表的方法
2015/04/24 PHP
php PDO实现的事务回滚示例
2017/03/23 PHP
php实现的PDO异常处理操作分析
2018/12/27 PHP
jquery 必填项判断表单是否为空的方法
2008/09/14 Javascript
ExtJS 2.0实用简明教程 之Border区域布局
2009/04/29 Javascript
javascript代码加载优化方法
2011/01/30 Javascript
JS清空多文本框、文本域示例代码
2014/02/24 Javascript
angular.element方法汇总
2015/01/07 Javascript
jquery ajax局部加载方法详解(实现代码)
2016/05/12 Javascript
JS实现的系统调色板完整实例
2016/12/21 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
2017/01/23 Javascript
Vue中父组件向子组件通信的方法
2017/07/11 Javascript
Vuex入门到上手教程
2018/06/20 Javascript
Vue实现商品分类菜单数量提示功能
2019/07/26 Javascript
简单实现python爬虫功能
2015/12/31 Python
关于python的bottle框架跨域请求报错问题的处理方法
2017/03/19 Python
详解Python里使用正则表达式的ASCII模式
2017/11/02 Python
python3.7 sys模块的具体使用
2019/07/22 Python
jupyter notebook参数化运行python方式
2020/04/10 Python
结束运行python的方法
2020/06/16 Python
苹果美国官方商城:Apple美国
2016/08/24 全球购物
Ray-Ban雷朋西班牙官网:全球领先的太阳眼镜品牌
2018/11/28 全球购物
药学专业个人自我评价
2013/11/11 职场文书
美容师的职业规划书
2013/12/27 职场文书
会计大学生职业生涯规划书范文
2014/01/13 职场文书
《他得的红圈圈最多》教学反思
2014/04/24 职场文书
政府个人对照检查材料思想汇报
2014/10/08 职场文书
2015年林业工作总结
2015/05/14 职场文书
2016年6月份红领巾广播稿
2015/12/21 职场文书
Python使用Web框架Flask开发项目
2022/06/01 Python
教你如何用cmd快速登录服务器
2022/06/10 Servers