[svelte]회원가입 폼

App.svelte

<script>
import Terms from './Terms.svelte';
import SignUpButton from './SignUpButton.svelte';

	
const termsName = "이용약관"
let termsContent = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus ante at quam cursus maximus. Aliquam eleifend enim eu feugiat porttitor. Nulla dictum, metus eu fringilla convallis, risus nulla dictum lectus, auctor maximus ex nisi porta risus. Curabitur at laoreet metus, sit amet accumsan sem. Ut in magna finibus, efficitur nibh vitae, auctor enim. Duis eu augue a erat rutrum molestie sed id mauris. Etiam quis faucibus ligula.
Aliquam vitae dui vel dolor tempor faucibus. Nam feugiat orci sit amet elit interdum imperdiet. Nulla vitae placerat libero, a viverra erat. Duis ut ante et lorem lacinia feugiat. Aenean at sagittis ex. Quisque commodo auctor libero in bibendum. Duis porttitor at nisi eu condimentum.`;

function handleClick() {
	if (errorId || !emailId ) { return alert("아이디틀림!")}
	if (errorPw || !pwId ) { return alert("비밀번호틀림!")}
	if (errorName || !inputName ) { return alert("비밀번호 재확인!")}
	if (errorTel || !phoneTel ) { return alert("전번틀림!")}
	if (!termChecked) {return alert("체크좀!")}
	console.log(`${emailId} | ${pwId} | ${inputName} | ${phoneTel}`)
	alert("success")
 }	

const checkEmailFunc = (uid) => {
	if (emailId){
		errorId = !emailId.match(/^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i);
		}
	}

const checkPwFunc = (upw)=> {
	if(pwId){
		errorPw = !pwId.match(/^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-])(?=.*[0-9]).{8,16}$/);
	}
}

function checkPw() {
	if(pwId === rePwId ){
		reErrorPw = false;
	}	else{
		reErrorPw = true;
	}
}	

const checkNameFunc = (uname)=> {
	if(inputName){
		errorName = !inputName.match(/^[가-힣a-zA-Z]{2,}$/);
	}
}

const checkphoneTelFunc = (tel)=> {
	if(phoneTel){
		errorTel = !phoneTel.match(/^[0-9]{10,11}$/);
	}
}

let emailId;
let errorId = false;
$: { checkEmailFunc(emailId); }

let pwId;
let rePwId;
$: {checkPw(rePwId);}

let reErrorPw = false;
let errorPw = false;
$: { checkPwFunc(pwId); }
	
let inputName;
let errorName = false;
$: { checkNameFunc(inputName); }
	
let phoneTel;
let errorTel = false;
$: { checkphoneTelFunc(phoneTel); }
	
let termChecked = false;
	

	
</script>

<div class="signup-wrapper">
	<input 
				 type="email"
				 bind:value={emailId}
				 placeholder="사용하실 ID를 입력해주세요.(수신 가능 E-mail)"
				 class={errorId ? "email-id in-error": "email-id" }
				 >
	{#if errorId}
		<p class="warning">이메일 형식이 올바르지 않습니다.</p>
	{/if}
	
	<input type="password"
				 bind:value={pwId}
				 placeholder="영문+숫자+특수문자 8~16자리(특수문자()괄호는 사용불가)"
				 class={errorPw ? "pw-id in-error": "pw-id" }
				 >
	{#if errorPw}
		<p class="warning">비밀번호 형식이 올바르지 않습니다.</p>
	{/if}
	
	<input type="password"
				 placeholder="패스워드를 다시 입력해주세요."
				 bind:value={rePwId}
				 class={reErrorPw ? "repw-id in-error": "repw-id" }
				 >
	{#if reErrorPw}
		<p class="warning">입력값이 일치하지 않습니다.</p>
	{/if}
	
	<input type="text"
				 placeholder="이름을 입력해 주세요."
				 bind:value={inputName}
				 class={ errorName ? "name-id in-error": "name-id" }
				 >
	{#if errorName}
		<p class="warning">한글과 영문만 입력 가능합니다.</p>
	{/if}
	
	<input type="tel"
				 placeholder="휴대폰번호 '-' 표시없이 입력해주세요."
				 bind:value={phoneTel}
				 class={ errorTel ? "phoneTel-id in-error": "phoneTel-id" }
				 >
	{#if errorTel}
		<p class="warning">숫자만 입력 가능합니다.</p>
	{/if}
</div>

<Terms termsName={termsName} bind:termChecked={termChecked}>	
	<div class="termsTextArea">{termsContent}</div>
</Terms>
<div>
	<SignUpButton 
					btnText="회원가입하기 (만14세 이상)" 
				  btnColor="black"
				  on:click={()=>handleClick()}>
	</SignUpButton>	
	</div>

<style>
	.signup-wrapper {
		margin-bottom: 50px;  
		padding: 10px;
	}
	.signup-wrapper input {
		width: 500px;
		margin-bottom: 12px;
	}
	
	.termsTextArea {
		height:100px;
		width: 400px;
		overflow-y: scroll;
	border: 1px solid black;
	}
	
	.signup-wrapper input.in-error {
		border-color: red;
	}
	
	.warning{
		color:red;
		margin-top:0;
	}
</style>

---

SignUpButton.svelte

<script>
	export let btnText;
	export let btnColor;
	
	
</script>

<button style="background-color:{btnColor};" on:click>
		{btnText}
</button>


<style>
	button{
		width:250px;
		height:50px;
		color:white;
	}

</style>

---

Terms.svelte

<script>
	export let termsName;
 	export let termChecked;

</script>

<h3>
	{termsName}
</h3>
<p>
	<slot></slot>
</p>
<input class="checkBox" type=checkbox id="inputCheckbox" bind:checked={termChecked}>
	<label class="checkBox" for="inputCheckbox">[필수]약관에 동의합니다.</label>


<style>
.checkBox{
	 display: inline-block;
	}
</style>

---

회원가입 폼

▶기능 :

정규 표현식을 이용한 회원가입 폼.

▶ 유의사항 :

App, SignUpButton, Terms 3개의 컴포넌트로 구성됬다.

App에는 정규 표현식을 이용하여 회원가입 조건을 비교하는 코드들이 있다.

SignUpButton 에는 app에서 props로 btnColor , btnText, on:click 을 가져온다.
온클릭시 app에있는 handleClick 함수가 실행되고. 핸들 클릭 함수에는 회원가입 input의 값을 정규표현식으로 비교하여 틀릴시 alert를 리턴하게된다.

Terms 컴포넌트에는 app 컴포넌트에서 termsName, termChecked를 props로 가져온다
termsName에는 이용약관이름을 가져왔고
termChecked는 디폴트 false다 체크박스에 체크를 하면 true로 바뀐다.
SignUpButton에서 termChecked가 false이면 경고 alert가 나온다.