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()
%>