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自定义的函数
Aug 05 Javascript
关于恒等于(===)和非恒等于(!==)
Aug 20 Javascript
jQuery与Ajax以及序列化
Feb 01 Javascript
全面了解javascript三元运算符
Jun 27 Javascript
JS实现根据密码长度显示安全条功能
Mar 08 Javascript
微信小程序动态的加载数据实例代码
Apr 14 Javascript
浅谈angular4生命周期钩子
Sep 05 Javascript
webpack配置之后端渲染详解
Oct 26 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
Jan 30 Javascript
layui之table checkbox初始化时选中对应选项的方法
Sep 02 Javascript
javascript实现滚轮轮播图片
Dec 13 Javascript
使用Typescript开发微信小程序的步骤详解
Jan 12 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 XPath对XML文件查找及修改实现代码
2011/07/27 PHP
linux使用crontab实现PHP执行计划定时任务
2014/05/10 PHP
ThinkPHP中的三大自动简介
2014/08/22 PHP
PHP入门教程之字符串处理技巧总结(转换,过滤,解析,查找,截取,替换等)
2016/09/11 PHP
php实现有序数组打印或排序的方法【附Python、C及Go语言实现代码】
2016/11/10 PHP
PHP使用Nginx实现反向代理
2017/09/20 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
PHP经典设计模式之依赖注入定义与用法详解
2019/05/21 PHP
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
2012/01/20 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
2015/03/04 Javascript
jquery无限级联下拉菜单简单实例演示
2015/11/23 Javascript
Angular表单验证实例详解
2016/10/20 Javascript
微信小程序 使用canvas制作K线实例详解
2017/01/12 Javascript
简单实现js点击展开二级菜单功能
2017/05/16 Javascript
JS实现上传图片实时预览功能
2017/05/22 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
2018/01/22 jQuery
JS实现数组的增删改查操作示例
2018/08/29 Javascript
Python中多线程thread与threading的实现方法
2014/08/18 Python
Python中处理字符串之endswith()方法的使用简介
2015/05/18 Python
利用python3随机生成中文字符的实现方法
2017/11/24 Python
TF-IDF与余弦相似性的应用(一) 自动提取关键词
2017/12/21 Python
tensorflow建立一个简单的神经网络的方法
2018/02/10 Python
Python装饰器的执行过程实例分析
2018/06/04 Python
利用Python读取txt文档的方法讲解
2018/06/23 Python
python的常用模块之collections模块详解
2018/12/06 Python
详解Python中的内建函数,可迭代对象,迭代器
2019/04/29 Python
在django中实现页面倒数几秒后自动跳转的例子
2019/08/16 Python
opencv+python实现鼠标点击图像,输出该点的RGB和HSV值
2020/06/02 Python
使用css3制作登录表单的步骤
2014/04/07 HTML / CSS
征婚广告词
2014/03/17 职场文书
商铺消防安全责任书
2014/07/29 职场文书
保送生自荐信范文
2015/03/26 职场文书
2016年教师学习教师法心得体会
2016/01/20 职场文书
Python 详解通过Scrapy框架实现爬取CSDN全站热榜标题热词流程
2021/11/11 Python
Shell中的单中括号和双中括号的用法详解
2022/12/24 Servers