개요
- 기본 유효성 검사, 데이터 유무 확인
- 사용자가 form에서 입력한 데이터 값이 서버로 전송되기 전에 특정 규칙에 맞게 입력되었는지 검증
- 유효하지 않은 데이터 값을 입력 시 다시 폼 페이지로 되돌려 사용자에게 오류가 있음을 알려준다.
- 핸들러 함수 및 정규식을 이용한다.
- 웹 브라우저 자체에서 유효성 검사를 하기위해 자바스크립트를 이용하여 유효성 검사를 위한 코드를 작성한다.
핸들러 함수
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head></head>
<script type="text/javascript">
function checkForm() {
alert("이름은 " + document.frm.name.value + "입니다.");
}
</script>
<body>
<form name="frm">
<p>
이름 : <input type="text" name="name">
</p>
<input type="submit" value="전송" onclick="checkForm()">
</form>
</body>
</html>
- 이벤트가 발생했을 때 유효성 검사를 위해 매핑하는 메소드
- input 태그 속성 값이 submit인 경우에 자바스크립트의 onclick 속성을 이용하여 핸들러 함수를 설정한다.
정규식
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Email Validation with Regular Expression</title>
<script type="text/javascript">
function validateEmail() {
var emailInput = document.getElementById('email').value;
var {email} = /^[\\w-]+(\\.[\\w-]+)*@([\\w-]+\\.)+[a-zA-Z]{2,7}$/;
var regex = new RegExp(email);
if (regex.test(emailInput)) {
alert("유효한 이메일 주소입니다.");
} else {
alert("유효하지 않은 이메일 주소입니다.");
}
}
</script>
</head>
<body>
<h1>Email 정규식 테스트</h1>
<form>
<label for="email">Email:</label><br>
<input type="text" id="email" name="email"><br>
<input type="button" value="Validate" onclick="validateEmail()">
</form>
</body>
- 반복되는 패턴을 검출하는데 사용하는 표현식
- 사용방법
- 객체 초기화 방법: 입력된 표현식이 거의 바뀌지 않는 상수 형태일 때 주로 사
- RegExp 객체 방법: 정규 표현식이 자주 변경될 때 사용