js+html制作简单验证码
更新时间：2017年02月16日 08:58:56 投稿：lijiao
这篇文章主要为大家详细介绍了js结合html制作简单验证码的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JavaScript制作验证码的具体代码，供大家参考，具体内容如下
<html>
<head>
<meta charset="utf-8"/>
<title>js验证码</title>
<style type="text/css">
#login{
width:50px;
height:30px;
line-height:30px;
margin:0 auto;
background-color:#eee;
text-align:center;
color:red;
}
p{
width:75px;
height:30px;
margin:0 auto;
}
</style>
</head>
<body>
<p>验证码：</p>
<div id="login" onclick="show()"><a href="#"></a></div>
<script type="text/javascript">
function codes(n){
var a="azxcvbnmsdfghjklqwertyuiopZXCVBNMASDFGHJKLQWERTYUIOP0123456789";
var b="";
for (var i = 0;i<n;i++){
var index=Math.floor(Math.random()*62);
b+=a.charAt(index);
}
return b;
};
function show(){
document.getElementById("login").innerHTML=codes(4);
}
window.onload=show;
</script>
</body>
</html>
另一个js验证码的部分代码：
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值赋给验证码
}
//校验验证码
document.getElementById("Yzm").addEventListener("change",validate);
function validate(){
var inputCode = document.getElementById("Yzm").value.toUpperCase(); //取得输入的验证码并转化为大写
if(inputCode.length <= 0) { //若输入的验证码长度为0
alert("请输入验证码！"); //则弹出请输入验证码
$("#Yzm").focus();
YZM = false;
}
else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时
alert("验证码输入错误！@_@"); //则弹出验证码输入错误
createCode();//刷新验证码
$("#Yzm").val("");<span style="font-family: Arial, Helvetica, sans-serif;">//清空文本框</span>
$("#Yzm").focus();//重新聚焦验证码框
YZM = false;
}
else { //输入正确时
$("#Yzm").blur();//绑定验证码输入正确时要做的事
YZM = true;
}
};
附效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
![javascript打造跨浏览器事件处理机制[Blue-Dream出品]](//img.jbzj.com/images/xgimg/bcimg0.png)
javascript打造跨浏览器事件处理机制[Blue-Dream出品]
由于浏览器兼容的复杂性.打造一个较优的跨浏览器事件处理函数.不是件容易的事情.各大类库也都通过了种种方案去抽象一个庞大的事件机制.2010-07-07
这篇文章主要介绍了javascript父子页面通讯的实现方法,实例分析了javascript针对父子页面通讯的原理与相关实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
JavaScript 中的引用类型Date 和RegExp的详细介绍
这篇文章主要介绍了JavaScript中的引用类型Date和RegExp的详细介绍,引用值(或者对象)是某个特定引用类型的实例,下文相关介绍，需要的小伙伴可以参考一下2022-07-07
这款时世界末日倒计时源代码，程序上有JS控制器,是用于网页中显示的倒计时器，自己可以设定世界末日的开始时间，网页倒计时世界末日源代码直接复制就可以用2012-12-12
js如何删除对象/数组中null、undefined、空对象及空数组实例代码
JS中数组是我们较为常用的一种数据结构,下面这篇文章主要给大家介绍了关于js如何删除对象/数组中null、undefined、空对象及空数组的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
本文主要介绍了利用JS轻松实现获取表单数据。方法有别于原始的做法，大家可以试着找原始做法与本文所说方法之间的区别。有兴趣的朋友可以看下，希望对大家有所帮助2016-12-12
微信小程序使用ucharts在小程序中加入横屏展示功能的全过程
这篇文章主要给大家介绍了关于微信小程序使用ucharts在小程序中加入横屏展示功能的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用微信小程序具有一定的参考学习价值,需要的朋友可以参考下2022-09-09
我们知道js有很多事件,事件说白了就是 鼠标点击,鼠标移动 ,键盘打字什么的这些人为的操作,本文给大家介绍JS中function(e) 其中的e代表什么意思,感兴趣的朋友一起看看吧2024-01-01
相信大家都知道在SVG中添加文本是使用text元素。但这个元素不能够自动换行，超出的部分就显示不出来了，怎么办呢？下面通过这篇文章来给大家详细介绍下实现的过程。2016-10-10
最近在写一个微信小程序,有一个需求是点击一个按钮后,出现一个输入框,然后根据用户的输入再进行操作,所以这篇文章主要给大家介绍了关于微信小程序实现弹出输入框的相关资料,需要的朋友可以参考下2023-09-09
![javascript打造跨浏览器事件处理机制[Blue-Dream出品]](http://img.jbzj.com/images/xgimg/bcimg0.png)
最新评论