javaweb验证码的实现与jQuery 的表单阻止

最新推荐文章于 2023-01-07 13:51:21 发布

未来記錄

最新推荐文章于 2023-01-07 13:51:21 发布

阅读量952

点赞数

文章标签： javascript jquery java eclipse

本文链接：https://blog.csdn.net/weixin_65749277/article/details/123907934

版权

本文主要探讨了JavaWeb环境下验证码的实现，结合jQuery进行表单验证和阻止表单默认提交行为，以及CSS的一些关键属性和五种页面跳转方式。

摘要由CSDN通过智能技术生成

1.验证码的实现 jQuery 与 js 实现

 
var cns = ['q','w','e','r','t','y','u','i','o','p','a','s','d','f','g','h','j','k','l','z','x','c','v','b','n',
				'm','M','N','B','V','C','X','Z','A','S','D','F','G','H','J','K','L','P','O','I','U','Y','T','R','E','W','Q',
				'0','1','2','3','4','5','6','7','8','9'];
 
function setAutoCode() {
	var str="";
	for(var i=0;i<4;i++){
		var index=Math.floor(Math.random()*cns.length);	
		str+=cns[index];
		
		
	}
	$("#yz").html(str); 这里也可以使用js获取标签设置
	
}

2.jQuery表单验证与jQuery 的表单阻止e.preventDefault(); jQery防止表单提交

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>新闻发布系统-管理员登录</title>
<!-- 引入login.css -->
<link rel="stylesheet" type="text/css" href="css/login.css" />
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<style type="text/css">
.error{
color: red;
text-align: left;
 
}
</style>
<script type="text/javascript">
 
$(function() {
	
	// 密码验证正则表达式  添加插件
	jQuery.validator.addMethod("regexPassword", function(value, element) {
	    return this.optional(element) || /^(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$/.test(value);
	}, "一个大写，一个小写，一个符号");
 
	$("#formset").validate({
		rules:{
		user:{
			required: true,
	        rangelength:[2,16]
		},
		password:{
			required: true,
			 rangelength:[3,14],
			// regexPassword: true
			 
		}
		},
	messages: {
		user: {
			required: "*必填",
			rangelength: "2-16*"
		},
		password: {
			required: "*必填",
			rangelength: "3-14*"
		}
		
	}
		
	})
 
 
	使用提交按钮设置点击事件 
 
	$("#buttonDiv>input:submit").click(function (e) {
		var nul=$("#code").val();
		if(!nul){
			alert("验证码不可为空");
			e.preventDefault();
		}else{
			var yz=$("#yz").html();
			
			if(nul != yz){
				alert("验证码错误");
				e.preventDefault(); //jQery防止表单提交
			}
		}
		
		
	})
	
	setAutoCode();
	$("#yz").click(function () {
		setAutoCode();
	})
	
})
 
var cns = ['q','w','e','r','t','y','u','i','o','p','a','s','d','f','g','h','j','k','l','z','x','c','v','b','n',
				'm','M','N','B','V','C','X','Z','A','S','D','F','G','H','J','K','L','P','O','I','U','Y','T','R','E','W','Q',
				'0','1','2','3','4','5','6','7','8','9'];
 
function setAutoCode() {
	var str="";
	for(var i=0;i<4;i++){
		var index=Math.floor(Math.random()*cns.length);	
		str+=cns[index];
		
		
	}
	$("#yz").html(str);
	
}
 
 
</script>
</head>
<body>
 
	<!-- 登录大容器 -->
	<div id="login">
		<!-- 上 -->
		<div id="top">
			<div id="top_left">
				<img src="images/login_03.gif" />
			</div>
			<div id="top_center"></div>
		</div>
		<!-- 中 -->
		<div id="center">
			<div id="center_left"></div>
			<!-- 账号密码div -->
			<div id="center_middle">
				<form id="formset" action="dologin.jsp" method="post">
 
 
					<!-- 用户输入框  -->
					<div id="username">
						<label>账号：</label><input id="user" name="user" type="text">
					</div>
					<!-- 密码输入框 -->
					<div id="passwordDiv">
						<label>密码：</label> <input type="password" id="password"
							name="password">
					</div>
					<!-- 验证码输入框 -->
					<div id="codeDiv">
						<label>验证码：</label> <input type="text" id="code" name="code">
						<span id="yz">BTNt</span>
					</div>
					<!-- 自动登录 -->
					<div id="outoLoginDiv"></div>
					<!-- 登录和重置按钮 -->
					<div id="buttonDiv">
						<input type="submit"  value="登录" /> <input type="reset" value="重置" />
					</div>
 
				</form>
 
			</div>
			<div id="center_right"></div>
		</div>
		<!-- 下 -->
		<div id="down">
			<div id="down_left">
				<div id="inf">
					<span class="inf_text">版本信息</span> <span class="copyright">管理信息系统
						2008 v2.0</span>
				</div>
			</div>
			<div id="down_center"></div>
		</div>
 
	</div>
	<%
String i=request.getParameter("i");
if(i!=null){
out.print("<script>$(function() {alert('账号或密码错误');location.href='login.jsp'})</script>");	
}
%>
</body>
</html>

3.css 的一些属性方法与五中跳转方式

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
	<%
		//1.JSP页面的跳转方式
		//(1)form表单提交跳转
		//		action method   
		//      传值  action = "index.jsp?username=admin"
		      <input type = "hidden" name = "xxx" value = ""/>
	
		//(2)HTML超链接标签进行跳转
				<a href = "index.jsp?username=admin&pwd=123"></a>
	
		
		//(3)js脚本中的BOM对象   location
		  script标签内    location.href="index.jsp?username=admin"
		
		
		//(4)java的方式--请求转发
		request.getRequestDispatcher("跳转路径").forward(request, response);
		
		
		//(5)java的方式--请求重定向
		response.sendRedirect("跳转路径");
		
		
		//在所有的中转站页面中做页面跳转。
		//1,2  不行的     3,4,5可以的
		
		
		//2.JDBC
		Class.forName("驱动路径");//oracleDriver  alt+/  该页面第一行代码中import值
		
		
		//url地址
		 jdbc:oracle:thin:@localhost:1521:orcl	
		
		//接口以及实现类
		//DriverManager
		//Connection
		//PreparedStatement   ps     
		//	占位符的概念  ？        ps.setXxx(序号,数值);
		//ResultSet rs       next();
		//	rs.getXxx()
		
		
		
		
		
	%>

未来記錄

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaweb验证码的实现与jQuery 的表单阻止

1.验证码的实现jQuery与js 实现 var cns = ['q','w','e','r','t','y','u','i','o','p','a','s','d','f','g','h','j','k','l','z','x','c','v','b','n', 'm','M','N','B','V','C','X','Z','A','S','D','F','G','H','J','K','L','P','O','I','U','Y','T','R','E','W','Q', ...
复制链接

扫一扫