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 相关文章推荐
EXT窗口Window及对话框MessageBox
Jan 27 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
Mar 29 Javascript
用队列模拟jquery的动画算法实例
Jan 20 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
Dec 23 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
Apr 16 Javascript
JS实现保留n位小数的四舍五入问题示例
Aug 03 Javascript
Bootstrap轮播图学习使用
Feb 10 Javascript
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
在vue项目中,使用axios跨域处理
Mar 07 Javascript
JavaScript刷新页面的几种方法总结
Mar 28 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
Dec 02 Javascript
vue实现单一筛选、删除筛选条件
Oct 26 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
PHP URL地址获取函数代码(端口等) 推荐
2010/05/15 PHP
javascript 小型动画组件与实现代码
2010/06/02 PHP
PHP的反射类ReflectionClass、ReflectionMethod使用实例
2014/08/05 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
用tip解决Ext列宽度不够的问题
2008/12/13 Javascript
Js如何判断客户端是PC还是手持设备简单分析
2012/11/22 Javascript
实现动画效果核心方式的js代码
2013/09/27 Javascript
jQuery实现新消息在网页标题闪烁提示
2015/06/23 Javascript
jQuery的position()方法详解
2015/07/19 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
2015/08/24 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
2016/05/24 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
2016/10/25 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
2017/01/04 Javascript
jQuery源码分析之init的详细介绍
2017/02/13 Javascript
AngularJS封装$http.post()实例详解
2017/05/06 Javascript
vue动画打包后失效问题的解决方法
2018/09/18 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
2019/04/30 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
2019/05/10 Javascript
vue实现购物车案例
2020/05/30 Javascript
微信小程序轮播图swiper代码详解
2020/12/01 Javascript
原生js拖拽功能制作滑动条实例代码
2021/02/05 Javascript
利用Python中的输入和输出功能进行读取和写入的教程
2015/04/14 Python
Python内建数据结构详解
2016/02/03 Python
使用python实现生成用户信息
2017/03/20 Python
Python数据预处理之数据规范化(归一化)示例
2019/01/08 Python
python执行scp命令拷贝文件及文件夹到远程主机的目录方法
2019/07/08 Python
python与C、C++混编的四种方式(小结)
2019/07/15 Python
css3实现超炫风车特效
2014/11/12 HTML / CSS
RentCars.com巴西:汽车租赁网站
2016/08/22 全球购物
竟聘演讲稿范文
2013/12/31 职场文书
干部行政关系介绍信
2014/01/17 职场文书
数字化校园建设方案
2014/05/03 职场文书
毕业设计论文评语
2014/12/31 职场文书
学子宴致辞大全
2015/07/27 职场文书
大学生十八大感想
2015/08/11 职场文书
月考总结与反思
2015/10/22 职场文书