JavaScript 随机验证码的生成实例代码


Posted in Javascript onSeptember 22, 2016

随机验证码的生成

1: 主体部分

<script> 
 var code ; //在全局 定义验证码 
function createCode() 
   {  
    code = ""; 
    var codeLength = 6;//验证码的长度 
    var checkCode = document.getElementById("checkCode"); 
    var selectChar = new Array(0,1,2,3,4,5,6,7,8,9,'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');//所有候选组成验证码的字符,当然也可以用中文的 
     
    for(var i=0;i<codeLength;i++) 
    { 
    
     
    var charIndex = Math.floor(Math.random()*36); 
    code +=selectChar[charIndex]; 
     
     
    } 
//    alert(code); 
    if(checkCode) //这里不是很懂,有高手可以解释下 
    { 
     checkCode.className="code"; 
     checkCode.value = code; 
    } 
     
   } 
    
function validate () 
   { 
    var inputCode = document.getElementById("input1").value; 
    if(inputCode.length <=0) 
    { 
      alert("请输入验证码!"); 
      document.getElementById("input1").focus(); 
    } 
    else if(inputCode != code ) 
    { 
     alert("验证码输入错误!"); 
     createCode();//刷新验证码 
     inputCode = ""; 
     document.getElementById("input1").focus(); 
    }else{ 
      document.frmRegister.submit(); 
    } 
     
     
    } 
<script>

接下来时如何放入到验证框里面了

<input type="text"  id="checkCode" class="unchanged" style="width: 80px"  readonly/>  

 接着就是判断了

<input  type="text"  onclick="createCode()" id="input1" />   

OK....搞定...这里的onclik是只要动了就移开

以上就是JS 随机生成验证码的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

Javascript 相关文章推荐
浅谈tudou土豆网首页图片延迟加载的效果
Jun 23 Javascript
jQuery中index()方法用法实例
Dec 27 Javascript
js实现商品抛物线加入购物车特效
Nov 18 Javascript
基于Bootstrap实现图片轮播效果
May 22 Javascript
JS中使用变量保存arguments对象的方法
Jun 03 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
Nov 18 Javascript
原生JS实现垂直手风琴效果
Feb 19 Javascript
使用async-validator编写Form组件的方法
Jan 10 Javascript
使用Vue构建可重用的分页组件
Mar 26 Javascript
微信开发之微信jssdk录音功能开发示例
Oct 22 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
Oct 23 Javascript
开发一个封装iframe的vue组件
Mar 29 Vue.js
D3.js实现雷达图的方法详解
Sep 22 #Javascript
javascript函数中的3个高级技巧
Sep 22 #Javascript
JavaScript省市区三级联动菜单效果
Sep 21 #Javascript
Angular2 环境配置详细介绍
Sep 21 #Javascript
JS实现鼠标滑过显示边框的菜单效果
Sep 21 #Javascript
JS 动态判断PC和手机浏览器实现代码
Sep 21 #Javascript
详解AngularJs中$resource和restfu服务端数据交互
Sep 21 #Javascript
You might like
xml+php动态载入与分页
2006/10/09 PHP
用PHP制作静态网站的模板框架(四)
2006/10/09 PHP
php中iconv函数使用方法
2008/05/24 PHP
基于php设计模式中工厂模式详细介绍
2013/05/15 PHP
php中file_exists函数使用详解
2015/05/08 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
IE bug table元素的innerHTML
2010/01/11 Javascript
jquery实现的Accordion折叠面板效果代码
2015/09/02 Javascript
js实现兼容IE、Firefox的图片缩放代码
2015/12/08 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
2016/06/08 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
2016/07/01 Javascript
JSON键值对序列化和反序列化解析
2017/01/24 Javascript
JS中的多态实例详解
2017/10/15 Javascript
vue的状态管理模式vuex
2017/11/30 Javascript
解析vue路由异步组件和懒加载案例
2018/06/08 Javascript
小程序scroll-view组件实现滚动的示例代码
2018/09/20 Javascript
JS使用Dijkstra算法求解最短路径
2019/01/17 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
2019/04/11 Javascript
纯异步nodejs文件夹(目录)复制功能
2019/09/03 NodeJs
在Python的Django框架中更新数据库数据的方法
2015/07/17 Python
详解Python3中字符串中的数字提取方法
2017/01/14 Python
Flask框架踩坑之ajax跨域请求实现
2019/02/22 Python
windows下numpy下载与安装图文教程
2019/04/02 Python
Python、 Pycharm、Django安装详细教程(图文)
2019/04/12 Python
python openvc 裁剪、剪切图片 提取图片的行和列
2019/09/19 Python
Centos7下源码安装Python3 及shell 脚本自动安装Python3的教程
2020/03/07 Python
python爬虫今日热榜数据到txt文件的源码
2021/02/23 Python
HTML5 video 事件应用示例
2014/09/11 HTML / CSS
美国高级音响品牌:Master&Dynamic
2018/07/05 全球购物
《愚公移山》教学反思
2014/02/20 职场文书
计划生育宣传标语
2014/06/21 职场文书
社区母亲节活动总结
2015/02/10 职场文书
2016年习总书记讲话学习心得体会
2016/01/20 职场文书
2019最新版劳务派遣管理制度
2019/08/16 职场文书
2019年消防宣传标语集锦
2019/11/21 职场文书
python基础之匿名函数详解
2021/04/21 Python