JS自动生成动态HTML验证码页面


Posted in Javascript onJune 14, 2017

本文为大家分享了JS自动生成动态HTML验证码页面,输入错误自动清空输入框功能,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
<head>
 <title>验证码</title>
<meta charset="utf-8" />
<style type="text/css">
 #code {
  font-family: Arial;
  font-style: italic;
  font-weight: bold;
  border: 0;
  letter-spacing: 2px;
  color: blue;
 }
</style>
<script>
 //产生验证码 
 window.onload = function() {
  createCode()
 }
 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("ctl00_txtcode").value.toUpperCase(); //获取输入框内验证码并转化为大写  
 if(inputCode.length <= 0) { //若输入的验证码长度为0 
  alert("请输入验证码!"); //则弹出请输入验证码 
 } 
 else if(inputCode != code) { //若输入的验证码与产生的验证码不一致时 
  alert("验证码输入错误!"); //则弹出验证码输入错误 
  createCode(); //刷新验证码 
  document.getElementById("ctl00_txtcode").value = "";//清空文本框 
 } else { //输入正确时 
  alert("正在登陆"); //弹出 
  }
 }
</script>
</head>
<body>
 <div>
   <!--时间:2017-01-11 描述:输入框ct100_textcode -->
   <input type="text" id="ctl00_txtcode" />
   <!--时间:2017-01-11 描述:把验证码定义为按钮,点击刷新-->
   <input type="button" id="code" onclick="createCode()" />
   <!--时间:2017-01-11 描述:验证按钮 -->
   <input type="button" value="验证" onclick="validate()" />
  </div>
 </body
</html>

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

Javascript 相关文章推荐
Javascript的IE和Firefox兼容性汇编(zz)
Feb 02 Javascript
javascript两段代码,两个小技巧
Feb 04 Javascript
JavaScript实现将xml转换成html table表格的方法
Apr 17 Javascript
javaScript中slice函数用法实例分析
Jun 08 Javascript
jQuery validate插件实现ajax验证重复的2种方法
Jan 22 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
Jan 29 Javascript
canvas 绘制圆形时钟
Feb 22 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
Nov 20 Javascript
Vue实现商品详情页的评价列表功能
Sep 04 Javascript
VUE实现密码验证与提示功能
Oct 18 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
Dec 25 Javascript
vue 获取url参数、get参数返回数组的操作
Nov 12 Javascript
自定义vue全局组件use使用、vuex的使用详解
Jun 14 #Javascript
详解AngularJS 模块化
Jun 14 #Javascript
JS判断时间段的实现代码
Jun 14 #Javascript
bootstrap选项卡扩展功能详解
Jun 14 #Javascript
zTree树形插件异步加载方法详解
Jun 14 #Javascript
详解Angular2响应式表单
Jun 14 #Javascript
vue过渡和animate.css结合使用详解
Jun 14 #Javascript
You might like
Windows 下的 PHP-PEAR 安装方法
2010/11/20 PHP
Php Image Resize图片大小调整的函数代码
2011/01/17 PHP
基于php iconv函数的使用详解
2013/06/09 PHP
laravel 5 实现模板主题功能(续)
2015/03/02 PHP
php设计模式之中介者模式分析【星际争霸游戏案例】
2020/03/23 PHP
WordPress 插件——CoolCode使用方法与下载
2007/07/02 Javascript
遍历jquery对象的代码分享
2011/11/02 Javascript
jQuery控制cookie过期时间的方法
2015/04/07 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
2015/09/22 Javascript
javascript jquery对form元素的常见操作详解
2016/06/12 Javascript
vue.js整合mint-ui里的轮播图实例代码
2017/12/27 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
2018/10/16 Javascript
200行HTML+JavaScript实现年会抽奖程序
2019/01/22 Javascript
vue iview实现动态新增和删除
2020/06/17 Javascript
[14:03]2017DOTA2亚洲邀请赛开幕式:12神兵演绎水墨中华
2017/04/01 DOTA
利用Tkinter和matplotlib两种方式画饼状图的实例
2017/11/06 Python
opencv与numpy的图像基本操作
2019/03/08 Python
python3.6生成器yield用法实例分析
2019/08/23 Python
python提取xml里面的链接源码详解
2019/10/15 Python
python多维数组分位数的求取方式
2020/03/03 Python
win7上tensorflow2.2.0安装成功 引用DLL load failed时找不到指定模块 tensorflow has no attribute xxx 解决方法
2020/05/20 Python
python Scrapy爬虫框架的使用
2021/01/21 Python
Perfumetrader荷兰:香水、化妆品和护肤品在线商店
2017/09/15 全球购物
Omio美国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/08 全球购物
Rodd & Gunn澳大利亚官网:新西兰男装品牌
2018/09/25 全球购物
捷克建筑材料网上商店:DEK.cz
2021/03/06 全球购物
商务英语专业毕业生自荐信
2013/11/05 职场文书
小组合作学习反思
2014/02/18 职场文书
工程售后服务承诺书
2014/05/21 职场文书
清明节扫墓活动总结
2015/02/09 职场文书
公司年夜饭通知
2015/04/25 职场文书
学校2015年纠风工作总结
2015/05/15 职场文书
网吧管理制度范本
2015/08/05 职场文书
大学生先进个人主要事迹材料
2015/11/04 职场文书
优胜劣汰,强者为王——读《鲁滨逊漂流记》有感
2019/08/15 职场文书
Javascript之datagrid查询详解
2021/09/15 Javascript