# 第二組
筆電連接方式: (wifi)
jdbc.jdbcUrl=jdbc:sqlserver://192.168.196.107\SQLEXPRESS;databaseName=trip
桌店連線方式:
jdbc.jdbcUrl=jdbc:sqlserver://192.168.27.55:1433;databaseName=Movie
```clike=
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<!doctype html>
<html class="no-js" lang="en">
<head>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<meta name="google-signin-client_id" content="542797334433-kubelp1c26c1eop1pnmb7eaf2tjtjosp.apps.googleusercontent.com">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>movie | Multipurpose HTML5 template</title>
<link href="images/favicon.png" rel="icon" />
<jsp:include page="../css.jsp"></jsp:include>
</head>
<script>
function onSignIn(googleUser) {
}
function signOut() {
}
window.onload = function() {
console.log("onload start.........");
//createCode();
var sendData = document.getElementById("submit");
sendData.onclick = function() {
console.log("onlick start.............");
hasError = false;
var accountValue = document.getElementById("account").value;
var passWordValue = document.getElementById("passWord").value;
//var validateValue = document.getElementById("ctl00_txtcode").value;
console.log("accountValue----line30" + accountValue);
console.log("passWordValue----line31" + passWordValue);
//console.log("validateValue----line32" + validateValue);
//p錯誤訊息
var div0 = document.getElementById("result0c");
var div1 = document.getElementById("result1c");
var div2 = document.getElementById("result2c");
//p檢查格式1
if (!accountValue) {
//setErrorFor(div0, "");
document.getElementById("result0c").innerHTML = "請輸入帳號(Email信箱)";
} else {
//var objRegex = /^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$/;
if (!isEmail(accountValue)) {
setErrorFor(div0, "請輸入正確信箱格式");
}
}
//p檢查格式2
if (!passWordValue) {
//setErrorFor(div1, "");
document.getElementById("result1c").innerHTML = "請輸入您的密碼";
} else {
var objRegex = /^(?=.*\d)(?=.*[a-z])(?=.*[!@#$%^&*()])(?=.*[A-Z]).{6,30}$/;
var objRegex1 = /^(?=.*[^a-zA-Z0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*\d).{6,}$/;
let passWordValueLen = passWordValue.length;
if (!objRegex.test(passWordValue)) {
setErrorFor(div1, "請輸入密碼一個大寫, 一個特殊符號, 一個小寫, 6位數");
} else if (passWordValueLen < 6) {
setErrorFor(div1, "密碼需要6位數");
}
}
// if (validate()) {
// theMsg = document.getElementById("pscsp");
// theMsg.innerHTML = "驗證通過";
// } else {
// theMsg.innerHTML = "請再次檢查驗證碼";
// }
// p如果有錯不往下執行.....
if (hasError) {
return false;
}
var xhr1 = new XMLHttpRequest();
xhr1.open("Post", "<c:url value='/checkLogin' />", true);
xhr1.setRequestHeader("Content-Type",
"application/json;charset=UTF-8");
var jsonMember = {
account : accountValue,
passWord : passWordValue,
};
//顯示JSON格式 得到JSON格式後就不要顯示了.
//alert(JSON.stringify(jsonMember));
xhr1.send(JSON.stringify(jsonMember));
xhr1.onreadystatechange = function() {
if (xhr1.readyState == 4
&& (xhr1.status == 200 || xhr1.status == 201)) {
var result = JSON.parse(xhr1.responseText);
//console.log("=========xhr1.responseText===========" + xhr1.responseText);
//console.log("=========xhr1.responseText=====result======" + result);
if (result.msg2 && result.msg3 === accountValue
&& result.msg4 === passWordValue) {
alert(result.msg2 + "感謝光臨IMovie影城");
window.location.assign("http://localhost:8080/Movie/");
} else {
//alert(result.msg4);
}
}
};
};
};
//所有錯誤訊息方法
function setErrorFor(input, message) {
input.innerHTML = "<font color='red' size='-2'>" + message + "</font>";
hasError = true;
}
function isEmail(email) {
return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
.test(email);
}
//在全域性定義驗證碼
var code;
function createCode() {
code = "";
var codeLength = 4; //驗證碼的長度
var checkCode = document.getElementById("code");
var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C",
"D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O",
"P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"); //p隨機數
for (var i = 0; i < codeLength; i++) {
//p迴圈操作
var index = Math.floor(Math.random() * 36); //p取得隨機數的索引(0~35)
code += random[index]; //p根據索引取得隨機數加到code上
}
checkCode.value = code; //把code值賦給驗證碼
}
let theMsg;
//p校驗驗證碼
function validate() {
var inputCode = document.getElementById("ctl00_txtcode").value
.toUpperCase(); //p獲取輸入框內驗證碼並轉化為大寫
theMsg = document.getElementById("pscsp");
if (inputCode.length <= 0) {
//p若輸入的驗證碼長度為0
theMsg.innerHTML = "請輸入驗證碼!"; //p則彈出請輸入驗證碼
return false;
hasError = true;
} else if (inputCode != code) {
//p若輸入的驗證碼與產生的驗證碼不一致時
theMsg.innerHTML = "驗證碼輸入錯誤!"; //p則彈出驗證碼輸入錯誤
createCode(); //p重新整理驗證碼
document.getElementById("ctl00_txtcode").value = ""; //p清空文字框
return false;
hasError = true;
} else {
//p輸入正確時
theMsg.innerHTML = "驗證通過"; //彈出
return true;
}
}
</script>
<body>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'your-app-id',
autoLogAppEvents : true,
xfbml : true,
version : 'v10.0'
});
};
</script>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
<div id="fb-root"></div>
<script async defer crossorigin="anonymous"
src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v10.0"
nonce="QbLia7Ew"></script>
<jsp:include page="../nvigationBar.jsp"></jsp:include>
<div class="main page-template">
<!-- HEADER SECTION -->
<!-- HEADER TOP -->
<!-- END HEADER TOP -->
<!-- HEADER CENDER -->
<!-- END HEADER CENDER -->
<!-- HEADER MENU -->
<!-- End Atribute Navigation -->
<!-- Start Header Navigation -->
<!-- End Header Navigation -->
<!-- Collect the nav links, forms, and other content for toggling -->
<!-- end col-3 -->
<!-- end col-3 -->
<!-- end col-3 -->
<!-- end row -->
<!-- /.navbar-collapse -->
<!-- END HEADER MENU -->
<!-- END HEADER SECTION -->
<!-- START BREADCRUMB -->
<!-- END BREADCRUMB -->
<div class="inner-page">
<div class="login-page">
<div class="container">
<div class="row">
<div
class="col-lg-offset-3 col-md-offset-3 col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="login-form">
<h2></h2>
<form action="">
<a href="">還沒有帳號? <span class="green">趕快註冊.</span></a>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-4">
<br>
<div class="form-group ">
<label for="email">帳號(信箱) :</label>
</div>
<br>
<div class="form-group">
<label for="password">密碼 :</label>
</div>
</div>
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-8">
<div class="form-group">
<span id="result0c" style="color: red"></span><br> <input
id="account" class="form-control form-mane" required=""
type="text" placeholder="請輸入帳號(Email信箱)">
</div>
<div class="form-group">
<span id="result1c" style="color: red"></span><br> <input
id="passWord" class="form-control form-mane" required=""
type="password" placeholder="請輸入您的密碼">
</div>
<div class="buttons alert">
<input type="button" class="btn btn-buttons" id="submit"
value="Login" />
</div>
<div class="g-signin2" data-onsuccess="onSignIn"
data-longtitle="true"></div>
<div class="fb-login-button" data-width=""
data-size="medium" data-button-type="continue_with"
data-layout="default" data-auto-logout-link="false"
data-use-continue-as="true"></div>
Sign in with FaceBook
<div class="forgat-pass">
<div class="remember-me">
<input type="checkbox" id="remember" class="checkbox">
<label for="remember">記住我</label>
</div>
<div class="remember-me">
<a href="">忘記你的 <span class="green"> 密碼 ?</span></a>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<jsp:include page="../footer.jsp"></jsp:include>
</div>
```