JS自动生成动态HTML验证码页面
更新时间：2017年06月14日 17:30:42 作者：ITCSJ
这篇文章主要介绍了JS自动生成动态HTML验证码页面，输入错误自动清空输入框的功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了ES6教程之for循环和Map,Set用法,结合实例形式分析了ECMAScript6中for循环和Map,Set基本概念、功能、使用方法与相关注意事项,需要的朋友可以参考下2017-04-04
在这篇文章中，我打算跟大家总结一下关于JavaScript反调试技巧方面的内容。值得一提的是，其中有些方法已经被网络犯罪分子广泛应用到恶意软件之中了,需要的朋友可以参考下2018-03-03
这篇文章主要为大家介绍了SVG快速构建马赛克效果示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
这篇文章主要为大家详细介绍了JavaScript生成图形验证码的相关代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
这篇文章主要介绍了js实现点击图片在屏幕中间弹出放大效果,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-09-09
本文给大家汇总介绍了集中常见的功能，十分的实用，有需要的小伙伴可以参考下。2015-06-06
这篇文章主要介绍了javascript表格的渲染组件的相关资料,需要的朋友可以参考下2015-07-07
这篇文章主要和大家分享一个微信小程序的示例代码，可以实现手写签名的效果。文中的示例代码讲解详细，感兴趣的小伙伴可以了解一下2022-02-02
这篇文章主要为大家详细介绍了axios实现简单文件上传功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
本篇文章主要介绍了详解webpack babel的配置，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
最新评论