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 parseInt与Number函数的区别
Jan 21 Javascript
javascript定时变换图片实例代码
Mar 17 Javascript
Jquery 动态生成表格示例代码
Dec 24 Javascript
JS实现仿新浪黄色经典滑动门效果代码
Sep 27 Javascript
jQuery实现简单的点赞效果
May 29 Javascript
教你用javascript实现随机标签云效果_附代码
Mar 16 Javascript
原生JS实现首页进度加载动画
Sep 14 Javascript
从源码看angular/material2 中 dialog模块的实现方法
Oct 18 Javascript
vue-cli常用设置总结
Feb 24 Javascript
JS继承实现方法及优缺点详解
Sep 02 Javascript
WebPack工具运行原理及入门教程
Dec 02 Javascript
JavaScript中10个Reduce常用场景技巧
Jun 21 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 mysql数据库操作类
2008/06/04 PHP
浅析十款PHP开发框架的对比
2013/07/05 PHP
基于php双引号中访问数组元素报错的解决方法
2018/02/01 PHP
一些常用的JS功能函数(2009-06-04更新)
2009/06/04 Javascript
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
2010/05/25 Javascript
jQuery学习笔记之jQuery选择器的使用
2010/12/22 Javascript
js css后面所带参数含义介绍
2013/08/18 Javascript
js的toLowerCase方法用法实例
2015/01/27 Javascript
JavaScript操作Oracle数据库示例
2015/03/06 Javascript
ES6新特征数字、数组、字符串
2016/10/01 Javascript
基于jQuery实现的打字机效果
2017/01/16 Javascript
nodejs的压缩文件模块archiver用法示例
2017/01/18 NodeJs
three.js实现围绕某物体旋转
2017/01/25 Javascript
js中apply()和call()的区别与用法实例分析
2018/08/14 Javascript
koa+mongoose实现简单增删改查接口的示例代码
2019/05/13 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
Vue项目移动端滚动穿透问题的实现
2020/05/19 Javascript
JavaScript判断数据类型有几种方法及区别介绍
2020/09/02 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
2020/10/29 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
2020/12/14 Vue.js
[46:14]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第一场 12.11
2020/12/16 DOTA
python利用有道翻译实现&quot;语言翻译器&quot;的功能实例
2017/11/14 Python
python jieba分词并统计词频后输出结果到Excel和txt文档方法
2018/02/11 Python
好的Python培训机构应该具备哪些条件
2018/05/23 Python
Python嵌套列表转一维的方法(压平嵌套列表)
2018/07/03 Python
django-rest-framework解析请求参数过程详解
2019/07/18 Python
Python的互斥锁与信号量详解
2019/09/12 Python
Python 获取项目根路径的代码
2019/09/27 Python
用openCV和Python 实现图片对比,并标识出不同点的方式
2019/12/19 Python
Python正则表达式高级使用方法汇总
2020/06/18 Python
土耳其玩具商店:Toyzz Shop
2019/08/02 全球购物
AssertionError 跟一下那个类是 “is – a”的关系
2012/02/21 面试题
珠宝店促销方案
2014/03/21 职场文书
幼儿园大班毕业评语
2014/12/31 职场文书
毕业论文致谢信
2015/05/14 职场文书
Python中三种花式打印的示例详解
2022/03/19 Python