폼 데이터 접근
사용자가 입력한 폼 데이터에 접근하기 위해서는 폼 안에 있는 필드의 id나 name 속성을 이용해야 한다.
<input type="text" id="addr" name="addr">
id 속성은 페이지의 요소 식별
name 속성은 폼 내부에서 필드를 식별
id 속성을 이용하려면 getElementById()를 사용 하면되지만 name 속성은 form 객체에서 name 을 찾아야된다.
form 객체는 배열이고 각 배열 요소는 form["name"] 과 같이 name 속성으로 접근할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function dispaly(from) {
alert(from["addr"].value);
}
</script>
</head>
<body>
<input type="text" id="addr" name="addr" onclick="dispaly(this.form)">
</body>
</html>
공백검증
가장 기초적인 데이터 검증은 필드가 비어 있는지를 체크하는 것이다. 사용자가 아무것도 입력하지 않은 경우를 체크하는 코드를 작성해보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function checkNotEmpty(field){
if (field.value.length == 0) {
alert("필드가 비어있네요!");
field.focus();
return false;
}
return true;
}
</script>
</head>
<body>
<form>
이름: <input type="text" id="user">
<input type="button" onclick="checkNotEmpty(document.getElementById('user'))" value="확인">
</form>
</body>
</html>
데이터 길이 검증
사용자가 정해진 개수의 문자만을 입력하도록 하는 경우도 있다. 아래 예제에서 checkLength()함수는 텍스트 필드와 2개의 숫자를 인수로 받는다. 첫 번째 숫자는 사용자가 입력해야 하는 최소 개수이고 두 번째 숫자는 사용자가 입력할 수 있는 최대 개수이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function checkLength(elem, min , max) {
var s = elem.value;
if (s.lenth >= min && s.length <= max) {
return true;
} else {
alert(min + "문자와" + max + "문자 사이로 입력해주세요!");
elem.focus();
return false;
}
}
</script>
</head>
<body>
<form>
이름(6-8 문자) : <input type="text" id="name">
<input type="button" onclick="checkLength(documet.getElementById('name'),6,8)"value="확인">
</form>
</body>
</html>
정규식 검증
정규식(regular expression)이란 특정한 규칙을 가지고 있는 문자열을 표현하는 수식이다. 정규식은 많은 텍스트 에디터와 프로그래밍 언어에서 문자열의 검색과 치환을 위해 사용되고 있다. (특히 UNIX 계열의 운영체제)
^ [ 0-9 ] + abc $
^: 문자의열시작
[0-9] : 0부터 9까지의 문자 중 하나
+ : 한번 이상의 반복
abc : 문자열
$: 문자열의 끝
정규 표현식은 /와 /내부에 위치한다.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_Expressions
숫자나 문자 입력 검증
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function checkNumeric(elem,msg) {
var exp = /^[0-9]+$/;
if (elem.value.match(exp)){
return true;
}else {
alert(msg);
elem.focus();
return false;
}
}
</script>
</head>
<body>
<form>
전화번호 (-없이 입력): <input type="text" id='phone'>
<input type="button"
onclick="checkNumeric(document.getElementById('phone'),'숫자만 입력하세요!')" value="확인">
</form>
</body>
</html>
선택 검증
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var fruit = document.getElementById("fruits")
if (fruit.value == 0) {
alert ("과일 하나를 선택하여야합니다.");
fruit.focus()
return false;
}else{
return true;
}
</script>
</head>
<body>
<form>
과일 선택<select>
<option value="0">선택하세요</option>
<option value="1">사과</option>
<option value="2">배</option>
<option value="3">바나나</option>
</select>
<input type="button" onclick="checkSelection(document.getElementById('fruits'),'하나를 선택하여야 합니다.')" value="확인">
</form>
</body>
</html>
