① 소스 내용
<?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");
// 정규식을 이용한 숫자 검사
/*
정규식 작성법
1. var re = /정규식/;
2. var re = new RegExp("정규식");
*/
var re = /^[0-9]+$/; // ^[0-9]+$ 시작부터 끝까지 모두 숫자
// 유효성 검사(validation)
if(!re.test(aaa.value)){
alert("숫자만 넣어라.!!");
aaa.value=""; // 숫자가 아닐결우 aaa.value를 공백으로
aaa.focus(); // 다시 입력받기위해 커서가 aaa의 값이 들어오는 곳으로 옮겨진다.
return;
};
//alert(parseInt(aaa.value)+parseInt(bbb.value));
/* var result = document.getElementById("result");
result.innerHTML = Number(aaa.value)+Number(bbb.value); */
// 문자->숫자 : parseInt(), Number() (실수인 경우 : parseFloat())
var r = parseInt(aaa.value) + Number(bbb.value);
if(isNaN(r)){
r='숫자를 넣어라!';
}
document.getElementById("result").innerHTML = r;
}
</script>
</head>
<body>
<input type="button" value="결과보기" onclick="execute();" />
<input type="text" id="aaa" /> +
<input type="text" id="bbb" /> =
<!-- div는 가로길이 모두를 차지하고 span은 태그안에 가진 내용만큼만 차지한다. -->
<span id="result"></span>
</body>
</html>
② 실행화면
'WEB > JavaScript' 카테고리의 다른 글
| WEB 3일차 다섯번째) 정규식을 이용한 회원가입테이블 유효성검사 (0) | 2012.09.13 |
|---|---|
| WEB 3일차 세번째) 자바스크립트의 DATE 함수 (0) | 2012.09.13 |
| WEB 3일차 두번째) 자바스크립트를 이용한 구구단찍기 (0) | 2012.09.13 |
| WEB 3일차 첫번째) 자바스크립트 (0) | 2012.09.13 |
모데스티