iT邦幫忙

2025 iThome 鐵人賽

DAY 20
0
佛心分享-SideProject30

最近的工程師真沒用系列 第 20

第二十天-註冊頁面跳轉

  • 分享至 

  • xImage
  •  

我今天在那個註冊頁面,讓他註冊成功後可以跳轉,如下

<script>
	const userPattern = '[A-Za-z][A-Za-z0-9\\-]*';
	const passwordPattern = '(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{8,}';
	let username = '';
	let password = '';
	let showModal = false;
	let registerTitle = '';

	let registerMsg = '';
	async function register() {
		const res = await fetch('/api/register', {
			method: 'POST',
			headers: { 'Content-Type': 'application/json' },
			body: JSON.stringify({ username, password })
		});

		const data = await res.json();
		console.log(data);
		if (res.ok) {
			registerTitle = '🎉 恭喜!';
			registerMsg = '註冊成功!';
		} else {
			registerTitle = '';
			registerMsg = '註冊失敗!';
		}
		showModal = true;
	}

	async function login() {
		const res = await fetch('/api/login', {
			method: 'POST',
			headers: { 'Content-Type': 'application/json' },
			body: JSON.stringify({ username, password })
		});
		console.log(await res.json());
	}
	function confirmSuccess() {
		showModal = false;
		registerTitle = '';
		registerMsg = '';
		location.reload(); // 模擬 F5
	}
</script>

越寫越有種早期 PHP 5 的感覺
今天簡單開個 showModal 來控制彈跳視窗
然後原來 js 的變數可以這樣直接插入在網頁上,svelte kit 好爽喔

<h3 class="font-bold text-lg">{registerTitle}</h3>

今天的情緒抒發:
今天壓線完成太恐怖了,節奏有點歪掉


上一篇
第十九天-註冊登入登出前後端串接
下一篇
第二十一天-怪物資訊建立
系列文
最近的工程師真沒用26
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言