[PHP] 로그인시 유효성 검사 하기

이번시간에는 유효성 검사를 배워 보겠습니다.

 

<script type="text/javascript">

function validate() {
var re = /^[a-zA-Z0-9]{4,12}$/ // 아이디와 패스워드가 적합한지 검사할 정규식
var name = document.getElementById('name_register');
var id = document.getElementById('Id_register');
var pw = document.getElementById('password_register');
var pwcheck = document.getElementById('inputConfirmPassword');

var email = document.getElementById('emailAddress_register');
var phoneCall = document.getElementById('phoneCall');

var postNum = document.getElementById('sample6_postcode');
var address = document.getElementById('sample6_address');
var addressDetail = document.getElementById('sample6_detailAddress');
var chkbox = document.getElementsByName('agree');
var chk = false;
for (var i = 0; i < chkbox.length; i++) {
if (chkbox[i].checked) {
chk = true;
} else {
chk = false;
}
}


// ================ 이름 유효성검사 ===============//
if (name.value == '') {
alert("이름을 입력해주세요.");
return false;
}

// ================ ID 유효성검사 ===============//
if (id.value == '') {
alert("ID를 입력해주세요.");
return false;
}

if (!re.test(id.value)) { //아이디 유효성검사
alert("ID는 4~12자의 영문 대소문자와 숫자로만 입력하여 주세요.");
return false;
}

// ================ PASSWORD 유효성검사 ===============//

if (pw.value == '') { // 비밀번호 입력여부 검사
alert("Password를 입력해주세요.");
return false;
}
if (pwcheck.value == '') { // 비밀번호 입력여부 검사
alert("Password를 입력해주세요.");
return false;
}
if (!re.test(pw.value)) { //패스워드 유효성검사
alert("Password는 4~12자의 영문 대소문자와 숫자로만 입력하여 주세요.");
return false;
}


// ================ 주소 유효성검사 ===============//
if (postNum.value == '') {
alert("우편번호 찾기를 통해 주소를 입력해주세요");
return false;
}
if (address.value == '') {
alert("우편번호 찾기를 통해 주소를 입력해주세요");
return false;
}
if (addressDetail.value == '') {
alert("상세주소를 입력해주세요.");
return false;
}

// ================ 이메일 유효성검사 ===============//

if (email.value == '') { // 비밀번호 입력여부 검사
alert("이메일을 입력해주세요.");
return false;
}

// ================ 전화번호 유효성검사 ===============//
if (phoneCall.value == '') {
alert("전화번호를 입력해주세요.");
return false;
}

// ================ 약관체크 유효성검사 ===============//
if (!chk) {
alert("모든 약관에 동의해 주세요.");
return false;
}


alert("회원가입이 완료되었습니다.");
}

function isSame() {

var pw = document.getElementById('password_register');
var pwCheck = document.getElementById('inputConfirmPassword');

if (pw.length < 6 || pw.length > 16) {
window.alert('비밀번호는 6글자 이상, 16글자 이하만 이용 가능합니다.');
document.getElementById('pw').value = document.getElementById('pwCheck').value = '';
document.getElementById('same').innerHTML = '';
}
if (pw.value != '' && pwCheck.value != '') {
if (pw.value == pwCheck.value) {
document.getElementById('same').innerHTML = '비밀번호가 일치합니다.';
document.getElementById('same').style.color = 'blue';
} else {
document.getElementById('same').innerHTML = '비밀번호가 일치하지 않습니다.';
document.getElementById('same').style.color = 'red';
}
}

}
</script>

 

위 소스를 복사하면 편하게 사용 가능합니다.

 

로그인 시 유효성 검사 소스 입니다.

해당 메소드를 통해 유효성이 검사 됩니다.

 

해당 메소드를 통하여 4~12자의 영문 대소문자와 숫자로만 입력을 받도록 도와줍니다.

 

나머지 소스들은 빈칸인지 여부가 자동으로 확인되며

 

 

 

해당 메소드를 통하여 비밀번호의 자릿수(6~16자리) 와 비밀번호와 비밀번호 확인이 일치 하는지 확인 해 줍니다.

 

해당 소스는 스틱코드에 업로드 해놔서 자동완성으로 사용 가능합니다.

 

스틱코드 자주 이용해 주세요~~

https://stickode.com/mainlogin.html

STICKODE