javaweb實現註冊頁面（數據庫鏈接以及ajax驗證）
先放效果圖javascript
可實現js實時驗證css
可實現ajax實時驗證註冊信息是否存在html
頁面實現要求前端
1登陸帳號：要求由6到12位字母、數字、下劃線組成，只有字母能夠開頭；（1分）java
2登陸密碼：要求顯示「• 」或「*」表示輸入位數，密碼要求八位以上字母、數字組成。（1分）mysql
3性別：要求用單選框或下拉框實現，選項只有「男」或「女」；（1分）jquery
4學號：要求八位數字組成，前四位爲「2018」開頭，輸入本身學號；（1分）ajax
5姓名：輸入本身的姓名；sql
5電子郵箱：要求判斷正確格式xxxx@xxxx.xxxx；（1分）數據庫
6點擊「添加」按鈕，將學生我的信息存儲到數據庫中。（3分）
7能夠演示鏈接上數據庫。（2分）
實現思路
實現的思路很是簡單，前端作好表單及js驗證，後端接收表單填寫數據並插入數據庫
難點：ajax實時驗證primary key對應列內容在數據庫中是否已經存在，若存在，則提示錯誤信息
下面貼上代碼：
首先是前端頁面代碼：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<title>添加信息</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="./js/jquery.min.js"></script>
<style>
body{
background-image:url(./library/3d效果/QQ圖片20191015211520.jpg);
}
.container{
margin-top:100px;
border-radius:10px;
padding-top:50px;
padding-bottom:50px;
align:center;
background-color:white;
opacity:0.8;
width:500px;
}
form{
margin-top:20px;
}
.form-group{
align:center;
width:350px;
margin:auto;
position:relative;
}
h2{
border-bottom:5px solid red;
padding-bottom:10px;
text-align:center;
width:100%;
}
.label{
float:left;
width:80px;
margin-top:7px;
margin-right:5px;
text-align:left;
}
.form-control{
width:200px;
margin-top:7px;
}
.sex{
border:0px solid #000;
width:200px;
margin-top:7px;
}
.sign{
width:160px;
margin-top:10px;
}
.tip{
position:relative;
width:100%;
height:auto;
padding:5px;
}
.tip .tipicon{
float:left;
background-image:url(img/warn.png);
background-repeat:no-repeat;
background-position:center;
background-size:cover;
width:20px;
height:20px;
}
.tipmessage{
color:red;
font-size:15px;
}
.tip{
display:none;
}
.righttip{
display:none;
position:absolute;
right:8px;
top:8px;
width:25px;
height:25px;
background-image:url(img/zhengque.png);
background-repeat:no-repeat;
background-position:center;
background-size:cover;
}
</style>
<script type="text/javascript">
function isMobileNumber(phone) {
var flag = false;
var message = "";
var myreg = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0-9]{1})|(15[0-3]{1})|(15[4-9]{1})|(18[0-9]{1})|(199))+\d{8})$/;
if (myreg.test(phone)){
flag = true;
}
return flag;
}
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg); //獲取url中"?"符後的字符串並正則匹配
var context = "";
if (r != null)
context = r[2];
reg = null;
r = null;
return context == null || context == "" || context == "undefined" ? "" : context;
}
function isEmail(email){
//對電子郵件的驗證
var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
if(!myreg.test(email)){
return false;
}
else
return true;
}
function isPwd(password)
{
var myreg=/[0-9a-zA-Z]+/;
if(!myreg.test(password))
return false;
else
return true;
}
function isId(id)
{
if((id[0]=="2")&&(id[1]=="0")&&(id[2]=="1")&&(id[3]=="8"))
return true;
else
return false;
}
function inputusername()
{
var username=$("#usr").val();
var tip1=$("#tip1");
var tip_1=$("#tip_1");
if(!((username[0]>='a'&&username[0]<='z')||(username[0]>='A'&&username[0]<='Z')))
{
$("#usr").next().css("display","none");
tip1.css("display","block");
tip_1.html("用戶名必須以英文字母開頭！");
}
else if(username.length<6||username.length>12){
$("#usr").next().css("display","none");
tip1.css("display","block");
tip_1.html("用戶名必須爲6-12位字符！");
}
else
{
tip1.css("display","none");
$.post(
"UserServlet",
{username:username},
function(data){
if(data=="yes"){
tip1.css("display","none");
$("#usr").next().css("display","block");
}
else{
$("#usr").next().css("display","none");
tip1.css("display","block");
tip_1.html("用戶名已被註冊！");
}
},
"text"
);
}
}
function inputId()
{
var id=$("#id").val();
var tip4=$("#tip4");
var tip_4=$("#tip_4");
if(!isId(id))
{
$("#id").next().css("display","none");
tip4.css("display","block");
tip_4.html("學號必須以2018開頭！");
}
else if(id.length!=8){
$("#id").next().css("display","none");
tip4.css("display","block");
tip_4.html("請輸入8位學號！");
}
else
{
tip4.css("display","none");
$.post(
"IdServlet",
{id:id},
function(data){
if(data=="yes"){
tip4.css("display","none");
$("#id").next().css("display","block");
}
else{
$("#id").next().css("display","none");
tip4.css("display","block");
tip_4.html("該學號已存在！");
}
},
"text"
);
}
}
function inputpassword()
{
var password=$("#pwd").val();
var tip2=$("#tip2");
var tip_2=$("#tip_2");
if(password.length<8)
{
$("#pwd").next().css("display","none");
tip2.css("display","block");
tip_2.html("請輸入8位以上密碼！");
}
else if(!isPwd(password)){
$("#pwd").next().css("display","none");
tip2.css("display","block");
tip_2.html("密碼僅由英文或數字組成！");
}
else{
tip2.css("display","none");
$("#pwd").next().css("display","block");
}
}
function inputmobile()
{
var mobile=$("#mobile").val();
var tip4=$("#tip4");
var tip_4=$("#tip_4");
if(mobile.length!=11)
{
$("#mobile").next().css("display","none");
tip4.css("display","block");
tip_4.html("請輸入11位手機號！");
}
else if(isMobileNumber(mobile)==false){
$("#mobile").next().css("display","none");
tip4.css("display","block");
tip_4.html("手機號格式不正確！");
}
else
{
tip4.css("display","none");
$.post(
"MobileServlet",
{mobile:mobile},
function(data){
if(data=="yes"){
tip4.css("display","none");
$("#mobile").next().css("display","block");
}
else{
$("#usr").next().css("display","none");
tip4.css("display","block");
tip_4.html("手機號已被註冊！");
}
},
"text"
);
}
}
function inputemail()
{
var email=$("#email").val();
var tip5=$("#tip5");
var tip_5=$("#tip_5");
if(!isEmail(email))
{
$("#email").next().css("display","none");
tip5.css("display","block");
tip_5.html("郵箱格式不正確！");
}
else
{
tip5.css("display","none");
$.post(
"EmailServlet",
{email:email},
function(data){
if(data=="yes"){
tip5.css("display","none");
$("#email").next().css("display","block");
}
else{
$("#email").next().css("display","none");
tip5.css("display","block");
tip_5.html("郵箱已被註冊！");
}
},
"text"
);
}
}
function isEmpty()
{
if($("#usr").val()==""||$("#pwd").val()==""||$("#name").val()==""||$('input[name="sex"]:checked').val()==""||$("#sel1").val()==""||
$("#agency").val()==""||$("#major").val()==""||$("#classnum").val()==""||$("#birthplace").val()==""
||$("#email").val()==""||$("#id").val()==""||$("#text").val()=="")
{
alert("請將信息填寫完整！");
return false;
}
return true;
}
function getResult()
{
if(GetQueryString("result")=="true")
alert("添加成功！");
else if(GetQueryString("result")=="false")
alert("添加失敗！");
}
var inputs=document.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++)
{
inputs[i].onkeyup=function(event){
if(event.keyCode=13){
var next=this.nextElementSibling.nextElementSibling;
next.focus();
}
}
}
</script>
</head>
<body onload="getResult()">
<div class="container">
<h2>用戶註冊</h2>
<form action="Signin_do" method="post">
<div class="form-group">
<label for="usr" class="label">帳號:</label>
<input type="text" class="form-control" id="usr" name="username" oninput="inputusername()" placeholder="請輸入用戶名">
<div class="righttip"></div>
<div class="tip" id="tip1">
<div class="tipicon"></div>
<div id="tip_1" class="tipmessage"></div>
</div>
</div>
<div class="form-group">
<label for="pwd" class="label">密碼:</label>
<input type="password" class="form-control" id="pwd" name="password" placeholder="請輸入密碼" oninput="inputpassword()">
<div class="righttip"></div>
<div class="tip" id="tip2">
<div class="tipicon"></div>
<div id="tip_2" class="tipmessage"></div>
</div>
</div>
<div class="form-group">
<label class="label" for="sex">性別：</label>
<div class="sex form-control" id="sex">
<label class="radio-inline"><input type="radio" name="sex" value="男">男</label>
<label class="radio-inline"><input type="radio" name="sex" value="女">女</label>
</div>
</div>
<div class="form-group">
<label for="name" class="label">姓名:</label>
<input type="text" class="form-control" id="name" name="name" placeholder="請輸入姓名">
</div>
<div class="form-group">
<label for="name" class="label">學號:</label>
<input type="text" class="form-control" id="id" name="id" placeholder="請輸入學號" oninput="inputId()">
<div class="righttip"></div>
<div class="tip" id="tip4">
<div class="tipicon"></div>
<div id="tip_4" class="tipmessage"></div>
</div>
</div>
<div class="form-group">
<label for="email" class="label">電子郵件：</label>
<input type="text" class="form-control" id="email" name="email" placeholder="請輸入郵箱" oninput="inputemail()">
<div class="righttip"></div>
<div class="tip" id="tip5">
<div class="tipicon"></div>
<div id="tip_5" class="tipmessage"></div>
</div>
</div>
<div class="form-group">
<label for="email" class="label">所在學院：</label>
<input type="text" class="form-control" id="agency" name="agency" placeholder="請輸入學院" oninput="inputemail()">
</div>
<div class="form-group">
<label for="email" class="label">所在系：</label>
<input type="text" class="form-control" id="major" name="major" placeholder="請輸入系" oninput="inputemail()">
</div>
<div class="form-group">
<label for="email" class="label">所在班級：</label>
<input type="text" class="form-control" id="classnum" name="classnum" placeholder="請輸入班級" oninput="inputemail()">
</div>
<div class="form-group">
<label for="sel1" class="label">入學年份(屆):</label>
<select class="form-control" id="sel1" name="year">
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
</select>
屆
</div>
<div class="form-group">
<label for="email" class="label">生源地：</label>
<input type="text" class="form-control" id="birthplace" name="birthplace" placeholder="請輸入生源地" oninput="inputemail()">
<div class="righttip"></div>
<div class="tip" id="tip5">
<div class="tipicon"></div>
<div id="tip_5" class="tipmessage"></div>
</div>
</div>
<div class="form-group">
<label for="email" class="label">備註：</label>
<input type="text" class="form-control" id="text" name="text" oninput="inputemail()">
<div class="righttip"></div>
<div class="tip" id="tip5">
<div class="tipicon"></div>
<div id="tip_5" class="tipmessage"></div>
</div>
</div>
<input type="submit" class="sign btn btn-primary btn-lg" value="添加" onclick="return isEmpty()">
</form>
</div>
</body>
</html>
而後是處理表單提交的servlet（Signin_do）代碼：
package com.manage.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.DBUtil.java.DBUtil;
import com.information.javabean.People;
/**
* Servlet implementation class Signin_do
*/
@WebServlet("/Signin_do")
public class Signin_do extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
request.setCharacterEncoding("UTF-8");
String username=request.getParameter("username");
String password=request.getParameter("password");
String sex=request.getParameter("sex");
String name=request.getParameter("name");
String id=request.getParameter("id");
String email=request.getParameter("email");
String agency=request.getParameter("agency");
String major=request.getParameter("major");
String classnum=request.getParameter("classnum");
String year=request.getParameter("year");
String birthplace=request.getParameter("birthplace");
String text=request.getParameter("text");
if(DBUtil.addInformation(username,password,sex,name,id,email,agency,major,classnum,year,birthplace,text))
response.sendRedirect("NewFile.jsp?result=true");
else
response.sendRedirect("NewFile.jsp?result=false");
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
而後是ajax判斷學號是否存在的servlet（IdServlet）代碼：
package com.manage.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.DBUtil.java.DBUtil;
/**
* Servlet implementation class IdServlet
*/
@WebServlet("/IdServlet")
public class IdServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
String id=request.getParameter("id");
if(DBUtil.getId(id))
response.getWriter().write("no");
else
response.getWriter().write("yes");
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
ajax接收判斷帳號是否存在的servlet（UserServlet）:
package com.manage.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.DBUtil.java.DBUtil;
/**
* Servlet implementation class UserServlet
*/
@WebServlet("/UserServlet")
public class UserServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
String username=request.getParameter("username");
System.out.println(username);
//DBUtil.getUsername(username);
if(DBUtil.getUsername(username))
response.getWriter().write("no");
else
response.getWriter().write("yes");
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
而後是ajax判斷郵箱是否存在的servlet（EmailServlet）代碼：
package com.manage.servlet; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.DBUtil.java.DBUtil; /** * Servlet implementation class EmailServlet */ @WebServlet("/EmailServlet") public class EmailServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub String email=request.getParameter("email"); if(DBUtil.getEmail(email)) response.getWriter().write("no"); else response.getWriter().write("yes"); } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub doGet(request, response); } }
數據庫操做類DBUtil類代碼：
package com.DBUtil.java; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import com.information.javabean.People; import sun.net.www.content.text.plain; public class DBUtil { //數據庫URL和帳號密碼 public static final String connectionURL="jdbc:mysql://localhost:3306/people_information_db?useUnicode=true&characterEncoding=GB18030&useSSL=false&serverTimezone=GMT&allowPublicKeyRetrieval=true"; public static final String username="root"; public static final String password="010218"; //數據庫鏈接 public static Connection getConnection() { try { Class.forName("com.mysql.cj.jdbc.Driver"); //Class.forName("com.mysql.cj.jdbc.Driver"); return DriverManager.getConnection(connectionURL, username, password); } catch (Exception e) { // TODO: handle exception System.out.println("數據庫鏈接失敗"); e.printStackTrace(); } return null; } public static boolean Signin(String username,String password,String name,String sex,String province,String mobile,String email) { Connection con=null; PreparedStatement pstmt=null; try { con=getConnection(); String sql="insert into signin_users (username,password,name,sex,province,mobile,email) values (\'"+ username+"\',\'"+password+"\',\'"+name+"\',\'"+sex+"\',\'"+province+"\',\'"+mobile+"\',\'"+email+"\')"; System.out.println(sql); pstmt=con.prepareStatement(sql); pstmt.executeUpdate(); return true; } catch(SQLException e) { e.printStackTrace(); } return false; } public static boolean getUsername(String username) { Connection connection=null; PreparedStatement preparedStatement=null; ResultSet rSet=null; try { connection=getConnection(); String sql="select * from signin_users where username="+"\'"+username+"\'"; System.out.println(sql); preparedStatement=connection.prepareStatement(sql); rSet=preparedStatement.executeQuery(); if(rSet.next()) return true; else return false; } catch(SQLException e) { e.printStackTrace(); } return false; } public static boolean getMobile(String mobile) { Connection connection=null; PreparedStatement preparedStatement=null; ResultSet rSet=null; try { connection=getConnection(); String sql="select * from signin_users where mobile="+"\'"+mobile+"\'"; System.out.println(sql); preparedStatement=connection.prepareStatement(sql); rSet=preparedStatement.executeQuery(); if(rSet.next()) return true; else return false; } catch(SQLException e) { e.printStackTrace(); } return false; } public static boolean getEmail(String email) { Connection connection=null; PreparedStatement preparedStatement=null; ResultSet rSet=null; try { connection=getConnection(); String sql="select * from signin_users where email="+"\'"+email+"\'"; System.out.println(sql); preparedStatement=connection.prepareStatement(sql); rSet=preparedStatement.executeQuery(); if(rSet.next()) return true; else return false; } catch(SQLException e) { e.printStackTrace(); } return false; } public static boolean getId(String id) { Connection connection=null; PreparedStatement preparedStatement=null; ResultSet rSet=null; try { connection=getConnection(); String sql="select * from signin_users where id="+"\'"+id+"\'"; System.out.println(sql); preparedStatement=connection.prepareStatement(sql); rSet=preparedStatement.executeQuery(); if(rSet.next()) return true; else return false; } catch(SQLException e) { e.printStackTrace(); } return false; } public static boolean addInformation(String username,String password,String sex,String name,String id,String email,String agency,String major,String classnum,String year,String birthplace,String text) { Connection con=null; PreparedStatement pstmt=null; try { con=getConnection(); String sql="insert into signin_users (username,password,sex,name,id,email,agency,major,classnum,year,birthplace,text) values (\'"+ username+"\',\'"+password+"\',\'"+sex+"\',\'"+name+"\',\'"+id+"\',\'"+email+"\',\'"+agency+"\',\'"+major+"\',\'"+classnum+"\',\'"+year+"\',\'"+birthplace+"\',\'"+text+"\')"; System.out.println(sql); pstmt=con.prepareStatement(sql); pstmt.executeUpdate(); return true; } catch(SQLException e) { e.printStackTrace(); } return false; } public static void main(String[] args) { addInformation("1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1"); } }
以上就是註冊頁面實現須要的全部代碼了
相關文章
- 1. javaWeb 簡單註冊登陸(含數據庫鏈接) -- （一）頁面
- 2. 用AJAX實現頁面登錄以及註冊用戶名驗證
- 3. AJAX實現JSP鏈接數據庫（Oracle）異步驗證
- 4. Rails+jquery實現Ajax式註冊驗證
- 5. ajax註冊驗證
- 6. Java實現發送郵箱驗證碼/註冊驗證鏈接
- 7. servlet+jsp+mysql+數據庫鏈接池實現註冊登錄驗證碼功能
- 8. 【javaweb】註冊登陸頁面與mysql鏈接後的驗證與傳值
- 9. JSP實現登陸註冊並連接數據庫頁面
- 10. Servlet連接數據庫實現註冊頁面
- 更多相關文章...
- • Web 網頁 驗證 - 網站建設指南
- • AJAX 數據庫實例 - ASP 教程
- • Flink 數據傳輸及反壓詳解
- • Spring Cloud 微服務實戰(三) - 服務註冊與發現
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
