유효성 검사(validation)
- 특정 값은 반드시 입력해야 합니다. (아이디, 이메일, 비밀번호, 이름, 전화번호 등)
- 비밀번호는 n 자릿수 이상이어야 하고, 숫자나 특수문자를 반드시 포함해야 합니다.
- 비밀번호와 비밀번호 확인란에 입력된 문자가 동일해야 합니다.
- 신용카드의 경우, 입력한 신용카드의 번호가 유효해야 합니다.
위와 같은 기능을 의미하며 유효성 검사의 목표는 핵심 기능에 대해 작동이 가능한 MVP를 만드는 것 이다.
** MVP(Minimum Viable Product) : 고객의 피드백을 받아 최소한의 기능을 구현한 제품(최소 기능 제품)
코드 스테이츠 unit11 과제로 회원가입 페이지를 만들었다.
HTML은 원본 코드에서 phone number 입력 칸 및 에러 메세지 요소를 추가하고 모든 성공/오류 메세지들을 영어로 변경했다. css는 원본 코드에서 색이나 폰트, 로고 정도만 변경했는데 그래서 그런지 코드가 정리가 안됐다..ㅎㅎ
여유 생길 때 더 다양한 유효성 검사를 추가해서 완성해야겠다.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>유효성 검사</title>
<link rel="stylesheet" href="style.css" />
<style>
@import url('https://fonts.googleapis.com/css2?family=Concert+One&family=Press+Start+2P&display=swap');
</style>
<script src="validator.js"></script>
</head>
<body>
<main>
<img
class="logo"
src="./images/Hannahhh_logo.png"
alt="LOGO"
/>
<fieldset>
<input type="text" maxlength='11' id="username" placeholder="ID" />
</fieldset>
<div class="success-message hide">This username is available. Do you wish to use it?</div>
<div class="failure-message hide">You can only use between 4~11 letters, numbers.</div>
<fieldset>
<input type="password" id="password" placeholder="password" />
</fieldset>
<fieldset>
<input
type="password"
id="password-retype"
placeholder="Confirm password"
/>
</fieldset>
<div class="mismatch-message hide">The password and confirmation password do not match.</div>
<div class="miss-message hide">You can only use between 8~11 letters, numbers, and special characters.</div>
<fieldset>
<input type = 'text' maxlength='11' id="cellPhone" placeholder="Phone number">
</fieldset>
<div class='miss-phone hide'>Invalid phone number. Please try again</div>
<fieldset class="signup">
<button id ='btn'>CREATE ACCOUNT</button>
</fieldset>
<script src="script.js"></script>
</main>
</body>
</html>
CSS
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: 'Concert One', cursive;
color: var(--gray-900);
background-color: var(--white);
font-size: var(--default);
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background:linear-gradient( #bde0fe, #ffc8dd );
color: #cdb4db;
}
main {
display: flex;
flex-direction: column;
align-items: center;
padding: 24px;
box-shadow: var(--big-box);
border: 1px solid var(--gray-10);
border-radius: 4px;
background-color: rgb(255, 255, 255);
}
h1 {
text-align: center;
font-size: var(--h1);
}
fieldset {
display: flex;
flex-direction: column;
border-radius: 4px;
border-style: inset;
border-color: #ffdfeb;
justify-content: center;
margin: 4px;
padding: 8px 12px;
}
fieldset > label {
display: inline-block;
width: 112px;
}
main > div {
color: var(--peach-600);
font-size: var(--t2);
padding-left: 20px;
}
.logo {
margin: 12px auto 36px;
width: 120px;
}
button {
cursor: pointer;
border: none;
border-radius: 4px;
width: 12rem;
height: 2.25rem;
color: var(--white);
background-color: #cdb4db;
font-size: var(--t1);
transition: all 0.3s;
}
button:hover {
background-color: #e7daee;
}
input {
border: none;
width: 12rem;
font-size: var(--t1);
}
input::placeholder {color:#ccc;}
input:focus {
outline: none;
}
.hide {
display: none;
}
.signup {
margin: 20px;
border: none;
color: white;
background-color: #cdb4db;
}script.js
let elInputUsername = document.querySelector('#username');
let elFailureMessage = document.querySelector('.failure-message');
let elSuccessMessage = document.querySelector('.success-message');
let pwInputPassword = document.querySelector('#password');
let pwInputPasswordRe = document.querySelector('#password-retype');
let pwFailureMessage = document.querySelector('.mismatch-message');
let pwMissMessage = document.querySelector('.miss-message');
let InputCellPhone = document.querySelector('#cellPhone');
let cpFailureMessage = document.querySelector('.miss-phone');
//아이디
elInputUsername.onkeyup = function (){
//4자리 이상이 true면
if(isMoreThan4Length(elInputUsername.value) && onlyNumberAndEnglish(elInputUsername.value)){
//성공 메시지가 보여야 함
elSuccessMessage.classList.remove('hide');
//실패 메시지가 가려져야 함
elFailureMessage.classList.add('hide');
}
//4자리 이상이 false면
else{
//성공 메시지가 가려져야 함
elSuccessMessage.classList.add('hide');
//실패 메시지가 보여야 함
elFailureMessage.classList.remove('hide');
}
}
//비밀번호
pwInputPassword.onkeyup = function(){
// 비밀번호 양식(유효성 함수 검증)이 true면
if(strongPassword(pwInputPassword.value)){
pwMissMessage.classList.add('hide');
}
// 비밀번호 양식(유효성 함수 검증)이 false면
else{
pwMissMessage.classList.remove('hide');
}
// 비밀번호 입력 값과 비밀번호 확인 입력 값이 같다면
if(isMatch (pwInputPassword.value, pwInputPasswordRe.value)){
pwFailureMessage.classList.add('hide');
}
// 비밀번호 입력 값과 비밀번호 확인 입력 값이 다르면
else{
pwFailureMessage.classList.remove('hide');
}
}
//비밀번호 확인
pwInputPasswordRe.addEventListener('keyup', () => { //addEventHandler 함수 사용 keyup
if(isMatch (pwInputPassword.value, pwInputPasswordRe.value)){ //유효성 검사
pwFailureMessage.classList.add('hide');
}
else{
pwFailureMessage.classList.remove('hide');
}
})
//휴대전화
InputCellPhone.addEventListener('keyup', () => { //addEventHandler 함수 사용 keyup
if(onlyNumber(InputCellPhone.value)){ //유효성 검사
cpFailureMessage.classList.add('hide');
}
else{
cpFailureMessage.classList.remove('hide');
}
})
validator.js
// 4글자 이상이면 true
function isMoreThan4Length(value) {
return value.length >= 4;
}
// 두 값이 같으면 true
function isMatch (password1, password2) {
return password1 === password2;
}
// 숫자로만 최소 10자리
function onlyNumber(num){
return /^\d{10,}$/.test(num);
}
// [유효성 검증 함수]: 영어 또는 숫자만 가능(무조건 영어로 시작)
function onlyNumberAndEnglish(str) {
return /^[A-Za-z][A-Za-z0-9]*$/.test(str);
}
// [유효성 검증 함수]: 최소 8자 이상하면서, 알파벳과 숫자 및 특수문자(@$!%*#?&) 는 하나 이상 포함
function strongPassword(str) {
return /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/.test(str);
}