고정 헤더 영역
상세 컨텐츠
본문
반응형
코드는 아래와 같습니다.
아래 코드 구성은 상단에 특수 문자를 정리하고
let ss= ['!', '@', '#', '$', '%', '^', '&', '*', '(', ')', ':', ';', '\'', '~', '`'];
위의 특수 문자가 사용자 아이디 생성하면서 포함할 경우
알림창이 뜨면서 특수문자를 자동으로 지워버립니다.
let message = "";
let userid = $("#userid").val();
let lastword = userid.substring(userid.length-1, userid.length);
let result = ss.find (re => re == lastword);
if (result != null) {
alert("특수문자는 허용하지 않습니다.");
userid = userid.substring(0, userid.length-1);
$("#userid").val(userid);
}
그리고 아이디의 길이를 4자 초과 20자 미만으로 설정해서 이상한 암호 설정을 예방합니다.
if (userid.length < 4 || userid.length >20) {
message="<font color='red'>4~20자 사이로 입력해 주세요.</font>";
$("#userid_message").html(message);
}else{
그 후 ajax를 사용하여 사용자가 입력하는 ID의 사용가능 여부를 서버에 저장되어 있는 아이디와 비교하여 사용가능한 아이디 여부를 실시간으로 확인 합니다.
$.ajax({
type:"post",
data: {userid: userid},
url:"useridCheck.jsp",
datatype:"text",
success: function(data) {
data = $.trim(data);
if (data == "ok") {
message ="<font color='blue'>사용가능한 아이디 입니다..</font>";
}else if ( data == "error1") {
message ="<font color='gray'>형식에 맞지 않는 아이디입니다.</font>";
}else if ( data == "error2" ) {
message ="<font color='red'>이미 사용중인 아이디입니다.</font>";
}
$("#userid_message").html(message);
},
error:function(){
}
});
위에 설명한 코드들을 하나로 뭉치면 아래와 같습니다.
$(function(){
$("#userid").keyup(function(){
let ss= ['!', '@', '#', '$', '%', '^', '&', '*', '(', ')', ':', ';', '\'', '~', '`'];
let message = "";
let userid = $("#userid").val();
let lastword = userid.substring(userid.length-1, userid.length);
let result = ss.find (re => re == lastword);
if (result != null) {
alert("특수문자는 허용하지 않습니다.");
userid = userid.substring(0, userid.length-1);
$("#userid").val(userid);
}
if (userid.length < 4 || userid.length >20) {
message="<font color='red'>4~20자 사이로 입력해 주세요.</font>";
$("#userid_message").html(message);
}else{
$.ajax({
type:"post",
data: {userid: userid},
url:"useridCheck.jsp",
datatype:"text",
success: function(data) {
data = $.trim(data);
if (data == "ok") {
message ="<font color='blue'>사용가능한 아이디 입니다..</font>";
}else if ( data == "error1") {
message ="<font color='gray'>형식에 맞지 않는 아이디입니다.</font>";
}else if ( data == "error2" ) {
message ="<font color='red'>이미 사용중인 아이디입니다.</font>";
}
$("#userid_message").html(message);
},
error:function(){
}
});
}
});
});
반응형
