아이디 중복체크 버튼
아이디 중복체크를 구현하고자한다
우선 아이디 버튼 먼저 구현을 해보겠다.
1
<button type="button" id="btnConfirm" class="btn btn-primary">아이디중복확인</button>
버튼으로 클릭시 btnconfirm으로 간다
여기서 문제사항이 생겼다 아이디중복체크를 안눌러도 회원가입버튼을 눌렀을시 아이디중복체크를 구현을해주어서 버튼기능의 역활이 필요없었던것이다
그래서 회원가입버튼에서 아이디 중복체크 기능을 빼주고 아이디 중복체크 버튼에 기능을 다시 넣어주었다
아이디 중복체크 ajax
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
$("#btnConfirm").on("click", function() {
// 모든 공백 체크 정규식
var emptCheck = /\s/g;
// 영문 대소문자, 숫자로만 이루어진 4~12자리 정규식
var idPwCheck = /^[a-zA-Z0-9]{4,12}$/;
if($.trim($("#userId").val()).length <= 0)
{
alert("사용자 아이디를 입력하세요.");
$("#userId").val("");
$("#userId").focus();
return;
}
if (emptCheck.test($("#userId").val()))
{
alert("사용자 아이디는 공백을 포함할 수 없습니다.");
$("#userId").focus();
return;
}
if (!idPwCheck.test($("#userId").val()))
{
alert("사용자 아이디는 4~12자의 영문 대소문자와 숫자로만 입력하세요");
$("#userId").focus();
return;
}
//ajax
$.ajax({
type: "POST",
url: "/user/idCheck",
data: {
userId: $("#userId").val()
},
datatype: "JSON",
beforeSend: function (xhr){
xhr.setRequestHeader("AJAX", "true");
},
success:function(response){
if(response.code == 0)
{
alert("사용가능한 아이디입니다.");
var hz = document.getElementById('hz');
if (hz.innerText == "A") {
hz.innerText = "B";
}
$("#userPwd1").focus();
//아이디 중복 없으면 회원가입 진행
//fn_userReg();
}
else if(response.code == 100)
{
alert("회원 아이디가 중복되었습니다.");
$("#userId").focus();
}
else if(response.code == 400)
{
alert("파라미터 값이 올바르지 않습니다.");
$("#userId").focus();
}
else if(response.code == 500)
{
alert("회원 가입중 오류가 발생하였습니다.");
$("#userId").focus();
}
else
{
alert("회원 가입중 오류가 발생했습니다.");
$("#userId").focus();
}
},
complete:function(data)
{
//응답이 종료되면
icia.common.log(data);
},
error:function(xhr, status, error)
{
icia.common.error(error);
}
});
});
여기서 중요한점은 아이디 중복체크버튼을 안눌렀을때 최종 회원가입버튼 기능을 눌렀을때 아이디 중복체크를 해주세요라는 버튼체크여부를 해주는것이였다
아이디 중복체크 버튼체크여부
버튼에
1
<span id="hz" style="display:none;">A</span><br>
A라는 값을 넣어준후
- 아이디중복체크클릭안하고 회원가입완료 버튼을 눌렀을때
1
2
3
4
5
6
var hz = document.getElementById('hz');
if (hz.innerText == "A") {
alert("아이디 중복확인을 눌러주세요");
$("#userId").focus();
return;
}
아이디 중복체크 버튼을 안눌렀다 ALERT를 띄어주고
- 아이디중복체크클릭 후 회원가입완료 버튼을 눌렀을때
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
//ajax
$.ajax({
type: "POST",
url: "/user/idCheck",
data: {
userId: $("#userId").val()
},
datatype: "JSON",
beforeSend: function (xhr){
xhr.setRequestHeader("AJAX", "true");
},
success:function(response){
if(response.code == 0)
{
alert("사용가능한 아이디입니다.");
var hz = document.getElementById('hz');
if (hz.innerText == "A") {
hz.innerText = "B";
}
$("#userPwd1").focus();
//아이디 중복 없으면 회원가입 진행
//fn_userReg();
}
성공시 B값으로 바꿔줘서 버튼클릭여부를 확인하는것을 구현하였다
회원정보 수정안할시 버튼 비활성화
프로젝트 기준 회원정보수정 아무 값을 수정하지 않아도 수정되었다고 넘어가는 상황인데 수정된 부분이 없으면 없다고 알리는 기능이 있으면 좋을 듯 하다
참고한 소스
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html>
<head>
<title>Enable/Disable a HTML button</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
Name: <input type="text" id="reco" />
<input type="submit" id="submit" disabled="disabled" />
</body>
<script>
$(document).ready(function () {
$('#reco').on('input change', function () {
if ($(this).val() != '') {
$('#submit').prop('disabled', false);
}
else {
$('#submit').prop('disabled', true);
}
});
});
</script>
</html>
수정한소스
1
2
3
4
5
6
7
8
9
10
$(document).ready(function() {
$('#btnUpdate').prop('disabled', true);
$('#userPwd1, #userPwd2, #userName, #userEmail').on('input change', function(){
$('#btnUpdate').prop('disabled', false);
});
페이지가 시작할때 버튼은 비활성화를 시켜놓고 input 박스에서 값이 수정될때에 버튼값을 활성화를 시켜주었다
수정시 버튼취소 구현
1
2
3
4
5
6
7
8
9
10
<button type="button" id="btnCancle" class="btn btn-primary">취소</button>
버튼을 만든후
$("#btnCancle").on("click", function() {
location.href = "/board/list";
});
리스트로 가게 해주었다.