我们在登录一个网站的时候，往往为了安全性 都会让我们输入验证码，上个阶段做项目的时候，我们也有研究过验证码，做了一个比较简单的，
最近这记性着实差，赶紧记录下来，防止到最后都忘干净了。。。。
下面是我们用到的html部分的代码：
<div style="margin-left:510px;margin-top:10px;margin-bottom:125px"> <div> <span style="color:white; font-weight:bolder; font-size:18px">工号：</span> <input type="text" class="dl" id="uid"/> <span style="color:white; font-weight:bold; font-size:18px" class="ts" id="uidts"></span> </div> <br /> <div> <span style="color:white; font-weight:bolder; font-size:18px">密码：</span> <input type="password" class="dl" id="pwd" /> <span style="color:white;font-weight:bold; font-size:18px" class="ts" id="pwdts"></span> </div> <br /> <div> <span style="color:white; font-weight:bolder; font-size:18px;margin-left: -2.5%;">验证码：</span> <input type="text" class="dl" id="sryzm" /> <span id="ysyzm" style="color:white; font-weight:bolder; font-size:18px; min-70px"></span> <input id="sxyzm" type="button" class="btn btn-default" value="刷新" style="font-weight:200" /> <span style="color:white;font-weight:bold; font-size:18px" class="yzmts" id="yzmts"></span> <br /><br /> </div> <div style="clear:both"></div> <div style="margin-left:100px;"> <input type="button" class="btn btn-default" id="btn" value="登录" style="font-weight:bolder" /> </div> </div>
把登录和注册都写入了，我这里只展示一下验证码部分的图片
如图所示：
下面就是jquery部分了，当然是用jquery必须要引入jquery包，我只是为了做个记录，就不多写了
var ysyzm = ""; var sryzm = ""; $(document).ready(function(e) { var str = "qgfh12kjQWFEfEW3EsaeWE544ssgW6GGGgu5mWEE6777EEWW7b67fec"; var n = 5, s = ""; for(var i = 0; i < n; i++){ var rand = Math.floor(Math.random() * str.length); s += str.charAt(rand); } $("#ysyzm").html(s); ysyzm = s; $("#sxyzm").click(function(){ s=""; for(var i = 0; i < n; i++){ var rand = Math.floor(Math.random() * str.length);//指定选取位置 s += str.charAt(rand);//指定选取字符 /*random() 方法可返回介于 0 ~ 1 之间的一个随机数。 Math.floor 数学函数，求一个浮点数的地板，就是求一个最接近它的整数，它的值小于或等于这个浮点数。 charAt(int index)方法是一个能够用来检索特定索引下的字符的String实例的方法. charAt()方法返回指定索引位置的char值。索引范围为0~length()-1. 如: str.charAt(0)检索str中的第一个字符,str.charAt(str.length()-1)检索最后一个字符.*/ } $("#ysyzm").html(s); ysyzm = s; });
写到这里的话，就是简单的验证码可以用了，但是区分大小写的，但是我们看到的有很多的网站验证码是不区分大小写的，也是为了增加客户的体验
那么我们在点登陆的时候 就要处理一下 验证码了
$("#btn").click(function(){
sryzm = $("#sryzm").val();
//取用户名和密码
var a = $("#uid").val();
var b = $("#pwd").val();
//alert(ysyzm);alert(sryzm);
var aa = ysyzm.toLowerCase();
var bb = sryzm.toLowerCase();
if(aa==bb)
{
$.ajax({
url:"loginchuli.php",
data:{a:a,b:b},
type:"POST",
dataType:"TEXT",
success:function(data){
if(data.trim()=="0")
{
window.location.href="kuangjia.php";
}
else if(data.trim()=="011")
{
window.location.href="../club1/kuangjia.php";
}
else if(data.trim()=="1")
{
alert(data);
$("#uidts").html(" 请输入用户名！");
$(".dl").css("border-color","");
$("#pwdts").html("");
$("#uid").css("border-color","#990000");
}
else if(data.trim()=="2")
{
alert(data);
$("#pwdts").html(" 请输入密码！");
$(".dl").css("border-color","");
$("#uidts").html("");
$("#pwd").css("border-color","black");
}
else if(data.trim()=="3")
{
alert(data);
$("#uidts").html(" 请输入用户名！");
$(".dl").css("border-color","#990000");
$("#pwdts").html(" 请输入密码！");
}
else
{
alert(data);
$(".ts").html(" 用户名或密码错误！");
$(".dl").css("border-color","black");
}
}
});
}
else
{
$("#yzmts").html("您输入的验证码有误！");
}
})
});
处理页面的代码如下：
<?php session_start(); $num = $_POST["a"]; $pwd = $_POST["b"]; $_SESSION["num"]=$num; include("DBDA.class.php"); $db = new DBDA(); $sql = "select pwd from login where num='{$num}'"; $sql1 = "select code from login where num='{$num}'"; $zwdh = $db->StrQuery($sql1); $mm = $db->StrQuery($sql); if($mm == $pwd && $pwd!="") { $_SESSION["zwdh"]=$zwdh; echo "0"; if($num=="n007") { echo "11"; } } else if($uid=="" && $pwd=="") { echo "3"; } else if($uid=="" || $pwd=="") { if($uid=="") { echo "1"; } else if($pwd=="") { echo "2"; } } else { echo "4"; }
这样一个完整的登录就完成了