아이디와 비밀번호를 생성하는 단계(회원가입)에서 흔히 볼 수 있는 유효성검사를 간단하게 제작해보았다!
춘식이는 덤으로...ㅎ😊
파일은 총 3개로 index.html과 script.js, style.css로 구성되어 있다. DOM 객체를 주로 사용한 것이기에 script의 양이 가장 많다...
<body>
<main>
<img
class="logo"
src="./images/logo.png"
alt="CODE_STATES_LOGO"
/>
<fieldset>
<input type="text" id="username" placeholder="아이디" />
</fieldset>
<div class="success-message hide">사용할 수 있는 아이디입니다</div>
<div class="failure-message hide">아이디는 네 글자 이상이어야 합니다</div>
<div class="onlyNumberAndEnglish hide">아이디는 숫자나 영어만 사용해야 합니다</div>
<fieldset>
<input type="password" id="password" placeholder="비밀번호" />
</fieldset>
<div class="useStrongPassword hide">비밀번호는 8자 이상이어야 하고, 영어/숫자/특수문자의 조합으로 사용해야 합니다</div>
<fieldset>
<input
type="password"
id="password-retype"
placeholder="비밀번호 확인"
/>
</fieldset>
<div class="mismatch-message hide">비밀번호가 일치하지 않습니다</div>
<fieldset class="signup">
<button class="signup1 hide">회원가입</button>
<button class="signup2">가입 정보를 정확히 입력해주세요</button>
</fieldset>
<script src="script.js"></script>
</main>
</body>다른건 다 제외하고 body요소만 가져왔다. 위의 구현 결과에도 나와있듯이 아이디와 패스워드가 조건에 맞지 않게 입력이 될 경우 빨간색의 경고문이 뜨도록 설정해놓았다. 해당 경고문들의 내용과 각 class의 네임과 id, placeholder 등을 설정한 것이 전부라고 볼 수 있다.
let elInputUsername = document.querySelector('#username')
let elInputPassword = document.querySelector('#password')
let elInputPasswordRetype = document.querySelector('#password-retype')
let elFailureMessage = document.querySelector('.failure-message')
let elSuccessMessage = document.querySelector('.success-message')
let elOnlyNumberEnglish = document.querySelector('.onlyNumberAndEnglish')
let elMismatchMessage = document.querySelector('.mismatch-message')
let elUseStrongPassword = document.querySelector('.useStrongPassword')
let signupButton1 = document.querySelector('.signup1')
let signupButton2 = document.querySelector('.signup2')본격적으로 script.js파일로 넘어가보자. querySelector를 통해 사용해야 하는 클래스와 아이디를 전부 긁어모았다.
function isMoreThan4Length(value) {
return value.length>=4
}
function isMatch (password1, password2) {
return (password1 === password2)
}
function onlyNumberAndEnglish(str) {
return /^[A-Za-z0-9][A-Za-z0-9]*$/.test(str);
}
function strongPassword(str) {
return /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/.test(str);
}아이디는 4글자 이상이어야하고, 비밀번호와 비밀번호 확인은 같아야하는 조건함수를 선언한다.
아래 함수는 아이디는 오직 영어와 숫자로 구성해야하고, 패스워드는 영어, 숫자, 특수문자가 포함되어야 하는 조건함수로 선언하였다.
elInputUsername.onkeyup = function () {
if (isMoreThan4Length(elInputUsername.value)) {
elFailureMessage.classList.add('hide')
if(onlyNumberAndEnglish(elInputUsername.value)) {
elSuccessMessage.classList.remove('hide')
elOnlyNumberEnglish.classList.add('hide')
}
else {
elSuccessMessage.classList.add('hide')
elOnlyNumberEnglish.classList.remove('hide')
}
}
else {
elFailureMessage.classList.remove('hide')
elSuccessMessage.classList.add('hide')
elOnlyNumberEnglish.classList.add('hide')
}
if (onlyNumberAndEnglish(elInputUsername.value) && isMoreThan4Length(elInputUsername.value) && strongPassword(elInputPassword.value) && isMatch(elInputPassword.value, elInputPasswordRetype.value)) {
signupButton1.classList.remove('hide')
signupButton2.classList.add('hide')
}
else {
signupButton2.classList.remove('hide')
signupButton1.classList.add('hide')
}
}구현은 간단하다. isMoreThan4Length 함수 리턴값이 True일 경우, 4글자 이상을 입력했다는 뜻이므로 FailureMessage클래스에 hide클래스를 추가하여 display:none을 발동시킨다.
하지만 4글자 입력만으로 오류가 해결되는 것은 아니다! 해당 아이디가 영어와 숫자로만 구성되어있는지도 확인한다. 이후 모두 True가 리턴될 경우 SuccessMessage 클래스의 hide클래스를 삭제하여 SuccessMessage가 보이도록 하고, 아닐 경우 다른 OnlyNumberEnglish 메시지가 보이도록 구현한다.
이러한 방식으로 아래에도 똑같이 진행된다. signupButton의 경우 두개를 선언하여 회원가입 버튼과 '가입정보 확인'버튼이 따로 드러나게끔 적용하였다.
elInputPassword.onkeyup = function() {
if(strongPassword(elInputPassword.value)) {
elUseStrongPassword.classList.add('hide')
}
else elUseStrongPassword.classList.remove('hide')
if (isMatch(elInputPassword.value, elInputPasswordRetype.value)) {
elMismatchMessage.classList.add('hide')
}
else elMismatchMessage.classList.remove('hide')
if (onlyNumberAndEnglish(elInputUsername.value) && isMoreThan4Length(elInputUsername.value) && strongPassword(elInputPassword.value) && isMatch(elInputPassword.value, elInputPasswordRetype.value)) {
signupButton1.classList.remove('hide')
signupButton2.classList.add('hide')
}
else {
signupButton2.classList.remove('hide')
signupButton1.classList.add('hide')
}
}
elInputPasswordRetype.onkeyup = function () {
if (isMatch(elInputPassword.value, elInputPasswordRetype.value)) {
elMismatchMessage.classList.add('hide')
}
else elMismatchMessage.classList.remove('hide')
if (onlyNumberAndEnglish(elInputUsername.value) && isMoreThan4Length(elInputUsername.value) && strongPassword(elInputPassword.value) && isMatch(elInputPassword.value, elInputPasswordRetype.value)) {
signupButton1.classList.remove('hide')
signupButton2.classList.add('hide')
}
else {
signupButton2.classList.remove('hide')
signupButton1.classList.add('hide')
}
}이건 패스워드와 관련된 유효성 검사인데, 매커니즘은 위의 아이디 유효성검사와 동일하다. 상단의 구현결과를 보면서 코드를 읽으면 이해하기 쉽다.
이후에 css파일로 hover속성이나, 다른 간단한 속성(border, image 등)을 추가하여 마무리하였다🫡🫡
