用戶註冊登陸流程
具體註冊和登錄要使用ajax與json去傳遞數據,由於這樣能夠預先斷定用戶名是否已註冊,已經註冊的話,直接返回給用戶說已經註冊了,你就別用這個名字了,而後能夠跟一系列的隨機數字在這個名字後面(但這樣是否是仍是已經註冊了的,斷定起來就略麻煩些)html
<!-- 登錄驗證碼,斷定後若是成功,再執行登錄方法 -->
<script>
$.idcode.setCode();
$("#loginButton").click(function (){
var IsBy = $.idcode.validateCode();
/* alert(IsBy); */
console.log(IsBy);
if(!IsBy){ //若是驗證碼經過,則執行ajax的方法
event.preventDefault();
}else{
loginUser();
}
});
</script>
登錄:ajax
<!-- 登錄的ajax方法 -->
<script>
function loginUser(){
console.log("in loginUser() ~");
var user_name = $("#user_name").val();
var user_pwd = $("#user_pwd").val();
/* var passPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/; */
var namePattern = /^[a-zA-Z0-9_-]{4,16}$/;
if(namePattern.test(user_name)){
console.log(user_name);
console.log(user_pwd);
//用戶名RegExp正確後,再斷定其是否已經在數據庫中存在
$.ajax({
url:"<%=path%>/user/queryUserByNameAndPwd.do", //根據用戶名查詢用戶實例
type:"POST",
data:{"user_name":user_name, "user_pwd":user_pwd},
dataType:"json",
success:function(data){//響應回傳成功後到這裏
if(data.code==1){//若是用戶名密碼正確,則登錄.
console.log(data.message);
document.forms["loginForm"].submit();
window.location.href="http://localhost:8084/OrderSystemM/Test1/index.jsp";
/* return true; */
}else if(data.code==0){
alert(data.message);
/* return false; */
}else{
//用戶實例不爲空,但用戶名不等於該查詢的用戶名 (概率微乎其微)
alert("網絡錯誤,請稍後再試");
//發送BUG信息到管理員
/* return false; */
}
}
})
}
}
</script>
用戶登錄後返回首頁,若是不調用window.location.href方法迴轉到index.jsp,會顯示.do路徑,我想還有別的方法能夠解決這一問題.!正則表達式
以後用戶須要退出時:數據庫
<!-- 清除session -->
<script>
function removeSessoin(){
console.log("清除session");
$.ajax({
url:"<%=path%>/user/removeSession.do", //清除用戶sessoin
type:"POST",
data:{},
dataType:"json",
success:function(data){//響應回傳成功後到這裏
if(data.removeCode==1){//若是用戶名重複,則<
alert("您已退出登錄!歡迎下次光臨💗");
window.location.href="http://localhost:8084/OrderSystemM/Test1/index.jsp";
}else if(data.removeCode==0){
alert("退出失敗!請聯繫!");
}else{
//用戶實例不爲空,但用戶名不等於該查詢的用戶名 (概率微乎其微)
alert("網絡錯誤,請稍後再試");
//發送BUG信息到管理員
}
}
})
}
</script>
在用戶註冊時,將bootstrap的插件又get了幾個新方法.json
<!-- 註冊用戶的ajax方法 -->
<script>
//註冊按鈕點擊執行註冊斷定
$("#regButton").click(registerUser);
//用戶名失去焦點時,執行查詢該用戶名是否已經存在的ajax操做
$("#user_nameReg").blur(userNameJudger);
//密碼框失焦,執行密碼斷定
$("#user_pwdReg").blur(pwdCompare);
//密碼2變更時執行
$("#user_pwdReg2").change(pwdCompare);
//用戶名的正則表達式
var uPattern = /^[a-zA-Z0-9_-]{4,16}$/;
//密碼的正則表達式
var pPattern = /^.*(?=.{6,30})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/;
//設定用戶名的斷定boolean
var nameFlag = false;
var user_nameReg = $("#user_nameReg").val();
//用戶名斷定
function userNameJudger(){
var user_nameReg = $("#user_nameReg").val();
if(user_nameReg != null && user_nameReg !=''){
//用戶名不爲空
if(uPattern.test(user_nameReg)){
//用戶名格式正式
console.log("用戶名格式正確");
//格式正確後斷定是否已經存在數據庫中
//ajax
$.ajax({
url:"<%=path%>/user/queryUserInsByName.do",
type:"POST",
data:{"user_name":user_nameReg},
dataType:"json",
success:function(data){
if(data.exist==1){
$("#nameSp").html(" <label class='text-danger'><strong>×用戶名已經重複</strong></label>");
nameFlag = false;
/* alert(data.message); */
}else{
$("#nameSp").html(" <label class='text-success'><strong>√</strong></label>");
nameFlag = true;
/* alert(data.message); */
}
}
})
}else{
nameFlag = false;
console.log("用戶名格式不正確");
//用戶名格式不正確
/* alert("用戶名格式錯誤,應爲4到16位（可以使用 : 字母，數字，下劃線，減號）"); */
/* <label data-toggle="tooltip" data-placement="right" title="右側的 Tooltip">右側的 Tooltip</label> */
$("#nameSp").html(" <label data-toggle='tooltip' data-placement='right' title='用戶名格式錯誤,應爲4到16位.可以使用 : 字母，數字，下劃線，減號'><p class='text-warning'>💀用戶名格式錯誤,點我查看具體緣由.</p></label>");
$("[data-toggle='tooltip']").tooltip();
}
}else{
//用戶名不能爲空
nameFlag = false;
$("#nameSp").html(" <label class='text-danger'><strong>🚫用戶名不能爲空</strong></label>");
}
}
/* tHIS FUNCTION IS SLOW
function getNameBool(){
userNameJudger();
return nameFlag;
} */
/* 設置密碼的斷定boolean */
var pwdFlag = false;
//密碼格式及相同比較,若是相同,pwdFlag爲true
function pwdCompare(){
pwdFlag = false;
var user_pwd1Reg = $("#user_pwdReg").val();
var user_pwd2 = $("#user_pwdReg2").val();
if(user_pwd1Reg != null && user_pwd1Reg != ''){
//若是密碼1不爲空,不爲空字符串
if(pPattern.test(user_pwd1Reg)){
//密碼格式正確,繼續斷定兩個密碼是否相同
console.log("密碼1格式正確");//ok
$("#pwd1Sp").html(" <label class='text-success'><strong>√</strong></label>");
if(user_pwd1Reg===user_pwd2){
//兩個密碼相同,格式也正確
/* alert("密碼一致~能夠註冊");//ok */
pwdFlag = true;
$("#pwd1Sp").html(" <label class='text-success'><strong>√</strong></label>");
$("#pwd2Sp").html(" <label class='text-success'><strong>√</strong></label>");
return pwdFlag;
}else{
//第一個密碼格式正確,第二個密碼跟第一個不相同
/* alert("兩個密碼不一樣~");//ok */
if(user_pwd2==''){
pwdFlag = false;
$("#pwd2Sp").html(" <label class='text-warning'><strong>請輸入重複密碼.</strong></label>");
return pwdFlag;
}else{
pwdFlag = false;
$("#pwd2Sp").html(" <label class='text-danger'><strong>重複密碼錯誤.</strong></label>");
return pwdFlag;
}
}
}else{
//密碼1格式錯誤
pwdFlag = false;
/* alert("密碼格式錯誤,需求6-30位,包括至少1個大寫字母，1個小寫字母，1個數字，1個特殊字符");//ok */
$("#pwd1Sp").html(" <label data-toggle='tooltip' data-placement='right' title='密碼格式錯誤,需求6-30位,包括至少1個大寫字母，1個小寫字母，1個數字，1個特殊字符'><p class='text-warning'>💀密碼格式錯誤,點我查看具體緣由.</p></label>");
$("[data-toggle='tooltip']").tooltip();
return pwdFlag;
}
}else{
//若是密碼1爲空,爲空字符串,判斷重複密碼是否空
if(user_pwd2 != null && user_pwd2 != ''){
pwdFlag = false;
//若是密碼1爲空,密碼2不空,則清空密碼2,關注密碼1輸入框提示先輸入密碼1
$("#user_pwdReg2").val('');//ok
console.log("密碼2被清空,先填寫密碼1");//ok
$("#user_pwdReg").focus();//ok
/* alert("先要輸入密碼1~"); //ok */
$("#pwd2Sp").html(" <label class='text-warning'><strong>請先輸入上面的密碼.</strong></label>");
return pwdFlag;
}
}
}
//註冊新用戶的一系列focus,blur事件.
/* function getRegsiterInfo(){
$()
}
*/
//註冊新用戶
function registerUser(){
console.log("in registerUser() ~");
var user_nameTrue = $("#user_nameReg").val();
var user_pwdTrue = $("#user_pwdReg").val();
//執行用戶名判斷,是否已經存在或格式等.
userNameJudger();
if(pwdCompare() && nameFlag){
$.ajax({
url:"<%=path%>/user/insertNewUser.do",
type:"POST",
data:{"user_name":user_nameTrue,"user_pwd":user_pwdTrue},
dataType:"json",
success:function(data){
if(data.insertNum>0){
console.log("註冊成功");
//發送用戶名密碼到用戶郵箱(待添加)
console.log("用戶名:"+user_nameTrue+".密碼:"+user_pwdTrue);
//提交表單
document.forms["regForm"].submit();
/* 跳轉頁面並刷新獲取session及*/
window.location.href="http://localhost:8084/OrderSystemM/Test1/userinfo.jsp";
//
}else{
console.log("註冊失敗");
}
}
})
}else{
console.log("🚫阻止提交");
event.preventDefault();
}
}
</script>
基本註冊的流程是這樣,口述的話簡單說明爲,先斷定註冊的用戶名是否已經存在於了數據庫中,若是是,則提示已經存在,並阻止提交 nameFlag = falsebootstrap
兩次重複密碼進行比對,格式正確並二者相同,則返回true, 當這些具體知足了條件,將用戶註冊信息經過ajax及json註冊到數據庫,並返回註冊狀態碼1or0,網絡
1的話頁面假性submit提交讓註冊框消失,並跳轉如userinfo用戶信息頁面. (這裏若是使用郵箱則能夠發送郵件給註冊郵箱,當用戶點擊後再判斷操做)session
來源：wizard_Qjsp
相關文章
- 1. 用戶註冊和登陸
- 2. Django用戶註冊、登陸
- 3. 用戶登陸、註冊最基本的流程圖
- 4. 用戶的註冊登陸流程及代碼實現
- 5. yii2實戰之用戶註冊登陸
- 6. 用戶登陸註冊【JDBC版】
- 7. Java+mysql用戶註冊登陸
- 8. Django實現用戶註冊登陸
- 9. 用戶登陸與註冊系統
- 10. SSM用戶註冊登陸案例
- 更多相關文章...
- • Lua 流程控制 - Lua 教程
- • Git 工作流程 - Git 教程
- • Spring Cloud 微服務實戰(三) - 服務註冊與發現
- • Git可視化極簡易教程 — Git GUI使用方法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 用戶註冊和登陸
- 2. Django用戶註冊、登陸
- 3. 用戶登陸、註冊最基本的流程圖
- 4. 用戶的註冊登陸流程及代碼實現
- 5. yii2實戰之用戶註冊登陸
- 6. 用戶登陸註冊【JDBC版】
- 7. Java+mysql用戶註冊登陸
- 8. Django實現用戶註冊登陸
- 9. 用戶登陸與註冊系統
- 10. SSM用戶註冊登陸案例