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让Html中特殊字符不被转义
Nov 05 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
Nov 28 Javascript
Javascript 运动中Offset的bug解决方案
Dec 24 Javascript
基于jquery插件编写countdown计时器
Jun 12 Javascript
BootStrap table表格插件自适应固定表头(超好用)
Aug 24 Javascript
JS匿名函数实例分析
Nov 26 Javascript
自动适应iframe右边的高度
Dec 22 Javascript
JavaScript对象封装的简单实现方法(3种方法)
Jan 03 Javascript
基于React实现表单数据的添加和删除详解
Mar 14 Javascript
js实现华丽的九九乘法表效果
Mar 29 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
vue路由权限校验功能的实现代码
Jun 07 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的分页功能
2007/03/21 PHP
smarty内置函数foreach用法实例
2015/01/22 PHP
PHP 接入支付宝即时到账功能
2016/09/18 PHP
JavaScript实现Sleep函数的代码
2007/03/04 Javascript
可以用鼠标拖动的DIV实现思路及代码
2013/10/21 Javascript
js/jQuery简单实现选项卡功能
2014/01/02 Javascript
浅谈JavaScript字符集
2014/05/22 Javascript
JavaScript作用域链示例分享
2014/05/27 Javascript
JS解析XML实例分析
2015/01/30 Javascript
iframe中子父类窗口调用JS的方法及注意事项
2015/08/25 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
2016/02/18 Javascript
js实现自动轮换选项卡
2017/01/13 Javascript
JS组件系列之JS组件封装过程详解
2017/04/28 Javascript
关于vue-router路径计算问题
2017/05/10 Javascript
解决vue里碰到 $refs 的问题的方法
2017/07/13 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
Vue调试神器vue-devtools安装方法
2017/12/12 Javascript
jquery 验证用户名是否重复代码实例
2019/05/14 jQuery
vue单文件组件无法获取$refs的问题
2020/06/24 Javascript
小程序点餐界面添加购物车左右摆动动画
2020/09/23 Javascript
[09:47]2018DOTA2亚洲邀请赛4.5SOLO赛 No[o]ne vs Sumail
2018/04/06 DOTA
Python将阿拉伯数字转换为罗马数字的方法
2015/07/10 Python
Python3.X 线程中信号量的使用方法示例
2017/07/24 Python
PyTorch中 tensor.detach() 和 tensor.data 的区别详解
2020/01/06 Python
Python使用sys.exc_info()方法获取异常信息
2020/07/23 Python
Python读取多列数据以及用matplotlib制作图表方法实例
2020/09/23 Python
西班牙国家航空官方网站:Iberia
2017/11/16 全球购物
Nice Kicks网上商店:ShopNiceKicks.com
2018/12/25 全球购物
2014年幼儿园植树节活动方案
2014/03/02 职场文书
西式结婚主持词
2014/03/14 职场文书
新年晚会主持词
2014/03/24 职场文书
学术会议邀请函
2015/01/30 职场文书
工程服务质量承诺书
2015/04/29 职场文书
Python基础数据类型tuple元组的概念与用法
2021/08/02 Python
通过Python把学姐照片做成拼图游戏
2022/02/15 Python
Beekeeper Studio开源数据库管理工具比Navicat更炫酷
2022/06/21 数据库