/
signup.html
174 lines (150 loc) · 7.14 KB
/
signup.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!doctype html>
<html lang="en">
<head>
<title>小廢物購物網</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS v5.0.2 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
main{
margin-top: 70px;
}
</style>
</head>
<body class="d-flex justify-content-between flex-column" style="height: 100vh;">
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="index.html"><img src="images/Smudger3_noqmarks_1200x1200.png"
style="height: 30px;">小廢物購物網</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse d-lg-flex justify-content-lg-end" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">首頁</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="signup.html">註冊</a>
</li>
<li class="nav-item">
<a class="nav-link" href="cart.html">結帳</a>
</li>
</ul>
</div>
</div>
</nav>
<main >
<div class="container wrapper">
<h1 class="text-center my-3">小廢物購物網</h1>
<h3 class="text-center my-3">註冊頁面</h3>
<div class="row d-flex justify-content-center">
<div class="col-sm-5">
<form action="https://www.townway.com.tw/auth" method="post">
<div class="input-group my-2">
<span class="input-group-text" id="basic-addon1">購買人全名</span>
<input type="text" class="form-control" placeholder="請輸入姓名" id="fullname">
</div>
<div class="input-group my-2">
<span class="input-group-text" id="basic-addon1">購買人email</span>
<input type="email" class="form-control" placeholder="請輸入email" id="email">
</div>
<div class="input-group my-2">
<span class="input-group-text" id="basic-addon1">使用者名稱</span>
<input type="text" class="form-control" placeholder="請輸入使用者名稱" id="userid">
</div>
<div class="input-group my-2">
<span class="input-group-text" id="basic-addon1">使用者密碼</span>
<input type="password" class="form-control" placeholder="請輸入密碼" id="password">
</div>
<div class="input-group my-2">
<span class="input-group-text" id="basic-addon1">密碼驗證
</span>
<input type="password" class="form-control" placeholder="請再次輸入密碼" id="password2">
</div>
</form>
<div style="height: 3rem;">
<p id="warn"></p>
</div>
<button type="button" class="btn btn-primary my-3" style="width: 100%;">送出</button>
</div>
</div>
</div>
</main>
<footer class="bg-light mt-5">
<div class="container">
<div class="py-3">
Icon borrow from Smudge Lord
</div>
</div>
</footer>
<!-- Bootstrap JavaScript Libraries -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous">
</script>
<script src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script>
$("button").click(
function SignUpCheck() {
var name = document.getElementById("fullname").value;
var email = document.getElementById("email").value;
var userid = document.getElementById("userid").value;
var psw = document.getElementById("password").value;
var pswck = document.getElementById("password2").value;
if (name == "" || name == null) {
$("#warn").text("姓名欄不可為空");
return false;
} else if (email == "" || email == null) {
$("#warn").text("e-mail不可為空");
return false;
} else if (userid == "" || userid == null) {
$("#warn").text("使用者名稱不可為空");
return false;
} else if (psw == "" || psw == null) {
$("#warn").text("密碼不可為空");
return false;
} else if (pswck == "" || pswck == null) {
$("#warn").text("請重複輸入密碼");
return false;
} else {
$.cookie("name", name);
$.cookie("mail", email);
$.cookie("id", userid);
$("#warn").text("✔");
location.href = "cart.html";
}
}
);
$("#password").keyup(
function check() {
var value = $(this).val();
if (value.length < 8) {
$("#warn").text("密碼長度需大於8");
} else {
$("#warn").text("");
}
}
)
$("#password2").keyup(
function checkpsw() {
var psw = $("#password").val();
var pswck = $("#password2").val();
if (psw === pswck) {
$("#warn").text("✔");
} else {
$("#warn").text("兩次密碼輸入必須相同");
}
}
)
</script>
</body>
</html>