개발/javascript
입력 폼 체크
까망군
2011. 10. 7. 19:04
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> 입력 폼 체크 </TITLE>
</HEAD>
<BODY>
<h1>입력 폼 체크</h1>
<form method="post" onsubmit="return validForm(this);">
<legend>기본정보</legend>
<label>이름 <input type="text" name="username" id="username" /></label>
<label>비밀번호 <input type="password" name="userpw" id="userpw" /></label>
<label>비밀번호 확인 <input type="password" name="userpw_confirm" id="userpw_confirm" /></label>
<label>e-mail <input type="text" name="email" id="email" /></label>
<input type="submit" value="입력완료" />
</form>
<script type="text/javascript">
/**
* 입력을 완료하고자 할 때 값의 유효성을 확인한다.
* 만약, 조건에 부합하지 않으면 계속 진행 할 수 없다.
* @param {Object} form 입력폼 객체
* @return 정상진행 여부
* @type Boolean
*/
function validForm(form){
// '이름' 항목 입력 여부 검사
if(form.username.value == ""){
alert("이름을 입력하세요!");
form.username.focus(); //이름 입력란으로 마우스 포커스를 이동
return false; // 폼 전송을 계속 진행할 수 없음
}
// '이름' 항목 길이 제한
var namelength = getByteLength(form.username.value);
if( namelength < 2 || namelength > 20){
alert("이름은 한글 1~10자 영문 대소문자 2~20자 최대 20 bytes 사용이 가능합니다.");
form.username.focus();
return false;
}
// '비밀번호' 항목 입력 여부 검사
if(form.userpw.value == ""){
alert("비밀번호를 입력하세요!");
form.userpw.focus();
return false;
}
// '비밀번호 확인' 항목 입력 여부 검사
if(form.userpw_confirm.value == ""){
alert("비밀번호 확인을 입력하세요!");
form.userpw_confirm.focus();
return false;
}
// '비밀번호' & '비밀번호 확인'의 동일 여부 검사
if(form.userpw.value != form.userpw_confirm.value){
alert("비밀번호와 비밀번호 확인 값이 동일해야 합니다.");
form.userpw.focus();
return false;
}
// 'e-mail' 입력값 형식 검사
var regExp = /^[0-9a-zA-Z][0-9a-zA-Z_\-\.]*@[0-9a-zA-Z_\-\.]+[0-9a-zA-Z_\-\.]{2,}$/;
if(!regExp.test(form.email.value)){
alert("이메일 형식이 유효하지 않습니다. 예) abc@abc.com");
form.email.focus();
return false;
}
alert("모든 입력이 정상적으로 완료 되었습니다.");
return true; // 폼 전송 정상 진행
}
/**
* 한글 2byte, 그외의 문자 1byte로 계산하여 문자열의 길이를 반환
* @param str 문자열
* @return 주어진 문자열의 byte단위 길이
* @type number
*/
function getByteLength(str) {
var byteLength = 0;
for (var inx = 0; inx < str.length; inx++) {
var oneChar = escape(str.charAt(inx));
if ( oneChar.length == 1 ) {
byteLength ++;
} else if (oneChar.indexOf("%u") != -1) {
byteLength += 2;
} else if (oneChar.indexOf("%") != -1) {
byteLength += oneChar.length/3;
}
}
return byteLength;
}
</script>
</BODY>
</HTML>