[JavaScript] form을 이용한 유효성 검사
🍁유효성 검사
유효성 검사는 잘못된 값을 찾는 것이다.
[HTML] Form (폼)
💡Form Form은 입력양식 즉, 입력 컨트롤을 의미한다. 클라이언트(사용자)로부터 입력장치(키보드, 마우스, 터치 등)를 통해서 데이터를 입력받는 역할을 한다. 입력 데이터를 서버로 전송하며, 이
isaac-christian.tistory.com
폼 태그에 대해서는 위 글을 참고하도록 하자.
유효성 검사 조건
이름
- 필수값
- 2~5자 이내 입력
- 한글만 입력
나이
- 필수값
- 숫자만 입력
- 범위 검사
아이디
- 필수값
- 4~12자 이내
- 영어, 숫자, _ 혼용 사용 가능
- 숫자로 시작 불가
위 요구사항에 맞게 유효성 검사를 해보도록 하자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#tbl1 {
border: 1px solid #CCC;
border-collapse: collapse;
box-shadow: 0px 0px 3px #CCC;
margin-bottom: 10px;
}
#tbl th, #tbl1 td {
border: 1px solid #CCC;
padding: 5px 10px;
}
#tbl1 th {
background-color: #EEE;
}
</style>
</head>
<body>
<h1>회원 가입</h1>
<form name="form1" action="ex25_ok.jsp">
<table id="tbl1">
<tr>
<th>이름</th>
<td><input type="text" name="txtname"></td>
</tr>
<tr>
<th>나이</th>
<td><input type="number" name="txtage" min="19" max="100"></td>
</tr>
<tr>
<th>아이디</th>
<td><input type="text" name="txtid"></td>
</tr>
<tr>
<th>암호</th>
<td><input type="password" name="txtpw"></td>
</tr>
<tr>
<th>암호확인</th>
<td><input type="password" name="txtpwc"></td>
</tr>
</table>
<input type="button" value="가입하기" name="btnSubmit">
</form>
<script>
document.form1.btnSubmit.onclick = m1;
function m1() {
//유효성 검사
var txtname = document.form1.txtname;
var txtage = document.form1.txtage;
var txtid = document.form1.txtid;
var txtpw = document.form1.txtpw;
var txtpwc = document.form1.txtpwc;
//이름 확인
if (txtname.value == '') {
alert('이름을 입력하세요.');
txtname.focus();
return;
}
if (txtname.value.length < 2 || txtname.value.length > 5) {
alert('2~5자 이내의 이름을 입력하세요.');
// txtname.value = ''; //텍스트 박스 초기화
txtname.select();
return;
}
for (var i=0; i<txtname.value.length; i++) {
var c = txtname.value.charAt(i);
if (c < '가' || c > '힣') {
alert('한글만 입력하세요.');
txtname.select();
return;
}
}
//나이 확인
if (txtage.value == '') {
alert('나이를 입력하세요.');
txtage.focus();
return;
}
//아이디 확인
var regex = /[A-Aa-z_][A-Za-z0-9_]{4,12}/; //정규식 객체
if (!regex.text(txtid.value)) {
alert('아이디가 올바르지 않습니다.');
txtid.select();
return;
}
//암호 확인
if (txtpw.value != txtpwc.value) {
alert('암호가 동일하지 않습니다');
txtpw.focus();
return;
}
document.form1.submit(); //폼 전송 함수
}
</script>
</body>
</html>
유효성 검사를 하여 값을 올바르게 입력했을 때에만 전송이 되어야 한다.
그런데 버튼은 오로지 전송을 목적으로 태어났다. onclick이벤트가 걸리면 이벤트 실행과 동시에 전송이 되기 때문에 '가입하기' 버튼에 onclick 이벤트를 걸면 안 된다.
submit 버튼을 일반 버튼으로 변경
<input type="button" value="가입하기" name="btnSubmit">이를 해결하는 방법 중 하나는 submit 버튼이 아닌 일반 버튼으로 만드는 것이다.
submit 함수
function m1() {
document.form1.submit(); //폼 전송 함수
}전송버튼이 아니더라도 폼 객체를 찾아 submit 함수를 호출하면 submit 버튼을 누른 것처럼 데이터가 전송된다.
focus 함수
//이름 유효성 검사
if (txtname.value == '') {
alert('이름을 입력하세요.');
txtname.focus();
return;
}
유효성 검사로 이름을 입력하지 않고 전송 버튼을 누른 경우에는 이름을 입력할 수 있게 focus 함수를 사용할 수 있다.
select 함수
txtname.select();
select 함수는 입력한 내용을 드래그해서 선택해준다.
정규식 객체
var regex = /[A-Aa-z_][A-Za-z0-9_]{4,12}/;[Java] 정규 표현식 (Regular Expression)
정규 표현식은 특정한 패턴(규칙)을 가지는 문자열의 집합을 표현하는 식이다. 정규 표현식은 문자열을 검색하는 용도로 사용하며, 대다수 환경/프로그래밍 언어 등에서 지원한다. Ctrl + F 검색
isaac-christian.tistory.com
정규 표현식에 대해서는 위 글을 참고하도록 한다.
