cms内容管理系统-登陆验证码js实现方式
1.在登陆表单中增加一个input标签
<div class="form-group">
<label class="control-label"><a href="javascrpit:;" id="d2" ><font color="green">看我不爽就换一个</font></a></label><font id="co" size="3px" color="pink"></font> <input class="form-control"
type="text" id="random" name="random" placeholder="请输入验证码">
</div>
2.定义一个方法来获取字符数字验证码
function randomString(len, charSet) {
charSet = charSet || 'ABCDEFGHJKLMNOPQRSTUVWXYZabcdefghjkmnopqrqstuvwxyz0123456789';
var randomString = '';
for (var i = 0; i < len; i++) {
var randomPoz = Math.floor(Math.random() * charSet.length);
randomString += charSet.substring(randomPoz,randomPoz+1);
}
return randomString;
}
3.页面加载就要获取验证码 4表示获取4位数的验证码
$("#co").html(randomString(4, ''));
4.获取验证码 绑定事件,单击就更换验证码
$("#d2").on("click",function(){ $("#co").html(randomString(4, ''));
})
5.给提交按钮绑定事件
$("#loginButton").click(function(){
var ran=$("#random").val()
var mm=$("#co").html();
//login();
//验证码的值正确才进行登陆验证操作
if(ran==mm){
login();
} else{
$("#loginMessage").html("<font color='red'>验证码错误</font>")
}
})
4.回车也要判断验证码是否正确
//绑定在整个界面都生效
$(document).on("keypress",function(e){
var ran=$("#random").val()
var mm=$("#co").html();
//login();
//验证码的值正确才进行登陆验证操作
if(ran==mm){
//13对应于回车键
if(e.keyCode==13){
login();
}
} else{
$("#loginMessage").html("<font color='red'>验证码错误</font>")
}
})
5.这样就实现了通过js获取验证码的功能