81,092
社区成员
发帖
与我相关
我的任务
分享【十万火急】我想用json在前台显示验证码是否正确信息（有点用的就给分）
jsp页面
-------------------------------------------------------------------------------------------------------------------------------------------
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="<%=path%>/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function () {
$("#Verify").click(function(){
$(this).attr("src","SecurityCodeImageAction?timestamp="+new Date().getTime());
});
});
</script>
</head>
<body>
<form action="yanzheng" name="form" method="post">
验证码:<input type="text" id="id" name="name" value="" />
<img src="SecurityCodeImageAction" id="Verify" style="cursor:hand;"/><font color="red">看不清?单击验证码</font>
<br/>
<div id="notsuccess"></div>
<input type="button" id="button" name="sbt" value="进入!" onclick="yan();"/> ////////我先在yan();函数中添加一个方法可以提示我验证码输入是否正确/////////////////////
</form>
</body>
</html>
---------------------------------------------------------------------------------------------------------------------------------------------------------
java代码部分 第一个 生成验证码
---------------------------------------------------------------------------------------------------------------------------------------------------------
package com.checkcode;
import java.util.Arrays;
public class SecurityCode {
public enum SecurityCodeLevel {Simple,Medium,Hard};
public static String getSecurityCode(){
return getSecurityCode(4,SecurityCodeLevel.Hard,false);
}
public static String getSecurityCode(int length,SecurityCodeLevel level,boolean isCanRepeat){
int len=length;
char[] codes={'1','2','3','4','5','6','7','8','9',
'a','b','c','d','e','f','g','h','i','j','k','m','n','p','q','r','s','t','u','v','w','x','y','z',
'A','B','C','D','E','F','G','H','I','J','K','L','M','N','P','Q','R','S','T','U','V','W','X','Y','Z'};
if(level==SecurityCodeLevel.Simple){
codes=Arrays.copyOfRange(codes, 0,9);
}else if(level==SecurityCodeLevel.Hard){
codes=Arrays.copyOfRange(codes, 0,58);
}
int n=codes.length;
if(len>n&&isCanRepeat==false){
throw new RuntimeException(
String.format("调用SecurityCode.getSecurityCode(%1$s,%2$s,%3$s)出现异常，当isCanRepeat为%3$s时，传入参数%1$s不能大于%4$s",
len,level,isCanRepeat,n));
}
char[] result=new char[len];
if(isCanRepeat){
for(int i=0;i<result.length;i++){
int r=(int)(Math.random()*n);
result[i]=codes[r];
}
}else{
for(int i=0;i<result.length;i++){
int r=(int)(Math.random()*n);
result[i]=codes[r];
codes[r]=codes[n-1];
n--;
}
}
return String.valueOf(result);
}
}
---------------------------------------------------------------------------------------------------------------------------------------------------------
java代码部分 第2个 验证判断部分
---------------------------------------------------------------------------------------------------------------------------------------------------------
package com.checkcode;
import java.io.ByteArrayInputStream;
import java.util.Map;
import org.apache.struts2.interceptor.SessionAware;
import com.checkcode.SecurityCode.SecurityCodeLevel;
import com.opensymphony.xwork2.ActionSupport;
public class SecurityCodeImageAction extends ActionSupport implements SessionAware{
private ByteArrayInputStream imageStream;
private Map<String, Object> session ;
private String name;
private String msg;
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public Map<String, Object> getSession() {
return session;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public ByteArrayInputStream getImageStream() {
return imageStream;
}
public void setImageStream(ByteArrayInputStream imageStream) {
this.imageStream = imageStream;
}
public void setSession(Map<String, Object> session) {
this.session = session;
}
public String execute() throws Exception {
String securityCode = SecurityCode.getSecurityCode();
imageStream = SecurityImage.getImageAsInputStream(securityCode);
session.put("securityCode", securityCode);
return "right";
}
public String yanzheng(){
if(session.get("securityCode").equals(name)){
return SUCCESS;
}else{
msg="再看看！";
return INPUT; /////////////////////////////////////////////////////////////这里的msg我想用json调用显示的但是json出现错误没找到就放弃了 如果大家能够做到 谢谢！！
}
}
}
----------------------------------------------------------------------------
java第三部分 生成验证码图片部分
----------------------------------------------------------------------------
package com.checkcode;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.ByteArrayInputStream;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.util.Random;
import com.sun.image.codec.jpeg.ImageFormatException;
import com.sun.image.codec.jpeg.JPEGCodec;
import com.sun.image.codec.jpeg.JPEGImageEncoder;
/**
* 工具类，生成验证码图片
* @version 1.0 2012/08/21
* @author dongliyang
*
*/
public class SecurityImage {
/**
* 生成验证码图片
* @param securityCode 验证码字符
* @return BufferedImage 图片
*/
public static BufferedImage createImage(String securityCode){
//验证码长度
int codeLength=securityCode.length();
//字体大小
int fSize = 15;
int fWidth = fSize + 1;
//图片宽度
int width = codeLength * fWidth + 6 ;
//图片高度
int height = fSize * 2 + 1;
//图片
BufferedImage image=new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
Graphics g=image.createGraphics();
//设置背景色
g.setColor(Color.WHITE);
//填充背景
g.fillRect(0, 0, width, height);
//设置边框颜色
g.setColor(Color.LIGHT_GRAY);
//边框字体样式
g.setFont(new Font("Arial", Font.BOLD, height - 2));
//绘制边框
g.drawRect(0, 0, width - 1, height -1);
//绘制噪点
Random rand = new Random();
//设置噪点颜色
g.setColor(Color.LIGHT_GRAY);
for(int i = 0;i < codeLength * 6;i++){
int x = rand.nextInt(width);
int y = rand.nextInt(height);
//绘制1*1大小的矩形
g.drawRect(x, y, 1, 1);
}
//绘制验证码
int codeY = height - 10;
//设置字体颜色和样式
g.setColor(new Color(19,148,246));
g.setFont(new Font("Georgia", Font.BOLD, fSize));
for(int i = 0; i < codeLength;i++){
g.drawString(String.valueOf(securityCode.charAt(i)), i * 16 + 5, codeY);
}
//关闭资源
g.dispose();
return image;
}
/**
* 返回验证码图片的流格式
* @param securityCode 验证码
* @return ByteArrayInputStream 图片流
*/
public static ByteArrayInputStream getImageAsInputStream(String securityCode){
BufferedImage image = createImage(securityCode);
return convertImageToStream(image);
}
/**
* 将BufferedImage转换成ByteArrayInputStream
* @param image 图片
* @return ByteArrayInputStream 流
*/
private static ByteArrayInputStream convertImageToStream(BufferedImage image){
ByteArrayInputStream inputStream = null;
ByteArrayOutputStream bos = new ByteArrayOutputStream();
JPEGImageEncoder jpeg = JPEGCodec.createJPEGEncoder(bos);
try {
jpeg.encode(image);
byte[] bts = bos.toByteArray();
inputStream = new ByteArrayInputStream(bts);
} catch (ImageFormatException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
return inputStream;
}
}
在说一下问题 我想在验证码输入错误的时候用javascript进行alert提示
或者用json 的回调函数调用msg错误内容 返回在页面上
-------------------------------------------------------------------------------------------------------------------------------------------
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="<%=path%>/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function () {
$("#Verify").click(function(){
$(this).attr("src","SecurityCodeImageAction?timestamp="+new Date().getTime());
});
});
</script>
</head>
<body>
<form action="yanzheng" name="form" method="post">
验证码:<input type="text" id="id" name="name" value="" />
<img src="SecurityCodeImageAction" id="Verify" style="cursor:hand;"/><font color="red">看不清?单击验证码</font>
<br/>
<div id="notsuccess"></div>
<input type="button" id="button" name="sbt" value="进入!" onclick="yan();"/> ////////我先在yan();函数中添加一个方法可以提示我验证码输入是否正确/////////////////////
</form>
</body>
</html>
---------------------------------------------------------------------------------------------------------------------------------------------------------
java代码部分 第一个 生成验证码
---------------------------------------------------------------------------------------------------------------------------------------------------------
package com.checkcode;
import java.util.Arrays;
public class SecurityCode {
public enum SecurityCodeLevel {Simple,Medium,Hard};
public static String getSecurityCode(){
return getSecurityCode(4,SecurityCodeLevel.Hard,false);
}
public static String getSecurityCode(int length,SecurityCodeLevel level,boolean isCanRepeat){
int len=length;
char[] codes={'1','2','3','4','5','6','7','8','9',
'a','b','c','d','e','f','g','h','i','j','k','m','n','p','q','r','s','t','u','v','w','x','y','z',
'A','B','C','D','E','F','G','H','I','J','K','L','M','N','P','Q','R','S','T','U','V','W','X','Y','Z'};
if(level==SecurityCodeLevel.Simple){
codes=Arrays.copyOfRange(codes, 0,9);
}else if(level==SecurityCodeLevel.Hard){
codes=Arrays.copyOfRange(codes, 0,58);
}
int n=codes.length;
if(len>n&&isCanRepeat==false){
throw new RuntimeException(
String.format("调用SecurityCode.getSecurityCode(%1$s,%2$s,%3$s)出现异常，当isCanRepeat为%3$s时，传入参数%1$s不能大于%4$s",
len,level,isCanRepeat,n));
}
char[] result=new char[len];
if(isCanRepeat){
for(int i=0;i<result.length;i++){
int r=(int)(Math.random()*n);
result[i]=codes[r];
}
}else{
for(int i=0;i<result.length;i++){
int r=(int)(Math.random()*n);
result[i]=codes[r];
codes[r]=codes[n-1];
n--;
}
}
return String.valueOf(result);
}
}
---------------------------------------------------------------------------------------------------------------------------------------------------------
java代码部分 第2个 验证判断部分
---------------------------------------------------------------------------------------------------------------------------------------------------------
package com.checkcode;
import java.io.ByteArrayInputStream;
import java.util.Map;
import org.apache.struts2.interceptor.SessionAware;
import com.checkcode.SecurityCode.SecurityCodeLevel;
import com.opensymphony.xwork2.ActionSupport;
public class SecurityCodeImageAction extends ActionSupport implements SessionAware{
private ByteArrayInputStream imageStream;
private Map<String, Object> session ;
private String name;
private String msg;
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public Map<String, Object> getSession() {
return session;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public ByteArrayInputStream getImageStream() {
return imageStream;
}
public void setImageStream(ByteArrayInputStream imageStream) {
this.imageStream = imageStream;
}
public void setSession(Map<String, Object> session) {
this.session = session;
}
public String execute() throws Exception {
String securityCode = SecurityCode.getSecurityCode();
imageStream = SecurityImage.getImageAsInputStream(securityCode);
session.put("securityCode", securityCode);
return "right";
}
public String yanzheng(){
if(session.get("securityCode").equals(name)){
return SUCCESS;
}else{
msg="再看看！";
return INPUT; /////////////////////////////////////////////////////////////这里的msg我想用json调用显示的但是json出现错误没找到就放弃了 如果大家能够做到 谢谢！！
}
}
}
----------------------------------------------------------------------------
java第三部分 生成验证码图片部分
----------------------------------------------------------------------------
package com.checkcode;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.ByteArrayInputStream;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.util.Random;
import com.sun.image.codec.jpeg.ImageFormatException;
import com.sun.image.codec.jpeg.JPEGCodec;
import com.sun.image.codec.jpeg.JPEGImageEncoder;
/**
* 工具类，生成验证码图片
* @version 1.0 2012/08/21
* @author dongliyang
*
*/
public class SecurityImage {
/**
* 生成验证码图片
* @param securityCode 验证码字符
* @return BufferedImage 图片
*/
public static BufferedImage createImage(String securityCode){
//验证码长度
int codeLength=securityCode.length();
//字体大小
int fSize = 15;
int fWidth = fSize + 1;
//图片宽度
int width = codeLength * fWidth + 6 ;
//图片高度
int height = fSize * 2 + 1;
//图片
BufferedImage image=new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
Graphics g=image.createGraphics();
//设置背景色
g.setColor(Color.WHITE);
//填充背景
g.fillRect(0, 0, width, height);
//设置边框颜色
g.setColor(Color.LIGHT_GRAY);
//边框字体样式
g.setFont(new Font("Arial", Font.BOLD, height - 2));
//绘制边框
g.drawRect(0, 0, width - 1, height -1);
//绘制噪点
Random rand = new Random();
//设置噪点颜色
g.setColor(Color.LIGHT_GRAY);
for(int i = 0;i < codeLength * 6;i++){
int x = rand.nextInt(width);
int y = rand.nextInt(height);
//绘制1*1大小的矩形
g.drawRect(x, y, 1, 1);
}
//绘制验证码
int codeY = height - 10;
//设置字体颜色和样式
g.setColor(new Color(19,148,246));
g.setFont(new Font("Georgia", Font.BOLD, fSize));
for(int i = 0; i < codeLength;i++){
g.drawString(String.valueOf(securityCode.charAt(i)), i * 16 + 5, codeY);
}
//关闭资源
g.dispose();
return image;
}
/**
* 返回验证码图片的流格式
* @param securityCode 验证码
* @return ByteArrayInputStream 图片流
*/
public static ByteArrayInputStream getImageAsInputStream(String securityCode){
BufferedImage image = createImage(securityCode);
return convertImageToStream(image);
}
/**
* 将BufferedImage转换成ByteArrayInputStream
* @param image 图片
* @return ByteArrayInputStream 流
*/
private static ByteArrayInputStream convertImageToStream(BufferedImage image){
ByteArrayInputStream inputStream = null;
ByteArrayOutputStream bos = new ByteArrayOutputStream();
JPEGImageEncoder jpeg = JPEGCodec.createJPEGEncoder(bos);
try {
jpeg.encode(image);
byte[] bts = bos.toByteArray();
inputStream = new ByteArrayInputStream(bts);
} catch (ImageFormatException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
return inputStream;
}
}
在说一下问题 我想在验证码输入错误的时候用javascript进行alert提示
或者用json 的回调函数调用msg错误内容 返回在页面上
...全文
请发表友善的回复…
发表回复
cmchina7 2014-10-16
- 打赏
- 举报
等大神吧 我前端的东西很废的
buzhidao1123 2014-10-16
- 打赏
- 举报
-----------------------------------------------------------------------------------------------------------------------
十分感谢 可以在帮我看看我 我下面这段代码 哪里有错呢？？？ 一直调用error的方法
就连alert（“请输入验证码”）都不显示
-----------------------------------------------------------------------------------------------------------------------
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="<%=path%>/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function () {
$("#Verify").click(function(){
$(this).attr("src","SecurityCodeImageAction?timestamp="+new Date().getTime());
});
});
$(document).ready(function(){
$("#button").click(function(){
var name= $('#id').attr('value');
if (name!=null||name!=""){
$.ajax({
url:"yangzheng",
type:"post",
dataType:"json",
success:function(data){
if(data.msg!=null){
$("#notsuccess").html(" <br>");
var html ="成功了" ;
$('#notsuccess').html(html);
}else{
$("#notsuccess").html(data.msg);
$("#notsuccess").css("color","red");
}
},
error:function(){
alert("出现错误");
}
});
}else{
alert("请填写验证码");}
});
});
</script>
</head>
<body>
<form id="ids" action="yanzheng" name="form" method="post">
验证码:<input type="text" id="id" name="name" value="" />
<img src="SecurityCodeImageAction" id="Verify" style="cursor:hand;"/><font color="red">看不清?单击验证码</font>
<br/>
<div id="notsuccess"></div>
<input type="button" id="button" name="sbt" value="进入!"/>
</form>
</body>
</html>
EverWHL 2014-10-16
- 打赏
- 举报
并且像这种js错误
直接用调试工具跟踪
firebug或者ie8以及以上都会有js调试工具,直接就能定位哪行的错误
EverWHL 2014-10-16
- 打赏
- 举报
//有必要写这么麻烦吗？
var name= $('#id').attr('value');
直接
var name = $("#id").val();
不就行了
并且id是关键字啊换个id名称
url:"yangzheng",
这个url确定是这样？
LOVE-漂泊 2014-10-16
- 打赏
- 举报
我可以说我也不懂吗？
cmchina7 2014-10-15
- 打赏
- 举报
下面是个实例 别照抄 只是借鉴一下就好
function check_login() {
var code = $("#code").val();
if(code == "") {
$("#code_msg").text("请输入验证码.");
return;
}
$.post(
"login.do",
$("#myform").serialize(),
function(data) {
//if里面是对调回的数据进行判断 具体的判断条件你可以自己写 这个是我以前项目用的 你不用照抄
if(data.flag==1) {
//验证码错误 这里是用ajax将验证码的输入项直接显示错误信息了 你要想用alert 就把这个方法改一下就好
$("#code_msg").text("验证码错误.");
change();
} else {
//成功
location.href = "toIndex.do";
}
}
);
}
望贪狼 2014-10-15
- 打赏
- 举报
貌似没用AJAX？
buzhidao1123 2014-10-15
- 打赏
- 举报
在线等 谢谢大家！！！！！！！！
