html自动生成验证码,JS自动生成动态HTML验证码页面

本文为大家分享了JS自动生成动态HTML验证码页面，输入错误自动清空输入框功能，供大家参考，具体内容如下

验证码

#code {

font-family: Arial;

font-style: italic;

font-weight: bold;

border: 0;

letter-spacing: 2px;

color: blue;

}

//产生验证码

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("正在登陆"); //弹出

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

html自动生成验证码,JS自动生成动态HTML验证码页面相关推荐

php读取js验证码,js实现获取短信验证码实例
本文主要和大家分享js实现获取短信验证码实例,主要以代码的形式和大家分享,希望能帮助到大家.$(".form-data").delegate(".send",& ...
html给手机号发送验证码,js如何实现手机发送验证码功能
js如何实现手机发送验证码功能发布时间:2021-06-21 12:24:46 来源:亿速云阅读:82 作者:小新这篇文章将为大家详细讲解有关js如何实现手机发送验证码功能,小编觉得挺实用的,因 ...
html 自动触发事件,js自动触发事件自定义事件
在有些情况下,我们需要程序逻辑自动触发元素的事件,例如js提供了click(), form提供了reset(),submit()等方法!在jquery中提供了trigger()方法帮助我们自动触发事件 ...
html怎么随机生成字母,JS简单生成由字母数字组合随机字符串示例_气质_前端开发者...
本文实例讲述了前言最近有个需求,是需要生成3-32位长度的字母数字组合的随机字符串,另一个是生成43位随机字符串. 方法一奇妙的写法 Math.random().toString(36).sub ...
关于webStrom-11.1配置less且自动生成.css和自动压缩为.min.css/.min.js
网上看过很多配置思路,自己总结了以下, 就把我个人配置的顺序以及材料分享下,webstrom以下简称WB 1.配置less需要安装nodejs,自行安装.因为要用到npm.我是直接把npm解压到C盘根 ...
织梦手机端静态页生成插件带自动更新
织梦静态页面的好处多多,既有利于抓取收录而且打开速度也比较快,节省服务器CPU的时间,因此许多大型网站也进行静态化.由于dedecmsv5.7sp2版本没有提供手机端移动端网站静态生成的功能,今天分享 ...
在JSP中动态生成随机验证码，登录时后台校验验证码，以及如何避免同一个验证码被重复提交爆破密码...
只需几步就可以生成动态随机的验证码,最终效果如下图: 一前台显示页面login.jsp 其中验证码显示的是一张图片,链接指向的是生成验证码的servlet,同时点击图片后触发changeImg()这 ...
Art Blocks：生成艺术的自动售货机
撰文:程天一来源:海外独角兽代码和软件已经占据了我们的生活,但是使用代码创作出的生成艺术在过去很多年中始终被低估.2021 年夏天开始的 NFT 和 Art Blocks 热潮改变了这一点. Ar ...
输入关键词自动生成文章-免费自动输入关键词自动生成文章器
输入关键词自动生成文章,什么是输入关键词自动生成文章?例:你输入什么关键词 '装修'免费工具会自动生成一篇跟装修相关的文章,该免费工具还支持:自动关键词文章生成+文章自动采集+伪原创+自动发布+自动推 ...

html自动生成验证码,JS自动生成动态HTML验证码页面

html自动生成验证码,JS自动生成动态HTML验证码页面相关推荐

最新文章

热门文章