Jquery 를 사용하여 이메일, 이름 체크하기
jquery를 이용하여 이름, 이메일, 비밀번호 체크해봅시다.
정규표현식 확인하는 사이트
Online regex tester and debugger: PHP, PCRE, Python, Golang and JavaScript
Please wait while the app is loading...
regex101.com
var passCheck = false;
var emailCheck = false;
var getMail = RegExp(/^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+/);
var getCheck = RegExp(/^[a-zA-Z0-9]{4,12}$/); // 여기서는 사용하지 않음
var getName = RegExp(/^[a-zA-Z-가-힣]+$/);
$(document).ready(function(){
// 엔터를 눌렀을 경우 실행되는 함수
$('body').keypress(function(e){
if(e.keyCode!=13)
return;
if(!$('#inputEmail').val())
$('#inputEmail').focus();
if(!$('#inputPassword').val())
$('#inputPassword').focus();
if(passCheck && emailCheck)
$('#registerBtn').click();
});
});
// 정규표현식 확인
$('#registerBtn').click(function() {
if(!getName.test($("#name").val())){
alert("이름을 확인해주세요");
return;
}
if(!getMail.test($("#inputEmail").val())){
alert("이메일 형식을 지켜주세요");
return;
}
if(!emailCheck){
alert("이메일을 확인해주세요");
return;
}
if(!passCheck){
alert("비밀번호를 확인해주세요");
return;
}
// 회원가입 ajax 이용 하여 정보를 보냄
$.ajax({
type: "POST",
url: "http://localhost:8888/member/join",
data: { "email" : $('#inputEmail').val(),
"name" : $('#name').val(),
"passwd" : $('#inputPassword').val()
},
success: function(data) {
var result = data;
if(result == 'success'){
alert("회원가입에 성공하셨습니다.");
location.href = "/login";
}else{
alert("회원가입에 실패하였습니다.");
location.reload();
}
}
});
});
// 새로운 키가 눌렀을 경우 실행되는 함수
// 여기서는 이메일이 이미 사용중인지 아닌지 확인하기 위함
$('#inputEmail').keyup(function() {
$.ajax({
type: "GET",
url: "/member/emailCheck",
data: {"email" : $('#inputEmail').val()},
success: function(data) {
var result = data;
if(result == 'success'){
emailCheck = true;
$('#emailLabel').text('사용 가능한 이메일입니다');
}else{
emailCheck = false;
$('#emailLabel').text('이미 존재하는 이메일입니다.');
}
}
});
});
// 여기서는 비밀번호 재입력칸을 잘 입력했는지 확인
$('#confirmPassword').keyup(function(){
var passwd = $('#inputPassword').val();
var passwdcheck = $('#confirmPassword').val();
if(passwd == passwdcheck){
passCheck = true;
$('#PasswordLabel').text('동일한 비밀번호 입니다.');
}else{
passCheck = false;
$('#PasswordLabel').text('동일하지 않은 비밀번호 입니다.');
}
})
이상으로 포스팅을 마치겠습니다.
도움이 되셨다면 공감과 +a가 제 젤리값의 큰 힘이됩니다.
