기본적으로 <body></body>안에 비밀번호 확인 및 검사 칸을 만들어보면,
<body>
비밀번호 : <input type="text" id="pw">
<br><br>
비밀번호 확인 : <input type="text" id="pw-re">
<br><br>
<input type="button" value="검사!">
<br><br>
검사 결과 : <input type="text" id="result">
이렇게 기본 골격을 만들어 주고 그 위 <head></head> 태그안에 기능을 넣어준다.
함수 이름은 가급적 너무 흔한 단어는 제외하고 구현해준다. 내장된 함수 이름과 겹칠 수 있기 때문이다.
현재 비밀번호/비밀번호 확인/검사 결과 총 3개를 제어해야하는 함수를 만들어야 한다. var를 통해 만들어준다.
<script>
function paswordCheck(){
var pw = document.querySelector("#pw");
var pw2 = document.querySelector("#pw-re");
var result = document.querySelector("#result");
if(pw.value==pw2.value){
result.value="통과!";
}
else{
result.value="비밀번호가 일치하지 않습니다!";
}
}
</script>
여기서 #으로 쓰는 이유는 id라서 그렇다. 클래스였다면 . 을 썼을 것이다.
또한 팁으로 [F12키]내 콘솔에 passwordCheck(); 하고 엔터를 누르면 함수가 잘 지정되어있는지 확인할 수있다.
이정도면 마무리 되었다 생각할 수 있지만, pw와 pw2값이 존재하지 않아도 통과가 되는 상황이 있을 수 있다.
때문에, 미입력인 경우도 고려해야하고, 미입력은 글자 자체가 비어있는지 검사하거나 길이로 검사할 수 있다.
if(pw.value.length>0 && pw2.value.length>0 && pw.value == pw2.value) {
result.value="통과!";
}
else{
result.value="비밀번호가 일치하지 않습니다!";
}
라고 해도되고,
if(pw.value && pw2.value && pw.value==pw2.value) {
result.value="통과!";
}
else{
result.value="비밀번호가 일치하지 않습니다!";
}
라고 해도 올바른 코드가 된다.
'JAVASCRIPT' 카테고리의 다른 글
| [JAVASCRIPT#08] input이벤트, onblur이벤트 (0) | 2020.12.23 |
|---|---|
| [JAVASCRIPT#07]자바스크립트 이미지 확대 축소 및 응용 (0) | 2020.12.23 |
| [JAVASCRIPT#05] 글자 복사 함수 (0) | 2020.12.22 |
| [JAVASCRIPT#04] 자바스크립트 함수, 함수 활용(태그제어) (0) | 2020.12.22 |
| [JAVASCRIPT#03]자바스크립트와 자바의 차이 (0) | 2020.12.22 |