-
在开发中用户需要进行验证码的验证操作,这个时候就需要异步验证.
-
将验证码的文件拷贝到项目之中
-
在项目之中建立一个check.jsp负责验证码的检查
<%@ page pageEncoding="UTF-8"%>
<%
String rand = session.getAttribute("rand").toString();
boolean flag = rand.equalsIgnoreCase(request.getParameter("code"));
%>
<%=flag%>
- 在页面中提供验证码的输入位置
<td>验证码</td>
<td>
<input type="text" name="code" id="code" size="4" maxlength="4">
<img src="codeimg.jsp" alt="">
</td>
<td><span id="validateMsg"></span></td>
</tr>
- 对于验证码的检测,一定需要具体的验证规则检测
"code":{
required:true,
remote:{//进行远程验证
url:"check.jsp"//远程执行的路径
dataType:"text",
//data为要发送的参数
data:{
//code为用户输入的验证码信息
"code":function(){
return $("code").val();
}
},
//请求返回的数据处理
dataFilter:function(data,type){
console.log("data = "+data+",type = "+type);
//如果返回的数据为"true",表示数据正确
if(data.trim()=="true"){
return true;
}else{
return false;
}
}
}
}
- 完整的html页面
<html>
<head>
<meta charset="UTF-8"/>
<title>jQuery验证框架</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.validate-1.13.1.js"></script>
<script type="text/javascript" src="js/additional-methods.js"></script>
<script type="text/javascript" src="js/jquery.metadata.js"></script>
<script type="text/javascript" src="js/messages_zh.js"></script>
<script type="text/javascript" src="js/member/member_add_06.js"></script>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<form action="welcome.html" id="myform">
<table border="1">
<tr>
<td>用户名</td>
<td><input type="text" name="member.mid" id="member.mid"></td>
<td><span id="member.midMsg"></span></td>
</tr>
<tr>
<td>年龄</td>
<td><input type="text" name="age" id="age"></td>
<td><span id="ageMsg"></span></td>
</tr>
<tr>
<td>生日</td>
<td><input type="text" name="member.birthday" id="member.birthday"></td>
<td><span id="member.birthdayMsg"></span></td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="member.sex" id="member.sex" value="男">男
<input type="radio" name="member.sex" id="member.sex" value="女">女
</td>
<td><span id="member.sexMsg"></span></td>
</tr>
<tr>
<td>兴趣</td>
<td>
<input type="checkbox" name="member.interest" id="member.interest" value="游泳">游泳
<input type="checkbox" name="member.interest" id="member.interest" value="篮球">女
<input type="checkbox" name="member.interest" id="member.interest" value="打人">武艺
</td>
<td><span id="member.interestMsg"></span></td>
</tr>
<tr>
<td>个人主业</td>
<td>
<input type="text" name="member-hostpage" id="member-hostpage" >
</td>
<td><span id="member-hostpageMsg"></span></td>
</tr>
<tr>
<td>登录密码</td>
<td>
<input type="text" name="member-password" id="member-password" >
</td>
<td><span id="member-passwordMsg"></span></td>
</tr>
<tr>
<td>确认密码</td>
<td>
<input type="text" name="conf" id="conf" >
</td>
<td><span id="confMsg"></span></td>
</tr>
<tr>
<td>验证码</td>
<td>
<input type="text" name="code" id="code" size="4" maxlength="4">
<img src="codeimg.jsp">
</td>
<td><span id="codeMsg"></span></td>
</tr>
<tr>
<td colspan="3">
<input type="submit" value="注册">
<input type="reset" value="重置">
</td>
</tr>
</table>
</form>
</body>
</html>
- 完整的member_add_06.js文件
//在页面加载的时候进行事件绑定处理
$(function(){
$("#myform").validate({
//开启debug模式
debug:true,
//errorPlacement表示组件出错时要处理函数.
//error
//element表示出错时的组件
//error表示出错时后产生的错误信息
errorPlacement:function(error,element){
//拼凑出要添加的元素id
var spanName = element.attr("id")+"Msg";
//替换id中的"."小点,将其转换为转义符号
if(spanName.indexOf(".") != -1){
spanName = spanName.replace(".","\\.")
}
//在指定的元素中添加错误提示信息
$("#"+spanName).append(error);
},
//当表表单验证通过的时候处理函数
submitHandler:function(form){
//执行手工提交表单
form.submit();
},
//描述表单组件验证错误的时候
highlight:function(element,errorClass){
$(element).attr("class","failure");
},
unhighlight:function(element){
$(element).attr("class","success");
},
//定义规则
rules: {
"member.mid": {
required:true,
rangelength:[5,15],
//开启验证
email:true
},
"age":{
required:true,
number:true
},
"member.birthday":{
dateISO:true
},
"member.sex":{
required:true
},
"member.interest":{
required:true
},
"member-hostpage":{
required:true,
url:true
},
"member-password":{
required:true
},
"conf":{
required:true,
equalTo:"#member-password"
},
"code":{
required:true,
remote:{//进行远程验证
url:"check.jsp",//远程执行的路径
dataType:"text",
//data为要发送的参数
data:{
//code为用户输入的验证码信息
"code":function(){
return $("#code").val();
}
},
//请求返回的数据处理
dataFilter:function(data,type){
//如果返回的数据为"true",表示数据正确
if(data.trim()=="true"){
return true;
}else{
return false;
}
}
}
}
}
});
});
- 生成图片的jsp页面
<%@ page contentType="image/jpeg"
import="java.util.*,java.awt.*,java.io.*,java.awt.image.*,javax.imageio.*"
pageEncoding="utf-8"%>
<%!Color getRandColor(int fc, int bc) {//给定范围获得随机颜色
Random random = new Random();
if (fc > 255)
fc = 255;
if (bc > 255)
bc = 255;
int r = fc + random.nextInt(bc - fc);
int g = fc + random.nextInt(bc - fc);
int b = fc + random.nextInt(bc - fc);
return new Color(r, g, b);
}%>
<%
//设置页面不缓存
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
// 在内存中创建图象
int width = 60, height = 20;
BufferedImage image = new BufferedImage(width, height,
BufferedImage.TYPE_INT_RGB);
// 获取图形上下文
Graphics g = image.getGraphics();
//生成随机类
Random random = new Random();
// 设定背景色
g.setColor(getRandColor(200, 250));
g.fillRect(0, 0, width, height);
//设定字体
g.setFont(new Font("Times New Roman", Font.PLAIN, 18));
//画边框
//g.setColor(new Color());
//g.drawRect(0,0,width-1,height-1);
// 随机产生155条干扰线，使图象中的认证码不易被其它程序探测到
g.setColor(getRandColor(160, 200));
for (int i = 0; i < 155; i++) {
int x = random.nextInt(width);
int y = random.nextInt(height);
int xl = random.nextInt(12);
int yl = random.nextInt(12);
g.drawLine(x, y, x + xl, y + yl);
}
// 取随机产生的认证码(4位数字)
String sRand = "";
for (int i = 0; i < 4; i++) {
String rand = String.valueOf(random.nextInt(10));
sRand += rand;
// 将认证码显示到图象中
g.setColor(new Color(20 + random.nextInt(110), 20 + random
.nextInt(110), 20 + random.nextInt(110)));// 调用函数出来的颜色相同，可能是因为种子太接近，所以只能直接生成
g.drawString(rand, 13 * i + 6, 16);
}
// 将认证码存入SESSION
session.setAttribute("rand", sRand);
// 图象生效
g.dispose();
OutputStream output = response.getOutputStream();
// 输出图象到页面
ImageIO.write(image, "JPEG", response.getOutputStream());
output.flush();
out.clear();
out = pageContext.pushBody();
%>
- 最终页面效果
