JavaWeb使用Ajax實現仿163郵箱註冊檢查該賬戶是否存在

阿新 • • 發佈：2021-01-22

JavaWeb使用Ajax實現仿163郵箱註冊檢查該賬戶是否存在，如圖所示：根據資料庫顯示，可看到賬戶存在，則會提示賬戶已存在。
在這裡插入圖片描述

首先，是註冊頁面
regist.jsp

<%@ 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">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@include file="/admin/common.jspf"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" 
>
<link rel="stylesheet" type="text/css"
	href="${basePath}/index/css/regist.css" />
<title>Insert title here</title>
</head>
<body>
	<title>jq+css3使用者註冊</title>

	<script id="jquery_183" type="text/javascript" class 
="library"
		src="js/jquery-1.8.3.min.js"></script>
</head>

<body>

	<div id="top">
		<h1>使用者註冊</h1>
	</div>

	<div class="form-bak">

		<form method="post" action="#" onsubmit="adaptValue();">

			<div class="left">

				<div class="line" id="line_account">

					<div class="info">

						<strong>郵箱</strong> <span class="tips">郵箱就是賬號</span>

					</div>

					<div class="input">

						<input type="text" name="account" id="account"
							onblur="v_account();" onkeyup="v_account();" />

						<div class="none">

							<span></span>

						</div>

					</div>

				</div>

				<div class="line" id="line_name">

					<div class="info">

						<strong>使用者名稱</strong> <span class="tips">只能由數字、文字或下劃線組成<br />最多32個字元
						</span>

					</div>

					<div class="input">

						<input type="text" name="name" id="name" onblur="v_name();"
							onkeyup="v_name();" />

						<div class="none">

							<span></span>

						</div>

					</div>

				</div>

				<div class="line" id="line_password">

					<div class="info">

						<strong>密碼</strong> <span class="tips">6至16個字元</span>

					</div>

					<div class="input">

						<input type="password" name="password" id="password"
							onblur="v_password();" onkeyup="v_password();" />

						<div class="none">

							<span></span>

						</div>

					</div>

				</div>

				<div class="line" id="line_repeat">

					<div class="info">

						<strong>確認密碼</strong> <span class="tips">再次輸入密碼</span>

					</div>

					<div class="input">

						<input type="password" name="repeat" id="repeat"
							onblur="v_repeat();" onkeyup="v_repeat();" />

						<div class="none">

							<span></span>

						</div>

					</div>

				</div>

			</div>

			<div class="right">

				<input type="submit" id="submit" value="完成註冊" disabled="disabled" />

				<div class="readagreement-wrap" onclick="onReadAgreementClick();">

					<input type="checkbox" name="agree" id="agree"
						onchange="v_submitbutton();" /> 同意《<a id="readagreement"
						href="#agreement" onclick="showAgreement();" title="檢視使用者使用協議">使用者使用協議</a>》

				</div>

				<div>
					已經擁有賬號，<a href="#">直接登入</a>
				</div>

				<div>
					忘記密碼，<a href="#">請聯絡管理員</a>
				</div>

			</div>

		</form>

	</div>

	<div id="agreement" class="agreement" style="display: none;">

		<h1>使用者使用協議</h1>

		<iframe src=""></iframe>

		<input type="button" value="同意" onclick="agree();" /> <a href="#"
			class="backtotop">返回頂部</a>

	</div>

</body>

</html>


