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 相关文章推荐
js正文内容高亮效果的实现方法
Jun 30 Javascript
使用node.js 获取客户端信息代码分享
Nov 26 Javascript
window.onload与$(document).ready()的区别分析
May 30 Javascript
jQuery的ajax下载blob文件
Jul 21 Javascript
基于jQuery实现淡入淡出效果轮播图
Jul 31 Javascript
JS中script标签defer和async属性的区别详解
Aug 12 Javascript
Angular排序实例详解
Jun 28 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
Aug 08 Javascript
angularJs中$http获取后台数据的实例讲解
Aug 08 Javascript
JS实现数组的增删改查操作示例
Aug 29 Javascript
关于vue状态过渡transition不起作用的原因解决
Apr 09 Javascript
node.JS事件机制与events事件模块的使用方法详解
Feb 06 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的构造方法,析构方法和this关键字详细介绍
2013/10/22 PHP
PHP实现的敏感词过滤方法示例
2019/03/06 PHP
仅img元素创建后不添加到文档中会执行onload事件的解决方法
2011/07/31 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
2013/01/23 Javascript
JavaScript实现的图像模糊算法代码分享
2014/04/22 Javascript
30个经典的jQuery代码开发技巧
2014/12/15 Javascript
常用的jQuery前端技巧收集
2014/12/24 Javascript
jQuery向后台传入json格式数据的方法
2015/02/13 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
2015/08/24 Javascript
bootstrap导航、选项卡实现代码
2016/12/28 Javascript
Angularjs单选改为多选的开发过程及问题解析
2017/02/17 Javascript
Node.js调试技术总结分享
2017/03/12 Javascript
Node之简单的前后端交互(实例讲解)
2017/11/14 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
2018/11/13 Javascript
基于JavaScript实现每日签到打卡轨迹功能
2018/11/29 Javascript
详解基于webpack&amp;gettext的前端多语言方案
2019/01/29 Javascript
手把手教你使用TypeScript开发Node.js应用
2019/05/06 Javascript
vue实现分页栏效果
2019/06/28 Javascript
[49:08]Secret vs VP 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[09:13]DOTA2-DPC中国联赛 正赛 Ehome vs Magma 选手采访 1月19日
2021/03/11 DOTA
python元组操作实例解析
2014/09/23 Python
python3新特性函数注释Function Annotations用法分析
2016/07/28 Python
Python实现基本数据结构中队列的操作方法示例
2017/12/04 Python
Django实现分页功能
2018/07/02 Python
Django给admin添加Action的步骤详解
2019/05/01 Python
Python打包模块wheel的使用方法与将python包发布到PyPI的方法详解
2020/02/12 Python
Django微信小程序后台开发教程的实现
2020/06/03 Python
CSS3属性background-size使用指南
2014/12/09 HTML / CSS
护士实习鉴定范文
2013/12/22 职场文书
机械设计职业生涯规划书
2013/12/27 职场文书
电脑专业个人求职信范文
2014/02/04 职场文书
工作分析计划书
2014/04/30 职场文书
优秀毕业生求职信
2014/06/05 职场文书
大学生撤销处分思想汇报
2014/09/12 职场文书
班主任开场白
2015/06/01 职场文书
python画条形图的具体代码
2022/04/20 Python