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 相关文章推荐
Some tips of wmi scripting in jscript (1)
Apr 03 Javascript
Add Formatted Text to a Word Document
Jun 15 Javascript
javascript 对象比较实现代码
Apr 27 Javascript
js 数值项目的格式化函数代码
May 14 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
Jun 20 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
Sep 10 Javascript
javascript实现控制浏览器全屏
Mar 30 Javascript
深入理解jQuery之防止冒泡事件
May 24 Javascript
JS中with的替代方法与String中的正则方法详解
Dec 23 Javascript
详解Angular路由 ng-route和ui-router的区别
May 22 Javascript
vue将单页面改造成多页面应用的方法
Nov 25 Javascript
vue实现的仿淘宝购物车功能详解
Jan 27 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源码加密 仿微盾PHP加密专家(PHPCodeLock)
2010/05/06 PHP
php匹配字符中链接地址的方法
2014/12/22 PHP
Laravel执行migrate命令提示:No such file or directory的解决方法
2016/03/16 PHP
php 三大特点:封装,继承,多态
2017/02/19 PHP
JavaScript 序列化对象实现代码
2009/12/18 Javascript
jquery实现tr元素的上下移动示例代码
2013/12/20 Javascript
javascript创建createXmlHttpRequest对象示例代码
2014/02/10 Javascript
JavaScript程序员应该知道的45个实用技巧
2014/03/04 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
2016/06/12 Javascript
javascript中的深复制详解及实例分析
2016/12/29 Javascript
bootstrap IE8 兼容性处理
2017/03/22 Javascript
深入理解requireJS-实现一个简单的模块加载器
2018/01/15 Javascript
Vue EventBus自定义组件事件传递
2018/06/25 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
2018/11/21 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
2019/05/10 Javascript
Vue 中使用富文本编译器wangEditor3的方法
2019/09/26 Javascript
JavaScript设计模式之观察者模式与发布订阅模式详解
2020/05/07 Javascript
ES2020 已定稿,真实场景案例分析
2020/05/25 Javascript
通过实例解析jQ Ajax操作相关原理
2020/09/23 Javascript
vue+vant实现购物车全选和反选功能
2020/11/17 Vue.js
js实现移动端轮播图滑动切换
2020/12/21 Javascript
在Python中使用全局日志时需要注意的问题
2015/05/06 Python
Python 如何访问外围作用域中的变量
2016/09/11 Python
shelve  用来持久化任意的Python对象实例代码
2016/10/12 Python
Python中shutil模块的学习笔记教程
2017/04/04 Python
python中时间模块的基本使用教程
2019/05/14 Python
django 信号调度机制详解
2019/07/19 Python
python3 实现函数写文件路径的正确方法
2019/11/27 Python
浅谈python的elementtree模块处理中文注意事项
2020/03/06 Python
python 实现逻辑回归
2020/12/30 Python
Ruby如何创建一个线程
2013/03/10 面试题
特种设备安全管理制度
2015/08/06 职场文书
珍爱生命主题班会
2015/08/13 职场文书
大学军训口号大全
2015/12/24 职场文书
java固定大小队列的几种实现方式详解
2021/07/15 Java/Android
Django模型层实现多表关系创建和多表操作
2021/07/21 Python