| 실행 소스 |
|
<?xml version="1.0" encoding="EUC-KR" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-KR" /> <title>숫자와 문자 변환 정규식</title> <script type="text/javascript"> function execute() { /// aaa와 bbb의 결과를 합쳐서 result에 보여주기 var aaa = document.getElementById('aaa'); var bbb = document.getElementById('bbb');
// 정규식 이용한 숫자 검사 // validation : 유효성 체크 /* 정규식 작성법 1. var re = /정규식/; 2. var re = new RegExp("정규식"); */ var re = /^[0-9]+$/; if(!re.test(aaa.value)) { alert("숫자만 넣으셔야 합니다."); aaa.value=""; aaa.focus(); return; }
// 문자-> 숫자 : parseInt(), Number() (실수 : parseFloat()) var result = Number(aaa.value) + parseInt(bbb.value);
if(isNaN(result)) { result = "숫자를 넣어라!" }
document.getElementById("result").innerHTML = result;
} function validate() { var id = document.getElementById('userid'); var pass = document.getElementById('pass'); var pass1 = document.getElementById('pass1'); var name = document.getElementById('name'); var email = document.getElementById('email'); var tel1 = document.getElementById('tel1'); var tel2 = document.getElementById('tel2'); var tel3 = document.getElementById('tel3');
// 이메일 검사 // 4글자 이상(\w = [a-zA-Z0-9_], [\w-\.]) @가 나오고 // 1글자 이상(주소). 글자 가 1~3번 반복됨 if(!chk(/^[\w]{4,}@[\w]+(\.[\w-]+){1,3}$/, email, "이메일 형식에 어긋납니다.")) return false;
// 아이디 검사 // 첫 글자는 반드시 영문 소문자, 4~12자로 이루어지고, 숫자가 // 하나 이상 포함되어야 한다. 영문소문자와 숫자로만 이루어져야한다. // \d : [0-9]와 같다. {n,m} : n에서 m까지 글자수 if(!chk(/^[a-z][a-z\d]{3,11}$/, id, "첫글자는 영문 소문자, 4~12자 입력할것!")) return false; if(!chk(/[0-9]/, id, "숫자 하나이상포함!")) return false;
// 비밀번호 확인 검사 if(pass.value!=pass1.value) { alert("비밀번호 확인!"); }
// 이름 검사 // 2글자 이상, 한글만 // 통과하지 못하면 한글로 2글자 이상을 넣으세요~ alert 출력! if(!/^[가-힝]{2,}$/, name, "한글로 2글자 이상을 넣으세요~") return false;
// 전화번호 검사
// 전화번호 앞자리는 2~3자리 숫자, 두번째 자리는 3~4자리 숫자 // 세번째 자리는 4자리 숫자
if (tel1.value != '') { if (!chk(/^0(2|1[01679])$/, tel1, "번호 2자리 이상 입력")) return false; if (!chk(/^[0-9]{3,}$/, tel2, "번호 3자리 이상 입력")) return false; if (!chk(/^[0-9]{4}$/, tel3, "4자리 번호 입력")) return false; }
}
function chk(re, e, msg) { if (re.test(e.value)) { return true; }
alert(msg); e.value = ""; e.focus(); return false; } </script> </head> <body>
<input type="button" value="결과보기" onclick="execute();" /> <input type="text" id="aaa" /> + <input type="text" id="bbb" /> = <span id="result"></span>
<h1>회원가입 유효성 체크</h1>
<form action="" method="post" onsubmit="return validate();"> <!-- 제출시 행동 --> <label for="userid">* 유저아이디</label> <input type="text" name="userid" id="userid" /><br /> <label for="pass">* 비밀번호</label> <input type="password" name="pass" id="pass" /><br /> <label for="pass1">* 확인</label> <input type="password" name="pass1" id="pass1" /><br /> <label for="name">* 이름</label> <input type="text" name="name" id="name" /><br /> <label for="email">* 이메일</label> <input type="text" name="email" id="email" /><br /> <br /> <label for="tel1">전화번호</label> <input type="text" name="tel1" id="tel1" maxlength="3" />- <input type="text" name="tel2" id="tel2" maxlength="4" />- <input type="text" name="tel3" id="tel3" maxlength="4" /> <br /><br /><br /> <label for="job">직업</label> <select name="job" id="job"> <option>개발자</option> <option>프로그래머</option> <option>자영업자</option> </select><br /> <label for="gender">성별</label> <input type="radio" name="gender" value="m" /> 남 <input type="radio" name="gender" value="f" /> 여<br /> <label for="hobby">취미</label> <input type="checkbox" name="hobby" value="reading" /> 독서 <input type="checkbox" name="hobby" value="drama" /> 드라마보기 <input type="checkbox" name="hobby" value="soccer" /> 축구<br /> <input type="checkbox" name="hobby" value="movie" /> 영화보기 <input type="checkbox" name="hobby" value="basket" /> 드라마보기 <input type="checkbox" name="hobby" value="game" /> 게임<br /> <input type="reset" value="리셋" /> <input type="submit" value="완료" />
</form>
</body> </html>
<!-- div와 span의 차이점 --> <!-- div : 화면끝까지 공간을 차지 --> <!-- span : 내용이 차지하는 공간만큼만 화면 공간 차지 -->
|
실행 결과 |
|
+ = 회원가입 유효성 체크 |
'Dev. 웹 > JavaScript' 카테고리의 다른 글
| [JQuery 예제] 체크박스 클릭 해제시 모든 체크박스에 체크 설정 (0) | 2012.09.13 |
|---|---|
| [JQuery 예제] 셀렉터(Selector) 이용법 및 이벤트 적용 (0) | 2012.09.13 |
| [JavaScript 예제] 시간이 흐르는 시간 텍스트 출력하기 (0) | 2012.09.12 |
| [JavaScript 예제] 버튼 클릭시 구구단 출력 (0) | 2012.09.12 |
| [JavaScript 예제] 버튼 클릭 이벤트, div클릭시 숫자 증가 보여주기 (0) | 2012.09.12 |