본문 바로가기
✨ Front-end/jQuery

[jQuery] var( ) 비밀번호 일치 여부 확인하기, (중복체크)

by 환풍 2023. 9. 4.
728x90

 

See the Pen Untitled by ParkJooHong (@ParkJooHong) on CodePen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function(){
    $('#pwd2').keyup(function(){
        var pass1=$('#pwd1').val();
        var pass2=$('#pwd2').val();
 
        if(pass1==pass2)
            $('#result').html("비밀번호가 일치합니다").css('color',"green");
        else
            $('#result').html("비밀번호가 일치하지 않습니다").css('color','red');
    });    
});
</script>
</head>
<body>
<h3>비밀번호를 입력하시오</h3>
비밀번호 : <input type="text" id="pwd1"/>&nbsp;&nbsp;&nbsp;
비밀번호확인 : <input type="text" id="pwd2"/>&nbsp;&nbsp;&nbsp;
<span id="result"></span>
</body>
</html>
cs

 

var pass1=$('#pwd1').val();

 비밀번호 필드(#pwd1)에서 입력된 값을 가져와 변수 pass1에 저장한다.

var pass2=$('#pwd2').val();

 비밀번호 확인 필드(#pwd2)에서 입력된 값을 가져와 변수 pass2에 저장한다.
if(pass1==pass2) { ... } else { ... }: pass1과 pass2를 비교하여 비밀번호가 일치하는지 확인한다.

$('#result').html(...):

결과 메시지를 표시할 <span> 요소(#result)의 내용을 변경한다.
.css(...)를 사용하여 텍스트의 색상을 변경한다. 일치할 경우 녹색('green'), 일치하지 않을 경우 빨강('red')으로 표시된다.

 

받아온 데이터를 통해 아이디 중복 체크하기.

See the Pen Untitled by ParkJooHong (@ParkJooHong) on CodePen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $(document).ready(function(){
        var emp = {"id":"admin"}
        $('div').keyup(function(){
            var a = $('#id').val();
            if(a == emp.id){
                $('#output').text("사용할수 없는 아이디 입니다.").css('color','red');
            }else{
                $('#output').text("사용가능한 아이디 입니다.").css('color','green');
            }
        });
    });
</script>
</head>
<body>
<div>
아이디: <input type="text" id="id">
<p id = output>아이디를 입력하세요.</p>
</div>
</body>
</html>
cs

emp에 json 객체로 id 값을 admin 넣어주었다.

이후 html에서 텍스트를 치게됐을때, admin을 치면 아이디를 사용할 수 없도록 구현한 코드이다.

 

이런식으로 ajax를 돌려 컨트롤러에서 db에 저장된 아이디를 map으로 받아와 위 코드를 통해 id 중복검사를 진행한다면 더욱 편리하게 중복체크를 할 수 있을 것이다.

반응형
저작자표시 비영리 변경금지

'✨ Front-end > jQuery' 카테고리의 다른 글

[jQuery] 버튼 hover로 색상변경 addClass, removeClass  (0) 2023.09.04
[jQuery] JSON 표기법, 임시 회원으로 로그인 성공, 실패 처리해보기  (0) 2023.09.04
[jQuery] innerHTML, text 바꾸기  (0) 2023.09.04
[jQuery] 보이기 숨기기 기능 (show, hide, toggle, slideup, fade)  (0) 2023.09.04
[jQuery] 가장 기초적인 $( function() { .... } 에 대해  (0) 2023.09.04

관련글

댓글

티스토리툴바