在涉及到前后端交互的系统或者实际项目中，常常会遇到登录信息的校验处理。而出于安全性考虑，除了对所输入的明文密码进行加密外，其中验证码也是很必要的一项。而从验证码的校验上来说，可分为前端校验和后端校验。
一是前端校验。向服务器端传送数据时，不需再有验证码这个字段，所有的生成、校验和刷新处理都由前端完成。但是这样安全性不高，并且在前端校验的意义不大；二是在后端校验。如果是在后端校验，那么验证码的生成、刷新以及校验工作全由后端人员完成，前端只需要将用户所输入的验证码传送到后端即可。至于到底用哪个方式更好，还是要根据实际需求来进行选择。如果是比较简单且不涉及重要个人信息处理的平台，可以选择在前端完成。
下面就来说一下前端如何生成验证码以及完成校验和刷新操作。
1、首先在目标html文件中引入验证码生成逻辑处理文件checkCode.js
<script type="text/javascript" src="../js/checkCode.js"></script>
2、其body部分代码:
<!--验证码-->
<div class="checkcodebox">
<span class="tip">验 证 码:</span>
<!--验证码输入所在文本框:maxlength可限制输入的验证码的位数-->
<input type="text" id="checkcodein" placeholder ="请输入" maxlength="4"/>|
<!--验证码生成所在文本框-->
<input type="text" id="checkcode">
<!--注意这里的id名要与checkCode中的一致-->
</div>
3、本页面script逻辑控制，点击验证码实现刷新。
<script type="text/javascript">
$("#checkcode").click(function(){
//页面点击验证码位置，实现点击刷新(调用生成函数).
createCode();
});
</script>
4、checkCode.js文件代码
var code; //在全局定义验证码
//页面初始化加载时生成一个初始验证码
window.onload = function() {
createCode();
}
//验证码的生成
function createCode() {
code = "";
var codeLength = 5; //验证码的长度
var checkCode = document.getElementById("checkCode");
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 charIndex = Math.floor(Math.random() * 36); //取得随机数的索引
code += random[charIndex]; //根据索引取得随机数加到code上
}
checkCode.value = code; //把code值赋给验证码
}
5、在html文件或者是控制html文件脚本逻辑的文件中，在输入登录等相关信息之后，调用后台接口之前，校验验证码输入的正确性。
示例代码:
//校验验证码
function validate() {
var inputCode = document.getElementById("checkcodein").value.toUpperCase(); //取得输入的验证码并转化为大写
if(inputCode.length <= 0) { //若输入的验证码长度为0
alert("请输入验证码！"); //则弹出请输入验证码
} else if(inputCode != code) { //若输入的验证码与产生的验证码不一致时
alert("验证码输入错误！"); //则弹出验证码输入错误
createCode(); //刷新验证码
} else { //输入正确时
//从url中获取班级编码的值
var classcode_val = GetQueryString("classcode");
//获取各项信息的值
//姓名
var studentName = $("#studentname").val();
//身份证类型
var idtype_val = $("#idtype option:selected").val();
//身份证号
var idno_val = $("#idno").val();
//验证码
var checkcode_val = $("#checkcodein").val();
var count = 0;//设置count，保证即便有好几个值都没入的时候也只弹框一次，而不是次次弹框。
if(studentName == ""||idtype_val == ""||idno_val==""){
count++;
}
if(count != 0){
alert("请补充完整个人信息!");
}else{
//准备参数
var verifydata = {
"classcode": classcode_val,
"name":studentName,
"idtype": idtype_val,
"idno": idno_val,
"stuflag":"new"
}
//调用数据库对登录信息做处理的接口所在函数。
//verifySignFunction(verifydata);
}
}
}
6、注：在调用数据库接口之后，在回调函数中，再次调用验证码生成函数，实现不论是否登录成功，验证码都刷新一次。
以上。
