기본 유효성 검사
| 데이터 유무 확인 | |
| input type="submit" | input type="button" |
|
 |
 |
더보기
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!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>기본 유효성 검사 연습</title>
<script type="text/javascript">
function checkLogin() {
if( !(document.loginForm.id.value.length >= 5 && document.loginForm.id.value.length <= 10) ){
alert("아이디를 5~10사이 입력하세요");
form.id.focus();
return false;
}else if( !(document.loginForm.pw.value.length >= 8 && document.loginForm.pw.value.length <= 15) ){
alert("비밀번호를 8~15사이 입력하세요");
form.id.focus();
return false;
}else if( !(document.loginForm.subject.value.length >= 2 && document.loginForm.subject.value.length <= 25) ){
alert("제목을 2~25사이 입력하세요");
form.id.focus();
return false;
}
document.loginForm.submit();
}
</script>
</head>
<body>
<form name="loginForm" action="validation03_process.jsp" method="post">
<p>
아이디 : <input type="text" name="id">
<p>
비밀번호 : <input type="password" name="pw">
<p>
제목 : <input type="text" name="subject">
<input type="button" value="send" onclick="checkLogin()">
</form>
</body>
</html>
document.form.id.select()는 유효성 검사 후 재 입력이 요구될 때
해당 입력란을 선택하여 바로 수정할 수 있도록 함
isNaN 검사
 |
 |
아이디 검사
| 영문 소문자만 허용 | 숫자만 허용 |
 |
 |
| 영문만 입력 가능(onkeypress : 키보드 입력 시 바로 유효성검사) | |
|
|
| 한글만 입력가능 | |
 |
