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 相关文章推荐
使用onbeforeunload属性后的副作用
Mar 08 Javascript
5个最佳的Javascript日期处理类库分享
Apr 15 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
Apr 22 Javascript
jquery实现盒子下拉效果示例代码
Sep 12 Javascript
JavaSript中变量的作用域闭包的深入理解
May 12 Javascript
js采用concat和sort将N个数组拼接起来的方法
Jan 21 Javascript
JS中多步骤多分步的StepJump组件实例详解
Apr 01 Javascript
JS实现touch 点击滑动轮播实例代码
Jan 19 Javascript
react router4+redux实现路由权限控制的方法
May 03 Javascript
详解Angular模板引用变量及其作用域
Nov 23 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
Oct 30 Javascript
uniapp,微信小程序中使用 MQTT的问题
Jul 11 Javascript
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
PHP实现数字补零功能的2个函数介绍
2014/05/12 PHP
PHP自带ZIP压缩、解压缩类ZipArchiv使用指南
2015/03/03 PHP
PHP单态模式简单用法示例
2016/11/16 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
使用laravel和ECharts实现折线图效果的例子
2019/10/09 PHP
PHP设计模式(八)装饰器模式Decorator实例详解【结构型】
2020/05/02 PHP
jquery mobile页面跳转后样式丢失js失效的解决方法
2014/09/06 Javascript
php结合imgareaselect实现图片裁剪
2015/07/05 Javascript
JS+CSS实现表格高亮的方法
2015/08/05 Javascript
javascript闭包(Closure)用法实例简析
2015/11/30 Javascript
关于iframe跨域POST提交的方法示例
2017/01/15 Javascript
angular.fromJson与toJson方法用法示例
2017/05/17 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
2017/05/24 Javascript
VUE元素的隐藏和显示(v-show指令)
2017/06/23 Javascript
老生常谈js数据类型
2017/08/03 Javascript
微信小程序使用form表单获取输入框数据的实例代码
2018/05/17 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
2018/09/07 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
2020/03/02 Javascript
[01:11:02]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
[01:20:05]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第二场 2月5日
2021/03/11 DOTA
利用Python中的输入和输出功能进行读取和写入的教程
2015/04/14 Python
Python进阶学习之特殊方法实例详析
2017/12/01 Python
对pandas写入读取h5文件的方法详解
2018/12/28 Python
Python3.5实现的罗马数字转换成整数功能示例
2019/02/25 Python
用python打印1~20的整数实例讲解
2019/07/01 Python
python列表生成器迭代器实例解析
2019/12/19 Python
python标准库sys和OS的函数使用方法与实例详解
2020/02/12 Python
Python常用数据分析模块原理解析
2020/07/20 Python
详解html5 shiv.js和respond.min.js
2018/01/24 HTML / CSS
俄罗斯眼镜网: optikaworld
2016/07/31 全球购物
物业管理毕业生的自我评价
2014/02/17 职场文书
大专生求职信
2014/06/29 职场文书
会议接待欢迎词范文
2015/01/26 职场文书
学校推普周活动总结
2015/05/07 职场文书
美容院管理规章制度
2015/08/05 职场文书
初中思想品德教学反思
2016/02/24 职场文书