2013년 7월 9일 화요일

(130709) 12일차 EventTest3.html (JavaScript를 이용한 문자, 숫자열 확인 프로그램)

 - 소스
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
<script type = "text/javascript">
function validate(field) { 
var valid = "abcdefghijklmnopqrstuvwxyz0123456789";
var temp; // 입력한 문자를 비교하기 위한 변수
for (var i = 0; i < field.value.length; i++) {
// 문자를 1개씩 비교하기 위해 잘라서 temp 변수에 넣음
temp = field.value.substring(i, i+1); 
// indexOf를 이용해서 valid에 일치하는 문자가 있으면 그 자릿수를 반환, 없으면 -1을 반환한다.
if (valid.indexOf(temp) == "-1") {
alert("영문자와 숫자만 입력할 수 있습니다");
field.value="";
field.focus();
}
   }
}
</script>
<form>
<!-- text에 입력한 값인 this를 validate에 넣어서 호출. this대신 field를 써도 함수호출 가능 -->
아이디 : <input type = text name = "field" onBlur = "validate(this)"> 
<input type = "submit" value = "전송">
</form>
</body>
</html>


 - 결과