<script>
	function enableSubmit(bool) {

		if (bool)
			$("#submit").removeAttr("disabled");

		else
			$("#submit").attr("disabled", "disabled");

	}

	function v_submitbutton() {

		if ($("#agree").attr("checked") != "checked") {

			enableSubmit(false);

			$(".readagreement-wrap").css("outline", "1px solid #f99");

			return;

		} else {
			$(".readagreement-wrap").css("outline", "1px solid #9f9");
		}

		for (f in flags)
			if (!flags[f]) {
				enableSubmit(false);
				return;
			}

		enableSubmit(true);

	}

	function showAgreement() {

		$("#readagreement").removeAttr("onclick");

		$("#agreement").show();

		$("#agreement iframe").attr("src", "http://www.baidu.com");//此處為連結地址

	}

	function agree() {

		$("#agreement").hide();

		$("#readagreement").attr("onclick", "showAgreement();");

		if ($("#agree").attr("checked") != "checked")
			$("#agree").trigger("click");

	}

	function onReadAgreementClick() {

		return;

		if ($("#agree").attr("checked")) {

			$("#agree").removeAttr("checked");

		} else {

			$("#agree").attr("checked", "checked");

		}

		v_submitbutton();

	}

	var flags = [ false, false, false, false ];

	//郵箱驗證，網上找到的正則

	var RegEmail = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9][email protected]([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;

	function lineState(name, state, msg) {

		if (state == "none") {
			$("#line_" + name + " .input div").attr("class", "none");
			return;
		}

		if (state == "corect") {
			$("#line_" + name + " .input div").attr("class", "corect");
			return;
		}

		$("#line_" + name + " .input span").text(msg);
		$("#line_" + name + " .input div").attr("class", "error");

	}

	function v_account() {

		var account = $("#account").val();

		if (!RegEmail.test(account)) {
			lineState("account", "error", "郵箱格式不正確");
			flags[0] = false;
			enableSubmit(false);
		}

		else {
			lineState("account", "corect", "");
			flags[0] = true;
		}

		v_submitbutton();

	}

	function v_name() {

		var name = $("#name").val();
		
		(function queryList(){
			//定義 傳送的引數
			var parm="action=checkname&&name="+name;
			//傳送ajax請求
				$.ajax({
					dataType:"json",
					type:"post",
					url:"${basePath}/UserServlet?"+parm,
					success:function(data){
						//呼叫填充資料的函式
						if(data==null){
							
						}else{
							//alert("錯誤");
							lineState("name", "error", "當前使用者已存在");
						}
					},
					error:function(){
						alert("請求失敗");
					}
					
				});
			})()

		if (name.length == 0) {
			lineState("name", "error", "不得為空");
			flags[1] = false;
		}

		else {

			if (name.length > 32) {
				lineState("name", "error", "必須少於32個字元");
				flags[1] = false;
			}

			else {
				lineState("name", "corect", "");
				flags[1] = true;
			}

		}

		v_submitbutton();

	}

	function v_password() {

		var password = $("#password").val();

		if (password.length < 6) {
			lineState("password", "error", "必須多於或等於6個字元");
			flags[2] = false;
		}

		else {

			if (password.length > 16) {
				lineState("password", "error", "必須少於或等於16個字元");
				flags[2] = false;
			}

			else {

				lineState("password", "corect", "");

				flags[2] = true;

			}

		}

		v_repeat();

		v_submitbutton();

	}

	function v_repeat() {

		if (!flags[2]) {
			lineState("repeat", "none", "");
			return;
		}

		if ($("#password").val() != $("#repeat").val()) {
			lineState("repeat", "error", "密碼不一致");
			flags[3] = false;
		}

		else {

			lineState("repeat", "corect", "");

			flags[3] = true;

		}

		v_submitbutton();

	}

	function adaptValue() {

		return true;

	}
</script>

</body>

</html>

UserServlet.java

private void checkname(HttpServletRequest request,
			HttpServletResponse response) throws IOException {
		// TODO Auto-generated method stub
		PrintWriter out=response.getWriter();
		String name=request.getParameter("name");
		User user=userservice.checkname(name);
		String json=JSON.toJSONString(user, true);
		System.out.println(json);
		out.write(json);
		out.flush();
		out.close();
	}

UserDaoImpl.java

public Book findByid(int id) {
		// TODO Auto-generated method stub
		String sql="select books.id id,books.name name,info,types.name typename,bookDate from books inner join types on types.id=books.typeid where books.id=?";
		Object[] obj={id};
		Book book=null;
		try {
			book=(Book) dbutil.getObject(Book.class, sql, obj);
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return book;
	}

按照這樣就可以實現以上頁面了，碼字不易，給個贊吧！

JavaWeb使用Ajax實現仿163郵箱註冊檢查該賬戶是否存在

技術標籤：JavaScriptjavaweb經驗積累 JavaWeb使用Ajax實現仿163郵箱註冊檢查該賬戶是否存在，如圖所示：根據資料庫顯示，可看到賬戶存在，則會提示賬戶已存在。首先，是註冊頁面 regist.jsp

thinkphp6實現郵箱註冊功能的細節和程式碼

封裝傳送郵件功能使用的是PHPMailer包 //郵件傳送 if (!function_exists(\'sendmail\')) { function sendmail($address, $title, $body)

Spring Boot實戰（七）：Spring Boot實現仿部落格園傳送通知郵件

郵件服務已經是基礎性服務了，是網站的必備功能之一，當註冊了某些網站的時候，郵箱裡通常會收到一封註冊成功通知郵件或者點選啟用賬號的郵件，部落格園也是如此。本文使用Spring Boot，通過QQ郵箱來模仿部落格園傳

Python 在OpenCV裡實現仿射變換—座標變換效果

在現實的影象操作軟體中，經常碰到的不是給出放大多少倍，而是由使用者在軟體的介面上選擇多大的區域，或者選擇幾個點，那麼這樣情況下，怎麼樣來計算出變換矩陣呢？從前面知道變換矩陣是2X3的矩陣，說明有六個未知數

使用OpenCV實現仿射變換—旋轉功能

在前面實現了平移和縮放，還有一種常用的座標變換，那就是旋轉。比如拍攝的照片上傳到電腦裡，再開啟時發現人的頭在下面腳在上，這樣肯定看不了，那麼就需要把這個照片旋轉180度才可以接受。由於旋轉變換，都是繞著點

使用OpenCV實現仿射變換—縮放功能

前面介紹怎麼樣實現平移的功能，接著下來演示縮放功能。比如在一個文件裡插入一個圖片，發現這個圖片佔用太大的面積了，要把它縮小，才放得下，與文字的比例才合適。這樣的需求，就需要使用仿射變換的縮放功能，而實

使用OpenCV實現仿射變換—平移功能

當我們開啟一個圖片編輯軟體時，基本上都會提供幾個操作：平移、縮放和旋轉。特別目前在手機裡拍照時，由於位置感測器的失靈，也許是軟體的BUG，有一次我就遇到蘋果手機不管怎麼樣豎放，或橫放，它拍攝的照片就豎不起

Vue實現仿iPhone懸浮球的示例程式碼

懸浮球外掛簡單的效果圖：很遺憾，沒找到太好的視訊轉gif的軟體，壓縮出來的大小超過了限制，就不放圖了

Android 百度地圖定位實現仿釘釘簽到打卡功能的完整程式碼

導語本章根據百度地圖API，實現仿釘釘打卡功能。用到了基礎地圖、覆蓋物、定點陣圖層、陀螺儀方法、懸浮資訊彈框。

python 實現仿微信聊天時間格式化顯示的程式碼

時間格式化所使用的演算法為： \"\"\" 1.如果不在同一年 \'%Y年%m月%d日\' 2.如果在同一年

Python實現仿射密碼的思路詳解

仿射密碼思路： 1、加解密公式： 2、構造對應字典： 3、程式碼實現構造字典，建立對映關係：

PyQt5實現仿QQ貼邊隱藏功能的例項程式碼

此程式大致功能為：可變換顏色，貼邊隱藏。變換顏色思路 QPalette( [ˈpælət] 調色盤)類相當於對話方塊或控制元件的調色盤，它管理著控制元件或窗體的所有顏色資訊，每個窗體或控制元件都包含一個QP

opencv+python實現滑鼠點選影象,輸出該點的RGB和HSV值

我就廢話不多說了，大家還是直接看程式碼吧！ import cv2 # 讀取圖片並縮放方便顯示

IDEA實現 springmvc的簡單註冊登入功能的示例程式碼

1.基本環境搭建 spring簡介 SpringMVC框架是以請求為驅動，圍繞Servlet設計，將請求發給控制器，然後通過模型物件，分派器來展示請求結果檢視。其中核心類是DispatcherServlet，它是一個Servlet，頂層是實現的Servle

基於python3 下載163郵箱附件，並解壓至指定資料夾

程式碼大部分是來源於多個大神，在此感謝郵件附件下載部分原始碼地址：https://blog.csdn.net/weixin_33871366/article/details/91924850解壓部分程式碼源地址；https://www.cnblogs.com/testxiaobai/p/10515443.ht

狂神說Java【網站註冊傳送郵件功能實現】—— (四) 網站註冊傳送郵件功能實現

分析：在我們註冊的時候，前端我們填寫的就是一個表單，這個表單提交給後端的servlet，這個servlet就向我們填寫的那個郵箱中傳送一封郵件

外貿公司郵箱註冊申請哪個好？

【TOM企業郵箱】外貿公司郵箱一般都會選擇企業郵箱，因為在功能、收發信速度、便捷性等方便對比後，企業郵箱更安全、穩定，無論是業務往來還是作為公司的對外形象宣傳，企業郵箱都是最好的選擇。接下來給大

電子郵箱註冊，適合公司用的電子郵箱

電子郵箱用途一般分兩種，個人使用和公司使用，公司用的電子郵箱要麼註冊VIP付費郵箱，要麼註冊企業郵箱，畢竟對比個人的郵箱來說，VIP郵箱和企業郵箱安全性高、功能強大且售後服務好。下面小編詳細為大家講

Springboot整合163郵箱部署專案時傳送不了

部署到騰訊雲伺服器時專案報錯 Caused by: com.sun.mail.util.MailConnectException: Couldn\'t connect to host, port: smtp.163.com, 25; timeout -1 at com.sun.mail.smtp.SMTPTransport.openServer(SMTPTranspo

vue中uni-app 實現小程式登入註冊功能

思路： 1.使用微信的open-type=\"getUserInfo\" 獲取使用者資訊，將使用者資訊儲存到userinfoDetails物件中去。

JavaWeb使用Ajax實現仿163郵箱註冊檢查該賬戶是否存在

相關推薦