jQuery实现一个简单的验证码功能
更新时间：2017年06月26日 09:47:21 作者：wal1314520
今天给大家分享一个基于jquery实现的简单验证码功能，代码简单易懂，非常不错，具有参考借鉴价值，需要的的朋友参考下吧
在学习jQuery过程中，写的一个简单的验证码的小例子，记载下来，方便以后借鉴补充，源码如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div{
background-color:blue;
width:200px;
height:100px;
font-size:35px;
}
</style>
<script src="../jquery-1.8.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
//我写的验证码
//验证码
var code;
function createCode(){
code = '';//首先默认code为空字符串
var codeLength = 4;//设置长度，这里看需求，我这里设置了4
var codeV = $("div");
//设置随机字符
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++){ //循环codeLength 我设置的4就是循环4次
var index = Math.floor(Math.random()*36); //设置随机数范围,这设置为0 ~ 36
code += random[index]; //字符串拼接 将每次随机的字符 进行拼接
}
codeV.text(code);//将拼接好的字符串赋值给展示的Value
}
//页面开始加载验证码
createCode();
//验证码Div加载点击事件
$("div").bind('click',function() {
createCode();
});
//下面就是判断是否==的代码，无需解释
$("#b1").bind('click',function() {
var oValue = $("#in1").val().toUpperCase();
$("#l1").html("");
if(oValue ==""){
$("#l1").html("<font color='red'>请输入验证码</font>");
}else if(oValue != code){
$("#l1").html("<font color='red'>验证码不正确，请重新输入</font>");
oValue = "";
createCode();
}else{
$("#l1").html("<font color='blue'>验证码正确</font>");
}
});
});
</script>
</head>
<body>
<center>
<label >请输入验证码：</label><input type="text" id="in1" value="" placeholder="请输入验证码">
<button id="b1">点击验证</button>
<div></div><label id="l1"></label>
</center>
</body>
</html>
相关文章
这篇文章主要介绍了jQuery实现的别踩白块小游戏,结合实例形式详细分析了jQuery针对页面元素的计算、判定、动态操作相关实现技巧,需要的朋友可以参考下2019-01-01
jQuery Easyui datagrid/treegrid 清空数据
这篇文章主要介绍了jQuery Easyui datagrid/treegrid 清空数据的相关资料2016-07-07
jQuery插件slicebox实现3D动画图片轮播切换特效
Slicebox是一款效果非常华丽的jquery和css3 3d幻灯片插件。Slicebox幻灯片插件能够将图片切片，然后做3d旋转。Slicebox幻灯片插件共有4种效果，视觉冲击感非常强。2015-04-04
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
在我们对一个dom添加mouseover和mouseout时，也就是jquery的hover事件，如果该dom有子元素，鼠标移到子元素时会触发mouseout事件，但往往实际情况我们希望在子元素上不触发out事件2011-12-12
jQuery Lightbox（balupton版）图片展示插件demo2010-04-04
本文给大家分享了几个常用的jQuery代码，十分的简单实用，有需要的小伙伴可以参考下。2015-07-07
这篇文章主要介绍了jquery+CSS3实现淘宝移动网页菜单效果,实例分析了jquery操作页面样式动态变换及热区的选择技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
这篇文章主要给大家分享了jQuery实现根据类型自动显示和隐藏表单的代码，非常的简单实用，仅仅10行代码，推荐给大家，希望能给大家一些提示。2015-03-03
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
今天看到了MK的这篇文章，然后其中的Colortip这个jQuery插件引起了我的注意，倒不是因为它新奇，而是我之前看到过，没想到它就成了2010年最佳之一了2010-12-12
jQuery选择头像并实时显示的代码，以前脚本之家用js实现了，这里使用jquery实现的。2010-06-06
最新评论