|
코드(특수문자 포함)
더보기
function checkKey() {
if(!( (event.keyCode >= 65 && event.keyCode <=90 ) || (event.keyCode >=97 && event.keyCode <= 122 ) )){
alert("영어(대문자, 소문자)만 입력가능합니다");
}
-------------------------
<script type="text/javascript">
function checkKey() {
if(!(event.keyCode >= 48 && event.keyCode <=57 )){
alert("숫자만 입력가능합니다");
}
}
</script>
</head>
<body>
<form name="loginForm" action="validation06_process.jsp" method="post">
<p> 아이디 : <input type="text" name="id" onkeypress="checkKey()" >
<p> 비밀번호 : <input type="password" name="pw">
<p> <input type="button" value="전송" >
</form>
-------------------------
if( (ch<'a' || ch > 'z') && (ch >'A' || ch<'Z') && (ch>'0' || ch <'9')){
alert("아이디는 영문 소문자만 입력 가능합니다.");
form.id.select();
return;
}
------------------------
<script type="text/javascript">
function checkKey() {
if(!( (event.keyCode >= 33 && event.keyCode <=47 )
|| (event.keyCode >=58 && event.keyCode <= 64 )
|| (event.keyCode >=91 && event.keyCode <= 96 )
|| (event.keyCode >=123 && event.keyCode <= 126 ) )){
alert("특수문자만 입력가능합니다");
}
}
</script><script type="text/javascript">
function checkKey() {
if(! (event.keyCode >= 12592 && event.keyCode <= 12687 ) ){
alert("한글만 입력가능합니다");
}
}
</script>
정규표현식 사용 유효성 검사
객체 초기화(object initializer)를 사용하는 방법으로, 입력된 표현식이 거의 바뀌지 않는 상수 형태일 때 주로 사용
−RegExp 객체를 이용하는 방법으로, 정규 표현식이 자주 변경될 때 주로 사용
test() -- true/false 반환
exec() -- 정규표현식에 부합된 문자열 추출하여 반환
| 대소문자 구분없이 유효성 검사 | |
 |
 |
 |
이메일 정규표현식
var regExpEmail = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;
① 숫자 혹은 영문으로 시작 jeeey
② - _ . 이 있거나 없거나 | 문자 혹은 숫자가 여러개 1234
@
③ 문자 혹은 숫자 나오고, - _ . 이 있거나 없는 다음 다시 문자 혹은 숫자가 반복 naver
.
④ 영문 2~3개 com
더보기
<%@ page language="java" contentType="text/html; charset=utf-8"%>
<!DOCTYPE html>
<html>
<head>
<title>정규표현식을 사용하여 데이터 유효성 검사하기</title>
<script type="text/javascript">
function checkForm(){
var regExpId = /^[a-z|A-Z|ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/; //문자인경우
var regExpName = /^[가-힣]*$/; //한글문자만
var regExpPasswd = /^[0-9]*$/; //숫자문자만
var regExpPhone = /^\d{3}-\d{3,4}-\d{4}$/; //숫자3자리 - 숫자3~4자리 - 숮자 4자리 ^:not $:끝
var regExpEmail = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;
var form = document.member;
var id = form.id.value;
var passwd =form.passwd.value;
var name = form.name.value;
var phone = form.phone1.value + "-" + form.phon2.value + "-" + form.phone3.value;
var email = form.email.value;
if(!regExpId.test(id)){ alert("아이디는 문자로 시작하세요.");form.id.select();return;}
if(!regExpPasswd.test(passwd)){alert("비밀번호를 숫자로 입력하세요.");form.passwd.select();return; }
if(!regExpPhone.test(phone)){alert("전화번호의 첫 칸은 숫자 3자, 두번째칸은 숫자 3~4자, 세번째 칸은 숫자 4자로 입력하세요. ."); form.phone.select(); return;}
if(!regExpPhone.test(phone)){alert("전화번호를 숫자로 입력하세요."); form.phone.select(); return;}
if(!regExpEmail.test(email)){alert("이메일 입력 형식이 아닙니다. ex.jeey0506@naver.com") form.email.select(); return;}
}
</script>
</head>
<body>
<h3> 회원가입 </h3>
<form name="member" action="#" method="post">
<p> 아이디 <input type="text" name="id">
<p> 비밀번호 <input type="password" name="passwd">
<p> 이름 <input type="text" name="name">
<p> 연락처 <select name="phone1">
<option value="010"> 010 </option>
<option value="011"> 011 </option>
<option value="016"> 016 </option>
<option value="017"> 017 </option>
<option value="019"> 019 </option>
</select> - <input type="text" maxlength="4" size="4" name="phone2"> -
<input type="text" maxlength="4" size="4" name="phone3">
<p> 이메일 <input type="email" name="email">
<p>
<input type="submit" value="전송" onclick="checkForm()">
</form>
</body>
</html>
자주 사용하는 정규 패턴
1. 숫자만 ^[0-9]*$
2. 영문자만 ^[a-zA-Z]*&
3. 한글만 ^[가-힣]*$
4. 영문자와 숫자만 ^[a-zA-Z0-9]*$
5. 이메일 /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z]*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;
6. 휴대전화 /^\d{3}-\d{3,4}-\d{4}$
7. 주민번호 /\d{6}\-[1-4]\d{6}$
8. IP주소 ([0-9]{1,3})\.([0-9]{1,3})\.([0-9]{1,3})\.([0-9]{1,3})
9. URL ^(file|gopher|news|nttp|telent|http|https?|ftps?|stt):\/\/([a-z0-9]+\.)+[a-z0-9]{2,4}.*$
10.날짜 ^\d{1,2}\/\d{1,2}\/\d{2,4}
아이디, 비밀번호 검사
<%@ page language="java" contentType="text/html; charset=utf-8" %>
<!DOCTYPE html>
<html>
<head>
<title>정규표현식을 사용하여 데이터 유효성 검사하기</title>
<script type="text/javascript">
function checkPasswd() {
var id=document.getElementById("id").value;
var passwd=document.getElementById("passwd").value;
var passwdConfirm=document.getElementById("passwdConfirm").value;
pw_passed = true;
if( id.length == 0) {
alert("아이디를 입력하세요");
return false;
}
if( passwd.length == 0) {
alert("비밀번호를 입력하세요");
return false;
}
if(passwdConfirm.length == 0) {
alert("비밀번호 확인을 입력하세요");
return false;
}else {
if(passwd != passwdConfirm) {
alert("비밀번호와 비밀번호 확인 문자가 다릅니다.");
return false;
}
}
var SameChar = 0;//동일 문자 카운트 11111
var sequenceCount1 = 0;//연속성(+) 카운트 4321 dcba
var sequenceCount2 = 0 ;//연속성(-) 카운트 1234 abcde
//ex) 111 9012ab 11111
for( var i=0; passwd.length;i++ ){
var char0;
var char1;
var char2;
if( i >= 2) {
char0 = passwd.charCodeAt(i-2);//9 1 1 1 3
char1 = passwd.charCodeAt(i-1);//0 1 1 2 2
char2 = passwd.charCodeAt(i);//1 1 2 3 1
//동일 문자 카운터(연속3개) 조건이 참이 되려면 111인 경우 임
if(( char0 == char1 ) && ( char1 == char2 ) ) {
SameChar++;
}else {
SameChar=0;
}
//연속성 카운터(+) 카운터 321 cba
if(char0 - char1 == 1 && char1 - char2 == 1) {
sequenceCount1++;
}else {
sequenceCount1 = 0;
}
//연속성 카운터(-) 카운터 123 abcd
if( char0 - char1 == -1 && char1-char2 == -1 ) {
sequenceCount2++;
}else {
sequenceCount2=0;
}
}//end if
if(SameChar>0){
alert("동일 문자를 3자 이상 연속 입력(ex:111,bbb)할 수 없습니다.");
pw_passed = false;
}
if(sequenceCount1 > 0 || sequenceCount2 > 0) {
alert("영문, 숫자는 3자이상 연속 입력(ex:abc, 123) 할 수 없습니다.");
pw_passed = false;
}
if( !pw_passed ){
return false;
break;
}
}//end for
document.form.submit();
}//end function
</script>
</head>
<body>
<form name="frm" action="#" method="post">
<p> 아이디 <input type="text" name="id" id="id">
<p> 비밀번호 <input type="text" name="passwd" id="passwd">
<p> 비밀번호확인 <input type="text" name="passwdConfirm" id="passwdConfirm">
<input type="submit" value="전송" onclick="checkPasswd()" >
</form>
</body>
</html>'Spring > JSP' 카테고리의 다른 글
| 톰캣 서버에서 이미지파일 제대로 불러오기 (0) | 2021.05.20 |
|---|---|
| JSP, 자바빈즈 왜 사용할까? (0) | 2021.05.02 |
