利用正则表达式来筛选信息
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>验证注册页面</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-size: 12px;
line-height: 20px;
}
.main {
width: 525px;
margin-left: auto;
margin-right: auto;
}
.hr_1 {
font-size: 14px;
font-weight: bold;
color: #3275c3;
height: 35px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #3275c3;
vertical-align: bottom;
padding-left: 12px;
}
.left {
text-align: right;
width: 80px;
height: 25px;
padding-right: 5px;
}
.center {
width: 280px;
}
.in {
width: 130px;
height: 16px;
border: solid 1px #79abea;
}
.red {
color: #cc0000;
font-weight: bold;
}
div {
color: #F00;
}
</style>
<script type="text/javascript">
//校验用户名
function checkUser() {
//获取用户名输入的内容
var content = document.getElementById("user").value;
//找到span标签
var span = document.getElementById("userSpan");
//使用正则表达式校验用户输入的内容
if(reg.test(content)){
//校验成功
span.innerHTML = "<font color='green'>成功</font>";
return true;
}else {
//校验失败
span.innerHTML = "<font color='red'>用户名由字母或中文组成的4-16位字符</font>";
return false;
}
}
//校验邮箱
function checkEmail() {
//获取用户输入的内容
var content = document.getElementById("email").value;
//编写正则表达式校验 sunnyh@126.com
var reg = /^[a-z1-9][a-z0-9]+@[a-z0-9]{2,}(\.[a-z]{2,3}){1,2}$/i;
//获取span标签
var span = document.getElementById("emailSpan");
//使用正则表达式校验用户输入的内容
if(reg.test(content)){
span.innerHTML = "<font color='green'>成功</font>";
return true;
}else {
span.innerHTML = "<font color='red'>邮编输入非法!</font>";
return false;
}
}
//校验密码
function checkPass() {
//获取用户输入的内容
var content = document.getElementById("pwd").value;
//密码只能由英文字母和数字组成,长度为4-10个字符
var reg = /^[a-zA-Z0-9]{4,10}$/;
//获取span标签
var span = document.getElementById("passSpan");
//使用正则表达式校验用户输入的内容
if(reg.test(content)){
span.innerHTML = "<font color='green'>成功</font>";
return true;
}else {
span.innerHTML = "<font color='red'>密码由英文字母和数字组成的4-10位字符</font>";
return false;
}
}
//检测两次密码是否一致
function checkPass2() {
//获取用户输入的内容
var content = document.getElementById("repwd").value;
if(repwd != psw){
span.innerHTML = "<font color='red'>两次密码输入不一致!</font>";}
}
//检查手机号码是否合理
function checkPhone() {
//获取用户输入的内容
var content = document.getElementById("mobile").value;
//
var reg = /^1[3578]\d{9}$/;
//获取span标签
var span = document.getElementById("phoneSpan");
//使用正则表达式校验用户输入的内容
if(reg.test(content)){
span.innerHTML = "<font color='green'>成功</font>";
return true;
}else {
span.innerHTML = "<font color='red'>手机号码非法!</font>";
return false;
}
}
//检测生日是否合法
function checkBirth() {
//获取用户输入的内容
var content = document.getElementById("birth").value;
//
var reg = /^([0-9]|[0-9]{2}|100)$/;
//获取span标签
var span = document.getElementById("birthSpan");
//使用正则表达式校验用户输入的内容
if(reg.test(content)){
span.innerHTML = "<font color='green'>成功</font>";
return true;
}else {
span.innerHTML = "<font color='red'>年龄格式非法!</font>";
return false;
}
}
function logins(){
window.open("login.jsp");
}
function createRequest(url){
http_request=new XMLHttpRequest();
http_request.onreadystatechange=function(){
if(http_request.readyState==4){
if(http_request.status==200){
alert(http_request.responseText);
}else{
alert("您所请求的地址有误!");
}
}
}
http_request.open("POST",url,true);
http_request.send(null);
}
</script>
</head>
<body>
<form action="zhucecheck.jsp" method="post" >
<table class="main" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="hr_1">新用户注册</td>
</tr>
<tr>
<td style="height:10px;"></td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<!-- 不能为空, 输入长度必须介于 5 和 10 之间 -->
<td class="left">用户名:</td>
<td class="center">
<input id="user" name="user" type="text" class="in" onblur="checkUser()" /><span id="userSpan"></span>
</td>
</tr>
<tr>
<!-- 不能为空, 输入长度大于6个字符 -->
<td class="left">密码:</td>
<td class="center">
<input id="pwd" name="pwd" type="password" class="in" onblur="checkPass()" /><span id="passSpan"></span>
</td>
</tr>
<tr>
<!-- 不能为空, 与密码相同 -->
<td class="left">确认密码:</td>
<td class="center">
<input id="repwd" name="repwd" type="password" class="in" onblur="checkPass2()"/>
</td>
</tr>
<tr>
<!-- 不能为空, 邮箱格式要正确 -->
<td class="left">电子邮箱:</td>
<td class="center">
<input id="email" name="email" type="text" class="in" onblur="checkEmail()"/><span id="emailSpan"></span>
</td>
</tr>
<tr>
<td class="left">手机号码:</td>
<td class="center">
<input id="mobile" name="mobile" type="text" class="in" onblur="checkPhone()"/><span id="phoneSpan"></span>
</td>
</tr>
<tr>
<td class="left">年龄:</td>
<td class="center">
<input id="birth" name="birth" type="text" class="in" onblur="checkBirth()"/><span id="birthSpan"></span>
</td>
</tr>
<tr>
<td class="left">QQ号:</td>
<td class="center">
<input id="QQ" name="QQ" type="text" class="in" />
</td>
</tr>
<tr>
<td class="left"> </td>
<td class="center">
<input type="button" value="登陆" onclick="logins()">
<input type="submit" value="注册">
</td>
</tr>
</table></td>
</tr>
</table>
</form>
</body>
</html>
登录后的页面:
<%@ page language="java" import="java.sql.*" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Address : Home</title>
<link rel="icon" type="image/icon" href="assets/images/tabicon.ico">
<link rel="stylesheet" type="text/css" href="">
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="assets/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,700,700i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Crimson+Text:400,700,700i|Josefin+Sans:700" rel="stylesheet">
<link href="assets/css/main.css" rel="stylesheet">
<link rel="icon" href="assets/images/logo.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>
<body>
<%request.setCharacterEncoding("utf-8"); %>
<div id="index"> <!-- Index starts here -->
<div class="container main">
<div class="row home">
<div id = "index_left" class="col-md-6 left">
<img class="img-responsive img-rabbit" src="assets/images/yuwen.jpg">
</div>
<div id = "index_right" class="col-md-6 text-center right">
<div class="logo">
<img src="assets/images/logo.png">
<h4>To Be A BETTER MAN</h4>
</div>
<p class="home-description">
Hi, This is a list of function</p>
<div class="btn-group-vertical custom_btn animated slideinright">
<div id="about" class="btn btn-rabbit">背诵界面</div>
<div id="article" class="btn btn-rabbit">课文原音</div>
<div id="work" class="btn btn-rabbit">目标设置</div>
<div id="contact" class="btn btn-rabbit">我的界面</div>
</div>
<div class="social">
<a href="#"><i class="fa fa-pinterest" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div> <!-- index ends here -->
<div id="about_scroll" class="pages "> <!-- about strats here -->
<div class="container main">
<div class="row">
<div class="col-md-6 left" id="about_left">
<img class="img-responsive img-rabbit" src="assets/images/mulu.jpg">
</div>
<div class="col-md-6 right" id="about_right">
<a href="#index" class="btn btn-rabbit back"> <i class="fa fa-angle-left" aria-hidden="true"></i> Back to home </a>
<div id="watermark">
<h2 class="page-title" text-center>About</h2>
<div class="marker">a</div>
</div>
<button type="submit" class="btn btn-rabbit submit">一年级</button>
<button type="submit" class="btn btn-rabbit submit">二年级</button>
<button type="submit" class="btn btn-rabbit submit">三年级</button>
<button type="submit" class="btn btn-rabbit submit">四年级</button>
<button type="submit" class="btn btn-rabbit submit">五年级</button>
<button type="submit" class="btn btn-rabbit submit">六年级</button>
<button type="submit" class="btn btn-rabbit submit">七年级</button>
<button type="submit" class="btn btn-rabbit submit">八年级</button>
<button type="submit" class="btn btn-rabbit submit">九年级</button>
<p class="info">
<%
try {
Class.forName("com.mysql.jdbc.Driver");
} catch (ClassNotFoundException e) {
System.out.println("加载数据库驱动时抛出异常,内容如下:");
e.printStackTrace();
}
Connection conn = DriverManager
.getConnection(
"jdbc:mysql://localhost/list?useUnicode=true&characterEncoding=utf8",
"root", "123456");
Statement stmt = conn.createStatement();
String phone = request.getParameter("name");
ResultSet rs = stmt
.executeQuery("select * from user where phone = '"+phone+"'");
while (rs.next()) {
out.println("姓名: " + rs.getString(2)+"<br>" + "电话:" + rs.getString(3)+"<br>" + " QQ:" + rs.getString(5)+"<br>" +"微信:"+rs.getString(6) +"<br>"+ "邮箱:"+rs.getString(7)+"<br>");
}
rs.close();
stmt.close();
conn.close();
%></p>
<form action="xiugai.jsp" method="post">
<div>
<button type="submit" class="btn btn-rabbit submit">Update</button>
</div>
</form>
</div>
</div>
</div>
</div> <!-- About ends here -->
<div id="article_scroll" class="pages"> <!-- 课程原音 starts here -->
<div class="container main">
<div class="row">
<div class="col-md-6" id="article_left">
<div id="owl-demo" class="owl-carousel owl-theme">
<div class="item"><img class="img-responsive img-rabbit" src="assets/images/work.jpg"></div>
</div>
</div>
<div class="col-md-6" id="article_right">
<a href="#index" class="btn btn-rabbit back"> <i class="fa fa-angle-left" aria-hidden="true"></i> Back to Home </a>
<button type="submit" class="btn btn-rabbit submit">一年级</button>
<button type="submit" class="btn btn-rabbit submit">二年级</button>
<button type="submit" class="btn btn-rabbit submit">三年级</button>
<button type="submit" class="btn btn-rabbit submit">四年级</button>
<button type="submit" class="btn btn-rabbit submit">五年级</button>
<button type="submit" class="btn btn-rabbit submit">六年级</button>
<button type="submit" class="btn btn-rabbit submit">七年级</button>
<button type="submit" class="btn btn-rabbit submit">八年级</button>
<button type="submit" class="btn btn-rabbit submit">九年级</button>
<form action="sixin.jsp">
<p class="info"> </p></form>
</div>
</div>
</div>
</div> <!-- 课文原音 ends here -->
<div id="work_scroll" class="pages"> <!-- Work starts here -->
<div class="container main">
<div class="row">
<div class="col-md-6" id="work_left">
<div id="owl-demo" class="owl-carousel owl-theme">
<div class="item"><img class="img-responsive img-rabbit" src="assets/images/work.jpg"></div>
</div>
</div>
<div class="col-md-6" id="work_right">
<a href="#index" class="btn btn-rabbit back"> <i class="fa fa-angle-left" aria-hidden="true"></i> Back to Home </a>
<div id="watermark">
<h2 class="page-title" text-center>Others</h2>
<div class="marker">o</div>
</div>
<p class='subtitle'>请认真完成设定的目标哟!!</p>
<form action="sixin.jsp">
<p class="info"> <%
try {
Class.forName("com.mysql.jdbc.Driver");
} catch (ClassNotFoundException e) {
System.out.println("加载数据库驱动时抛出异常,内容如下:");
e.printStackTrace();
}
Connection conn2 = DriverManager
.getConnection(
"jdbc:mysql://localhost/list?useUnicode=true&characterEncoding=utf8",
"root", "123456");
Statement stmt2 = conn2.createStatement();
ResultSet rs2 = stmt2
.executeQuery("select * from others");
while (rs2.next()) {
out.println("<br>"+"姓名: " + rs2.getString(2)+"<br>" + "电话:" + rs2.getString(3)+"<br>" + " QQ:" + rs2.getString(4)+"<br>" +"微信:"+rs2.getString(5) +"<br>"+ "邮箱:"+rs2.getString(6)+"<br>"+ "个人简介:"+rs2.getString(7)+"<br>");
out.println("<input type=submit value=私信 >");
}
rs2.close();
stmt2.close();
conn2.close();
%> </p></form>
</div>
</div>
</div>
</div> <!-- Work ends here -->
<div id="contact_scroll" class="pages"> <!-- Contact starts here -->
<div class="container main">
<div class="row">
<div class="col-md-6 left" id="contact_left">
<img class="img-responsive img-rabbit" src="assets/images/contact.jpg">
</div>
<div class="col-md-6 right" id="contact_right">
<a href="#index" class="btn btn-rabbit back"> <i class="fa fa-angle-left" aria-hidden="true"></i> Back to Home </a>
<div id="watermark">
<h2 class="page-title" text-center>Contact</h2>
<div class="marker">c</div>
</div>
<p class='subtitle'>你有什么问题可以联系我
</p>
<!-- form -->
<form class="form_edit" action="liuyan.jsp">
<div class="form-group">
<input type="text" name="name" class="form-control" id="exampleInputName" placeholder="Name">
</div>
<div class="form-group">
<input type="text" name="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<textarea class="form-control" name="message" rows="5" placeholder="Message"></textarea>
</div>
<button type="submit" class="btn btn-rabbit submit">Send Message</button>
<br>
<br>
<div id="watermark">
<h2 class="page-title" text-center>Message</h2>
<div class="marker">m</div>
</div>
<p class='subtitle'>
<%
try {
Class.forName("com.mysql.jdbc.Driver");
} catch (ClassNotFoundException e) {
System.out.println("加载数据库驱动时抛出异常,内容如下:");
e.printStackTrace();
}
Connection conn3 = DriverManager
.getConnection(
"jdbc:mysql://localhost/list?useUnicode=true&characterEncoding=utf8",
"root", "123456");
Statement stmt3 = conn3.createStatement();
ResultSet rs3 = stmt3
.executeQuery("select * from liuyan");
while (rs3.next()) {
out.println("<br>"+"姓名: " + rs3.getString(2)+"<br>" + "邮箱:" + rs3.getString(3)+"<br>" + " message:" + rs3.getString(4)+"<br>");
}
rs3.close();
stmt3.close();
conn3.close();
%></p>
</form>
</div>
</div>
</div>
</div>
<!-- Contact ends here -->
<script src="assets/js/jquery-3.1.0.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>