js实现随机数字字母验证码


Posted in Javascript onJune 19, 2017

本文实例为大家分享了数字字母验证码的具体实现代码,供大家参考,具体内容如下

验证码: 

js实现随机数字字母验证码

<html> 
  <head> 
    <title>纯字验证码</title> 
    <meta http-equiv='content-type' content='text/html;charset=utf-8'/> 
    <script type='text/javascript' src='jquery-1.7.2.js'></script> 
    <script type='text/javascript'> 
    var code ; //在全局定义验证码  
      
    function createCode(){ 
       code = "";  
       var codeLength = 4;//验证码的长度  
       var checkCode = document.getElementById("code");  
       var random = 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 index = Math.floor(Math.random()*36);//取得随机数的索引(0~35)  
        code += random[index];//根据索引取得随机数加到code上  
      }  
      checkCode.value = code;//把code值赋给验证码  
    } 
    //校验验证码  
    function validate(){  
      var inputCode = document.getElementById("input").value.toUpperCase(); //取得输入的验证码并转化为大写     
      if(inputCode.length <= 0) { //若输入的验证码长度为0  
        alert("请输入验证码!"); //则弹出请输入验证码  
      }else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时  
        alert("验证码输入错误!@_@"); //则弹出验证码输入错误  
        createCode();//刷新验证码  
        document.getElementById("input").value = "";//清空文本框  
      }else { //输入正确时  
        alert("合格!^-^"); 
      } 
    } 
    </script> 
    <style type='text/css'> 
    #code{ 
      font-family:Arial,宋体; 
      font-style:italic; 
      color:green; 
      border:0; 
      padding:2px 3px; 
      letter-spacing:3px; 
      font-weight:bolder; 
    } 
    </style> 
  </head> 
  <body onload='createCode()'> 
    <div>验证码:  
      <input type = "text" id = "input"/>  
      <input type="button" id="code" onclick="createCode()" style="width:60px" title='点击更换验证码' /> 
      <input type = "button" value = "验证" onclick = "validate()"/> 
    </div>  
  </body> 
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js实现随机返回数组的一个元素
Aug 13 Javascript
js截取函数(indexOf,join等)
Sep 01 Javascript
基于jquery的web页面日期格式化插件
Nov 15 Javascript
JavaScript获取和设置CheckBox状态的简单方法
Jul 05 Javascript
js中settimeout方法加参数
Feb 28 Javascript
javascript实现根据3原色制作颜色选择器的方法
Jul 17 Javascript
Jquery实现顶部弹出框特效
Aug 08 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
Dec 13 Javascript
基于JS递归函数细化认识及实用实例(推荐)
Aug 07 Javascript
vue中使用localstorage来存储页面信息
Nov 04 Javascript
JavaScript生成指定范围的时间列表
Mar 19 Javascript
angular.js实现列表orderby排序的方法
Oct 02 Javascript
解决vue-cli中stylus无法使用的问题方法
Jun 19 #Javascript
AngularJS  ng-repeat遍历输出的用法
Jun 19 #Javascript
ZeroClipboard.js使用一个flash复制多个文本框
Jun 19 #Javascript
AngularJS的ng-click传参的方法
Jun 19 #Javascript
JavaScript队列函数和异步执行详解
Jun 19 #Javascript
JS检测是否可以访问公网服务器功能代码
Jun 19 #Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
Jun 19 #Javascript
You might like
php使用curl获取https请求的方法
2015/02/11 PHP
Zend Framework生成验证码并实现验证码验证功能(附demo源码下载)
2016/03/22 PHP
php获取一定范围内取N个不重复的随机数
2016/05/28 PHP
PHP命名空间用法实例分析
2019/09/04 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
为数据添加append,remove功能
2006/10/03 Javascript
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
2010/09/19 Javascript
JavaScript修改css样式style动态改变元素样式
2013/12/16 Javascript
跟我学Nodejs(二)--- Node.js事件模块
2014/05/21 NodeJs
js使用循环清空某个div中的input标签值
2014/09/29 Javascript
jQuery大于号(&gt;)选择器的作用解释
2015/01/13 Javascript
Vue.js每天必学之数据双向绑定
2016/09/05 Javascript
JS之相等操作符详解
2016/09/13 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
2016/11/07 Javascript
AngularJS变量及过滤器Filter用法分析
2016/11/22 Javascript
Bootstrap3 内联单选和多选框
2016/12/29 Javascript
Angular实现搜索框及价格上下限功能
2018/01/19 Javascript
解决vue.js 数据渲染成功仍报错的问题
2018/08/25 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
2020/04/14 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
2020/12/30 Vue.js
给Python入门者的一些编程建议
2015/06/15 Python
python音频处理用到的操作的示例代码
2017/10/27 Python
python3读取excel文件只提取某些行某些列的值方法
2018/07/10 Python
Selenium python时间控件输入问题解决方案
2020/07/22 Python
用Python制作音乐海报
2021/01/26 Python
毕业生求职推荐信
2013/11/04 职场文书
公司综合部的成员自我评价分享
2013/11/05 职场文书
单位未婚证明范本
2014/01/18 职场文书
小学生国旗下演讲稿
2014/04/25 职场文书
2014大学生中国梦主题教育学习思想汇报
2014/09/10 职场文书
民政局副局长民主生活会个人对照检查材料
2014/09/19 职场文书
个人自查自纠材料
2014/10/14 职场文书
2014年维修工作总结
2014/11/22 职场文书
先进教师事迹材料
2014/12/16 职场文书
先进学校事迹材料
2014/12/30 职场文书
情侣餐厅的创业计划书范本!
2019/07/26 职场文书