<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/public.css">
<style>
</style>
<script>
function proc1() {//body 가 완료된 후에 브라우저에 뜬 뒤에 실행하라
/* ff = document.getElementById('ff');
// 또는 ff = document.querySelector('#ff'); */
vname = document.getElementById('name').value;
addr = document.getElementById('addr').value;
bir = document.getElementById('birthday').value;
mail = document.getElementById('email').value;
id = document.getElementById('userid').value;
tel = document.getElementById('phone').value;
pass = document.getElementById('pass').value;
nvalue = vname.trim().length;
avalue = addr.trim().length;
bvalue = bir.trim().length;
mvalue = mail.trim().length;
ivalue = id.trim().length;
tvalue = tel.trim().length;
pvalue = pass.trim().length;
//이름입력을 안했거나, 이름에 공백만 보냈을떄 다시 입력하도록 한다.
if (nvalue < 1) {
alert("이름 입력 ");ㅣ
return false;
}
//이름길이는 2자리에서부터 4 사이로 하게 한다.
if(nvalue < 2||nvalue > 4){
alert("이름 2~4 사이로 입력하시오");
return false;
}
//정규식 체크
nameReg = /^[가-힣]{2,4}$/;
if(!(nameReg.test(vname))){
alert("이름 형식 오류..");
return false; //함수를 종료한다.
}
//주소입력 공백제거
if ( avalue < 1 ) {
alert("주소 입력 ");
return false;
}
//생일입력 공백제거
if ( bvalue < 1 ) {
alert("생일 입력 ");
return false;
}
//아이디 입력 공백제거 - 6 ~ 8
if ( ivalue < 1 ) {
alert("아이디 입력 ");
return false;
}
//아이디길이 6 ~ 8
if ( ivalue < 6 || ivalue > 8) {
alert("아이디 6 ~ 8 글자를 입력하세요");
return false;
}
//아이디 정규식 - 영문 소문자로 시작한다.
//6 ~ 8 길이 아이디
idReg = /^[a-z][a-zA-Z0-9]{5,7}$/;
if(!(idReg.test(id))){
alert("아이디형식오류")
return false;
}
//비밀번호 - 공백
if(pvalue < 1 ) {
alert("비밀번호를 입력하세요");
return false;
}
//비밀번호 길이 8 ~ 15 자리
if(pvalue < 8 || pvalue > 15 ){
alert("8보다 작고 15보다 작은 비밀번호를 입력해 주세요")
return false;
}
///////////////////////////////////////////////////////////////////////////////////////////////
/* //전방탐색
// 검색문자?=기준문자 : 기준문자를 기준으로 해서 전방(앞의)탐색으로 검색한다.
//a = http://www.naver.com , https://www.daum.net
//http 인지 https 인지 비교 - 해당 문자를 직접 가져온다. - value.match(reg)
//match() 수행후 해당 문자가 있으면 -> 문자를 가져오고 없으면 null 을 리턴한다.
a = "http://www.naver.com" ;
a2 = "https://www.daum.net" ;
reg = /\w+(?=:)/
b = a2.match(reg);
if(b == "http"){
alert("http 요청입니다.");
}else if ( b == "https"){
alert("https 요청입니다.");
}
////////////////////////////////////////////////////////////////////////// */
//정규식 - 전방탐색 응용 - 영문소문자대문자숫자특수문자가 반드시 한개이상씩 포함
passReg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&]).{8,15}$/;
if(!(passReg.test(pass))){
alert("비밀번호 형식오류");
return false;
}
//메일입력 공백제거
if ( mvalue < 1 ) {
alert("메일 입력 ");
return false;
}
//이메일 정규식
mailReg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z]+){1,2}$/
if(!(mailReg.test(mail))){
alert("이메일형식오류");
return false;
}
//전화번호 입력 공백제거
if ( tvalue < 1 ) {
alert("전화번호 입력 ")
return false;
}
//전화번호 정규식
telReg = /\d{2,3}-\d{4}-\d{4}/
if(!(telReg.test(tel))) {
alert("전화번호 형식오류")
return false;
} //if 끝
alert("성공");
}
</script>
</head>
<body>
<div class="box">
<h3>데이타 길이/ 공백 검증</h3>
trim() : 앞 뒤 공백을 제거 <br> length <br>
<h3>정규식 : 일정한 규칙에 따라 데이터를 입력</h3>
정규식패턴.test(입력값) - return 결과형 true / false <br>
<h3>회원가입</h3>
//밑에서 submit 을 누르면 test.jsp 로 가는데 곧장 jsp 로 가지않게 하려고 onsubmit="return
false; 를 쓴다."
<form id="ff" action="test.jsp" method="post" onsubmit="return false">
이름: <input type='text' id='name'><br>
주소: <input type='text' id='addr'><br>
생일: <input type='date' id='birthday'><br>
아이디(6-8 문자): <input type='text' id='userid'><br>
비밀번호 : <input type='text' id="pass"><br>
이메일: <input type='email' id='email'><br>
휴대폰: <input type='tel' id='phone'><br>
<input type='button' onclick="proc1()" value='확인'><br>
</form>
</div>
</body>
</html>
댓글
댓글 쓰기