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 相关文章推荐
常用参考资料(手册)下载或者链接
Jul 22 Javascript
改变状态栏文字的js代码
Jun 13 Javascript
Javascript的闭包详解
Dec 26 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
Feb 02 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
May 26 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
Dec 08 Javascript
Javascript中click与blur事件的顺序详析
Apr 25 Javascript
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
JS实现table表格固定表头且表头随横向滚动而滚动
Oct 26 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
May 06 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
微信小程序实现左滑动删除效果
Mar 30 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 is_dir() 判断给定文件名是否是一个目录
2010/05/10 PHP
ThinkPHP CURD方法之page方法详解
2014/06/18 PHP
PHP实现的多彩标签效果代码分享
2014/08/21 PHP
PHP使用strstr()函数获取指定字符串后所有字符的方法
2016/01/07 PHP
PHP判断是手机端还是PC端 PHP判断是否是微信浏览器
2017/03/15 PHP
设定php简写功能的方法
2019/11/28 PHP
FLASH 广告之外的链接
2008/12/16 Javascript
再谈javascript面向对象编程
2012/03/18 Javascript
jquery ajaxSubmit 异步提交的简单实现
2014/02/28 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
2017/08/08 Javascript
浅谈vuex的基本用法和mapaction传值问题
2019/11/08 Javascript
vue实现公共方法抽离
2020/07/31 Javascript
[02:17]《辉夜杯》TRG战队巡礼
2015/10/26 DOTA
python实现从ftp服务器下载文件的方法
2015/04/30 Python
Python使用django搭建web开发环境
2017/06/09 Python
Python3 replace()函数使用方法
2018/03/19 Python
Python参数解析模块sys、getopt、argparse使用与对比分析
2019/04/02 Python
在 Python 中接管键盘中断信号的实现方法
2020/02/04 Python
python自动脚本的pyautogui入门学习
2020/04/01 Python
python对指定字符串逆序的6种方法(小结)
2020/04/02 Python
如何用python处理excel表格
2020/06/09 Python
什么是Python包的循环导入
2020/09/08 Python
Python爬虫实现selenium处理iframe作用域问题
2021/01/27 Python
索尼巴西商店:Sony巴西
2019/06/21 全球购物
捷克多品牌在线时尚商店:ANSWEAR.cz
2020/10/03 全球购物
应届生妇产科护士求职信
2013/10/27 职场文书
自荐信格式
2013/12/01 职场文书
十月份红领巾广播稿
2014/01/22 职场文书
银行优秀员工事迹
2014/02/06 职场文书
应聘文员自荐信范文
2014/03/11 职场文书
项目申请汇报材料
2014/08/16 职场文书
社区灵活就业证明
2014/11/03 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书
2015年幼儿园个人工作总结
2015/04/25 职场文书
python数字类型和占位符详情
2022/03/13 Python
一行Python命令实现批量加水印
2022/04/07 Python