目录
2.jQuery表单验证与jQuery 的表单阻止e.preventDefault(); //jQery防止表单提交
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() %>css的一些属性设置
/* 对其方式 */ text-align: center; /* 垂直剧中 */ line-height: 40px; 此大小要与高度一样才能实现水平居中 设置字体大小 font-size: 15px; 设置字体加粗 font-weight:bold; 设置字体样式 字体 font-family: "楷体"; /* 左缩颈 */ text-indent: 0.9em; /* 每个字符之间的间隙 */ letter-spacing: 4px; 背景颜色 background: white; /* 鼠标样式 */ cursor: pointer;
4.封装oracle数据库帮助类
4.1.数据库帮助类
package com.baidu.utlis; /* * 数据库帮助类 */ import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; 加载jar驱动 public class DBHelper { static { try { Class.forName("oracle.jdbc.driver.OracleDriver"); } catch (Exception e) { e.printStackTrace(); } } 链接数据库 public static Connection getConn() { Connection conn=null; try { String url="jdbc:oracle:thin:@localhost:1521:orcl"; conn=DriverManager.getConnection(url, "f_lkf", "123"); } catch (Exception e) { e.printStackTrace(); } return conn; } //关闭数据库 public static void myClose(Connection conn,PreparedStatement ps, ResultSet rs) { try { if(conn!=null&&!conn.isClosed()) { conn.close(); } if(ps!=null) { ps.close(); } if(rs!=null) { rs.close(); } } catch (Exception e) { e.printStackTrace(); // TODO: handle exception } } }
4.2.实体类的编写
1.编写好你需要的属性 根据数据库而定
2.主界面右键
3.创建有参函数 几个参数根据需求而定
4.选择好需要的属性确定即可
5.创建get与set方法
6.选择好属性确定即可
4.3.dao方法的编写 添加方法
package com.baidu.dao; import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import com.baidu.entity.NewsXwFb; import com.baidu.utlis.DBHelper; /* * 新闻发布dao方法 */ public class XwFbDao { /* * 新增新闻的方法 */ public int addXw(NewsXwFb xw) { int n=0; Connection conn=null; PreparedStatement ps=null; ResultSet rs=null; try{ conn=DBHelper.getConn(); String sql="insert into tb_news values(?,?,?,?,?,?,?,to_date(?,'yyyy-mm-dd hh24:mi:ss'),?)"; ps=conn.prepareStatement(sql); ps.setInt(1, xw.getNid()); ps.setInt(2, xw.getNtid()); ps.setString(3, xw.getNtitle()); ps.setString(4, xw.getNauthor()); ps.setString(5, xw.getNsummary()); ps.setString(6, xw.getNcontent()); ps.setString(7, xw.getNimage()); ps.setString(8, xw.getNdate()); ps.setInt(9, xw.getNcount()); n=ps.executeUpdate(); }catch(Exception e){ e.printStackTrace(); }finally{ DBHelper.myClose(conn, ps, rs); } return n; } }4.4jsp页面的调用 直接import引入即可使用
<%@page import="com.baidu.entity.NewsXwFb"%> <%@page import="com.baidu.dao.XwFbDao"%> <%@page import="com.sun.org.apache.bcel.internal.generic.SIPUSH"%> <%@page import="java.text.SimpleDateFormat"%> <%@page import="java.util.Date"%> <%@page import="com.baidu.dao.UserDao"%> <%@page import="com.baidu.utlis.DBHelper"%> <%@page import="java.sql.ResultSet"%> <%@page import="java.sql.PreparedStatement"%> <%@page import="java.sql.Connection"%> <%@ 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"> <% request.setCharacterEncoding("utf-8"); //编号 int sid=new UserDao().getid(); out.println(sid); //分类编号 String nid=request.getParameter("ntid"); int nidd=Integer.valueOf(nid); out.println(nid); //标题 String nauthor=request.getParameter("ntitle"); //作者 String nsummary=request.getParameter("nauthor"); //摘要 String ncontent=request.getParameter("nsummary"); //类容 String nconte=request.getParameter("ncontent"); //图片 String nimage="images\\1.jpg"; //注册时间 Date date =new Date(); SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); String ndate=sdf.format(date); //点击量 int ncount=0; int i=new XwFbDao().addXw(new NewsXwFb(sid,nidd,nauthor,nsummary,ncontent,nconte,nimage,ndate,ncount)); if(i>0){ //请求转发 页面跳转 //out.println("<script>alert('登录成功') </script>"); request.getRequestDispatcher("admin.jsp?c=1").forward(request, response); }else{ out.println("<script>location.href='admin_addNews.jsp?i=0'</script>"); } %>
8572
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
