javaScript에서 빠질 수 없는 것이 아이디 중복확인이겠죠? 여러 개발자들이 블로그 포스팅과 더불어 각각의 방법으로 작성한 것을 구경하기도 했었는데요. 오늘은 서론은 HTML 코드를 확인하는 것으로 정리하겠습니다.
서론 : 아이디 중복확인을 위한 코드
넘어가기 전에, 아래의 코드에 대한 간단한 설명을 작성해 봅니다. 아이디와 중복확인은 테이블로 구성되어 있고, 테이블 내에서 버튼을 누르면 중복확인이 되고, 닫기 버튼을 누르면 창이 닫아지는 설정입니다. 하지만, 중복확인에 대한 메시지를 띄워야 하기 때문에 테이블 구조가 아닌 div 코드에 입력 값이 없이 설정되어 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>window3.html/ window3.js</title>
<script defer src="window3.js"></script>
</head>
<body>
<h1>window3.html</h1>
<table>
<tr>
<th>아이디</th>
<td>
<input id="id" type="text"/>
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="중복확인" onclick="confirmChk()"/>
<input type="button" value="닫기" onclick="self.close()"/>
</td>
</tr>
</table>
<!-- 아이디 중복 검사 결과를 출력할 div 태그 -->
<div></div>
</body>
</html>
본론
1. 예시를 위 변수에 배열을 설정해 봅니다.
let dis = ['aaa', 'bbb', 'ccc', 'ddd'];
2. 중복 검사 할 아이디를 얻어옵니다. 이때, 변수를 설정하고, 어느 문서에서 어떻게 가져올 것인지 구체적으로 작성해 줍니다. trim을 작성해 주는 것도 잊지 않습니다.
function confirmChk() {
let id = document.getElementById('id').value.trim();3. ID 중복 검사의 결과를 출력할 <div> 태그도 함께 가져옵니다.
let div = document.getElementsByTagName('div')[0];이제 작성자가 입력한 아이디가, 아이디 목록에 존재하는지, 검사해봐야 할 텐데요. 이때 사용할 수 있는 함수는 indexOf함수로, 인수로 지정된 데이터가 배열의 몇 번째 index에 위치하는지 리턴하는 역할을 해봅니다. 데이터가 있다면 index를 리턴하고, 만일 데이터가 없다면 -1을 리턴하게 됩니다.
이 논리를 이용해서 if 함수에 indexOf함수를 적용해 볼 텐데요. if문에 index 함수를 넣어서 풀이하도록 하겠습니다.
(3-1) 만약, id 값의 길이가 0이라면, div에 innerHTML 요소를 입력해서 나타나도록 할게 "중복 검사할 아이디를 입력하세요"로
if (id.length == 0) {
div.innerHTML = '<br/><b style="color: red;">중복 검사할 아이디를 입력하세요</b>';
(3-2) 그렇지 않고, 아이디들의 인덱스값이 0보다 크거나 같다면, span 태그로 강조할게 "사용할 수 없는 아이디입니다"라고, 나타나도록 할게.
} else if (ids.indexOf(id) >= 0) {
div.innerHTML = '<br/><b><span style="color: red;">' + id +
'</span>는(은) 사용할 수 없는 아이디 입니다.</b>';(3-3) 만일 이 두 가지에 해당하지 않는다면. div요소에 span태그로 강조할게. " 사용할 수 있는 아이디라고"
} else {
div.innerHTML = '<br/><b><span style="color: red;">' + id +
'</span>는(은) 사용할 수 있는 아이디 입니다.</b><br/>' +(3-4) 그리고 만일 이 아이디를 사용하길 원하는 유저들에게 "사용하기"버튼을 제공할게.
'<input type="button" value="사용하기" onclick="insertID(\'' + id + '\')"/>';
여기서 주의!
자바스크립트의 함수는, 변수에 저장된 문자열을 호출하는 함수의 인수로 전달하려면 변수명만 사용하면 안 됩니다. 변수명만 사용하게 되면, 변수에 저장된 데이터를 문자열로 인식하는 것이 아니라, 변수 인식해서 변수가 정의되지 않는다는 에러가 발생하게 됩니다.
변수에 저장된 문자열을 함수의 인수 전달하려면, 변수 이름 앞 뒤 따옴표를 붙여서 전달해야 합니다. 큰 따옴표와 작은 따옴 가 모두 사용된 상태일 경우에는, 또 따옴표를 찍어야 한다면 \ 또는 / 을 사용하도록 합니다.
4.. 아이디를 입력하지 않았거나, 중복되는 아이디일 경우에는 아이디를 다시 입력하도록 지우고 포커스를 이동시킵니다.
document.getElementById('id').value = '';
5. focous() :특정 컨트롤로 포커를 이동시킵니다.
document.getElementById('id').focus();
6. 중복 검사를 통과한 아이디를 부모 창으로 넘기고 비밀번호에 포커스를 위치시킵니다.
function insertID(id) {
console.log(id);
opener.document.getElementsByName('id')[0].value = id;
opener.document.getElementsByName('password')[0].focus();
self.close();
}
결론
전체 코드 정리를 해보면 아래와 같습니다.
// window3.js
let ids = ['aaa', 'bbb', 'ccc', 'ddd'];
function confirmChk() {
let id = document.getElementById('id').value.trim();
let div = document.getElementsByTagName('div')[0];
if (id.length == 0) {
div.innerHTML = '<br/><b style="color: red;">중복 검사할 아이디를 입력하세요</b>';
} else if (ids.indexOf(id) >= 0) {
div.innerHTML = '<br/><b><span style="color: red;">' + id +
'</span>는(은) 사용할 수 없는 아이디 입니다.</b>';
} else {
div.innerHTML = '<br/><b><span style="color: red;">' + id +
'</span>는(은) 사용할 수 있는 아이디 입니다.</b><br/>' +
'<input type="button" value="사용하기" onclick="insertID(\'' + id + '\')"/>';
}
document.getElementById('id').value = '';
document.getElementById('id').focus();
}
function insertID(id) {
console.log(id);
opener.document.getElementsByName('id')[0].value = id;
opener.document.getElementsByName('password')[0].focus();
self.close();
}
'JavaScript' 카테고리의 다른 글
| 제이쿼리(J-Query) 다운로드 (0) | 2023.11.29 |
|---|---|
| JavaScript : 문서의 탐색 = DOM 탐색 (0) | 2023.11.28 |
| javascript 자식 창에서 부모 창에 데이터 가져오기 (0) | 2023.11.27 |
| javaScript DOM 객체와 이벤트 처리(1) (0) | 2023.11.23 |
| JavaScript 기본개념(3) 상속과 상속의 실습예제 (0) | 2023.11.23 |
댓글