복습
+ AJAX
- 비동기적으로 요청하고 콜백함수로 값을 받아 처리
- AJAX 는 비동기적으로 통신, 팝업창을 띄우지 않고 ID 중복검사 가능
- 페이지를 바꾸지 않고 댓글을 달면 댓글이 바로 insert 되게함
* 동기적 방식= 서버측에 요청시 서버가 응답하고 응답이 끝나야만 그 다음 요청 가능
- 동기적 방식 = 유효성 검사시 팝업창을 띄워서 유효성 검사를 했었다
- 동기적인 방식으로 요청시 주로 페이지가 바뀐다(팝업창으로 페이지가 바뀜)
text() 함수 vs val() 함수
- text() : 입력양식 외에도 특정 태그 사이의 값을 구해오거나 설정
- val() : 입력양식 / 선택양식에만 사용 가능
focus() 함수 & blur() 함수
- focus() : 포커스를 준다
- blur() : 포커스 아웃되었을때 발생
$(this)
- 이벤트를 발생시킨 태그
ex)
$("input").focus(function() {
$(this).val("").css("color","#000");
});- 여기서 this 는 focus 이벤트가 발생한 태그
필터선택자
- 특정태그만 선택적으로 구해오고 싶을때 사용
: input 필터선택자
- 입력 폼 태그 전부 한꺼번에 선택할 수 있는 필터 ex) input, select, textarea, button
: text 필터선택자
- input type 속성값이 text 인 input 태그만을 모두 선택하는 필터
: password 필터선택자
- input type 속성값이 password 인 input 태그만을 모두 선택하는 필터
after() vs append()
- after() : 특정 태그에 요소 추가, 형제 요소로 추가
- append() : 특정 태그에 요소 추가, 자식 요소로 추가
remove() 함수
- 선택한 요소(태그)를 HTML 에서 제거
ex)
$( "p" ).remove();- 선택된 태그인 p 태그가 삭제됨
jQuery form 태그 관련 함수 예제
- 폼에서 자주 쓰는 기능들
jQuery 예제 35
jQuery form 태그 관련 함수 예제 10
- 라디오 버튼을 선택하는 :radio 필터선택자
- sample12.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sample12</title>
<script src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(function(){
// :radio 는 input type=radio 버튼을 모두 구해오는 필터 선택자
$(":radio").click(function(){
$("label").css("font-weight","");
$("label[for='"+$(this).attr("id")+"']").css("font-weight","bold");
});
$("label").click(function(){
$("label").css("font-weight","");
$(this).css("font-weight","bold");
});
});
</script>
</head>
<body>
성별:
<input type="radio" name="gender"
value="남자" id="gender_man" />
<label for="gender_man">남자</label>
<input type="radio" name="gender"
value="여자" id="gender_woman" />
<label for="gender_woman">여자</label>
</body>
</html>- input type 속성값이 radio 인 모든 태그만을 구해온다.
- 라디오 버튼을 클릭시 click 이벤트가 발생한다
- 라디오 버튼을 클릭시 모든 label 을 구해와서 font-weight 를 ""로 설정한다, 즉 기존에 bold 되어있던 것을 해제하는 것
- 라디오 버튼의 id 값과 label 태그의 for 값은 같은 값이어야 한다
+ radio 버튼은 name 값이 동일해야하고, id 값은 서로 다르게 설정해야함
- 또한 버튼이 아닌 레이블 태그를 선택해도 해당 레이블에 bold 를 적용시킨다
사용자가 선택한 라디오 버튼에 해당하는 레이블 구하기 (sample12.html 부분)
$("label[for='"+$(this).attr("id")+"']").css("font-weight","bold");
- label 태그의 for 속성을 불러오는데, for 속성값이 $(this).attr("id") 인, 즉 "gender_man" 인 label 태그를 구해옴
- 이때, $(this) 는 '남자' 에 해당하는 input 태그를 의미하고, attr("id")를 통해 그 input 태그의 id 속성을 구하면 "gender_man" 이다
- 그 label 태그에 대해 bold 를 적용하고 있다
- 라디오 버튼의 id 값과 label 태그의 for 값이 같은 값이어야 가능하고 보통 같은값으로 설정
+ $("요소 선택[속성=값]") 는 속성 선택자 중 하나, 해당 요소 중 어떤 속성의 값이 특정값일때만 그 태그를 구해온다.
- 또한 버튼대신 레이블을 눌러도 똑같이 레이블이 bold 가 됨
+ 라디오 버튼에도 change 이벤트 발생
jQuery 예제 36
jQuery form 태그 관련 함수 예제 11
- 체크박스를 모두 구해오는 :checkbox 필터선택자
- input type=reset 인 모든 태그를 구해오는 :reset 필터선택자
- sample14.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sample14</title>
<script src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
// :checkbox 는 input type=checkbox 로 되어있는 태그를 모두 구해오는 필터 선택자
$(function(){
$("button").click(function(){ // '전부체크' 버튼
$(":checkbox").attr("checked","checked");
});
// :rest 은 input type=reset 로 되어있는 태그를 모두 구해오는 필터 선택자
$(":reset").click(function(){ // '전부해제' 버튼
$(":checkbox").attr("checked",false);
});
});
</script>
</head>
<body>
스킬:
<input type="checkbox" name="xhtml" value="XHTML" id="xhtml"/>
<label for="xhtml">XHTML</label>
<input type="checkbox" name="css" value="CSS" id="css" />
<label for="css">CSS</label>
<input type="checkbox" name="javascript"
value="JavaScript" id="javascript" />
<label for="javascript">JavaScript</label>
<input type="checkbox" name="php" value="PHP" id="php" />
<label for="php">PHP</label>
<p><button> 전부체크</button></p>
<input type="reset" value="전부 해제">
</body>
</html><'전부체크' 버튼>
- :checkbox 는 input type 속성값이 checkbox 인 태그만을 모두 구해오는 필터선택자
- 모두 동의하기 누르면 모든 체크박스에 체크가 되게 하는 기능등에 활용 가능.
- 이때, 모든 input type = checkbox 태그를 구해와야함
- :checkbox 로 모든 체크박스를 구해오고 attr() 을 통해 checked 속성값을 checked 로 설정한다
- input type = "checkbox 에서 checked = "checked" 시 체크되므로 그럼 모든 체크박스가 효율적으로 선택됨
<'전부해제' 버튼>
- :reset 은 input type 속성값이 reset 인 태그를 모두 구해오라는 필터선택자
- input type=reset 인 태그를 구해와서 click 이벤트를 처리
- 클릭시 모든 checkbox 를 구해와서 attr() 로 checked=false 로 설정함으로서 모든 체크박스의 체크가 해제됨
+ jQuery 에서 전부해제 하는 이벤트를 처리하고 있으므로 input type=reset 일 필요는 없다, 속성값이 button 이어도 가능, 그럼 id 값이나 다른 방법으로 태그를 구해와서 체크해제 이벤트를 처리하면 된다
+ CSS 적용을 위해 라디오 input 태그의 id값과 label 태그의 for 값을 같은값으로 설정한다
jQuery 예제 37
jQuery form 태그 관련 함수 예제 12
- sample14.html 와 같은 기능이지만 다른 방법 코드
- removeAttr() 함수 : 속성을 제거해줌
- sample14-1.html 중 sample14.html 과 다른 부분만
$(":reset").click(function(){
// $(":checkbox").attr("checked",false);
$(":checkbox").removeAttr("checked");
});- '전부해제' 기능을 다르게 구현
- attr() 을 통해 checked 속성을 false로 설정한게 첫번째 방법이고, 여기선 removeAttr() 함수를 사용해서 checked 란 속성(attribute) 을 제거해줌
- 사진 없음 (sample14.html 와 같은 기능)
jQuery 예제 38
jQuery form 태그 관련 함수 예제 13
- 전송버튼을 모두 구해오는 :submit 필터선택자
- sample15.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sample15</title>
<script src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
// :submit 은 input type=submit 으로 되어있는 태그를 구해오는 필터 선택자
$(function(){
$(":submit").mouseover(function(){
$(this).after("<p>입력한 내용을 서버로 전송합니다.</p>");
}).mouseout(function(){
$("p").remove();
});
});
</script>
</head>
<body>
<dl>
<dt>이름<em>(필수)</em></dt>
<dd><input type="text" name="name" /></dd>
<dt>코멘트</dt>
<dd>
<textarea name="comment"></textarea>
</dd>
<dd><input type="submit" value="전송" /></dd>
</dl>
</body>
</html>- :submit 는 input type 속성값이 submit 인 태그만을, 즉 전송버튼을 모두 구해오는 필터선택자
- 모든 전송버튼을 구해와서 mouseover 이벤트와 mouseout 이벤트를 처리하고 있다
- mouseover() 에서 해당 버튼에 마우스 오버시 after() 함수를 통해 안의 내용(태그)을 형제요소로 추가하고 있다
jQuery 예제 39
jQuery form 태그 관련 함수 예제 14
- 이미지를 구해오는 :image 필터선택자
- sample16.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sample16</title>
<script src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
// :image 은 input type=image 로 되어있는 태그를 구해오는 필터 선택자
$(function(){
$(":image").mouseover(function(){
$(this).attr("src","button_on.jpg");
}).mouseout(function(){
$(this).attr("src","button.jpg");
});
});
</script>
</head>
<body>
<dl>
<dt>이름<em>(필수)</em></dt>
<dd><input type="text" name="name" /></dd>
<dt>코멘트</dt>
<dd>
<textarea name="comment"></textarea>
</dd>
<dd><input type="image" src="button.jpg" alt="전송" /></dd>
</dl>
</body>
</html>- :image는 input type 속성값이 image인 태그만을 모두 구해오는 필터선택자
- 여기선 이미지버튼을 만들어서, mouseover 와 mouseout 시 다른 이미지를 src 속성값으로 설정하고 있다
+ 초기 상태 버튼은 눌려져있지 않은 짙은 회색 버튼 이미지인 button.jpg 이다
- :image 를 통해 모든 input type=image 를 불러오지만 그 중에서도 $(this)를 통해 이벤트가 발생한 그 이미지만 불러올 수 있다
+ 이미지가 여러개 있다고 하더라도 $(this) 를 통해 마우스 오버가 된 그 이미지 태그를 구해옴
- 마우스 포인터가 올라왔을때, 내려왔을때 다른 이미지 적용
jQuery 예제 40
jQuery form 태그 관련 함수 예제 15
- 리셋버튼을 선택하는 :reset 필터선택자
- sample17.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sample17</title>
<script src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(function(){
$(":reset").one("click",function(){
// $(":reset").click(function(){
$(this).after("<p>입력 내용을 초기화 합니다.</p>");
});
});
</script>
</head>
<body>
<form action="">
<dl>
<dt>이름<em>(필수)</em></dt>
<dd><input type="text" name="name" /></dd>
<dt>코멘트</dt>
<dd>
<textarea name="comment"></textarea>
</dd>
<dd><input type="reset" value="재설정" /></dd>
</dl>
</form>
</body>
</html>- :reset는 input type 속성값이 reset인 태그만을 모두 구해오는 필터선택자
- :reset 으로 모든 리셋버튼을 가져온 뒤, $(this) 를 통해 그 중 클릭된 리셋버튼에 대해 after() 를 실행
- one() 함수를 통해 괄호 안의 click 이벤트를 한번만 수행하게 한다
- one() 함수를 쓰지 않고 바로 click() 을 썼다면, '재설정' 버튼을 누를때마다 같은 내용을 여러번 덧붙임
+ one() 함수를 쓰지 않고 바로 click() 을 썼다면
- one() 함수를 쓰지 않고 바로 click() 을 썼다면, '재설정' 버튼을 누를때마다 같은 내용을 여러번 덧붙임
jQuery 예제 41
jQuery form 태그 관련 함수 예제 16
- 유효성 검사 내용
- sample18.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sample18</title>
<script src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(function(){
$("button").click(function(){
if($("#mail").val() == ""){
alert("메일 주소를 입력하세요");
$("#mail").focus();
return false;
}
if($("#check").val()==""){
alert("메일주소확인을 입력 하세요");
$("#check").focus();
return false;
}
if($("#mail").val() != $("#check").val()){
// $("em").text("메일 주소가 동일하지 않습니다.");
alert("메일주소가 동일 하지 않습니다.");
$("#check").val("");
$("#check").focus();
return false;
}
});
});
</script>
</head>
<body>
<form action="check.html">
<dl>
<dt>메일주소</dt>
<dd><input type="text" name="mail" id="mail"/></dd>
<dt>메일주소<em>(확인)</em></dt>
<dd><input type="text" name="check" id="check" /></dd>
<dd><button> 확인</button>
<input type=reset value="취소"></dd>
</dl>
</form>
</body>
</html>- 확인 버튼을 'button' 으로 구해와서 click 시 유효성 검사를 실행한다
- val() 함수를 통해 입력양식에서 입력된 값을 구해와서 유효성 검사를 한다
- input type=reset 은 따로 이벤트를 쓰지 않더라도 기본적으로 지워주는 기능이 내장되어있다
+ <button></button> 태그는 전송기능이 있는 태그이다!
+ button 태그는 전송기능이 있는 버튼 태그지만 click 이벤트로 처리해도 처리가 된다
+ jQuery 에서 함수들을 . 으로 계속 연결 가능하다
$("#check").val("").focus();- 아래의 코드와 같다
$("#check").val("");
#("#check").focus();
jQuery 예제 42
jQuery form 태그 관련 함수 예제 17
- 파일선택 폼을 선택하는 :file 필터선택자
- sample19.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sample19</title>
<script src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
// :file 은 input type=file 로 되어있는 태그를 구해오는 필터 선택자
$(function(){
$(":file").mouseover(function(){
$(this).after("<p>업로드 가능한 파일은 300kb까지 입니다</p>")
}).mouseout(function(){
$("p").remove();
});
});
</script>
</head>
<body>
사진：<input type="file"><br>
<input type="file">
</body>
</html>- :file 은 input type 속성값이 file 인 태그만을 모두 구해오는 필터선택자
- :file 로 두 파일선택 버튼 태그를 불러오고, $(this) 는 두개의 태그 중에 사용자가 마우스 오버한 태그를 불러와서, after() 를 통해 그 태그 다음에 p 태그를 추가
- 이후 mouseout 시 추가된 p 태그를 remove() 로 삭제
+ after() 은 요소를 형제로 추가, 선택된 태그 바로 다음에 추가됨
jQuery 예제 43
jQuery form 태그 관련 함수 예제 18
- 라디오버튼이나 체크박스에서 체크상태인 태그를 구해오는 :checked 필터선택자
- each() 함수
- sample20.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sample20</title>
<script src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
// :checked는 라디오 버튼이나 체크박스에서 체크 상태인 태그를
// 선택하도록 해준다.
// label 태그 혹은 체크 박스가 클릭될 때 체크 상태인 체크박스와
// 쌍을 이루는 label 태그의 배경색을 회색으로 변경함.
$(function(){
$("label,:checkbox").click(function(){
$("label").css("background","");
$(":checked").each(function(){
$("label[for='"+$(this).attr("id")+"']").css("background","#CCC");
});
});
});
</script>
</head>
<body>
스킬:
<input type="checkbox" name="xhtml" value="XHTML" id="xhtml" />
<label for="xhtml">XHTML</label>
<input type="checkbox" name="css" value="CSS" id="css" />
<label for="css">CSS</label>
<input type="checkbox" name="javascript"value="JavaScript" id="javascript" />
<label for="javascript">JavaScript</label>
<input type="checkbox" name="php" value="PHP" id="php" />
<label for="php">PHP</label>
</body>
</html>- 선택자가 , 로 연결시 , 양쪽에 있는 태그 둘 다 구해옴
- 여기서 $(label,:checkbox) 는 label 태그도 불러오고 모든 input type=checkbox 도 불러옴
- 그러므로 체크박스를 클릭하거나 레이블을 클릭시 안의 내용이 실행됨
- click() 안에서 레이블 태그를 모두 불러온 후 css() 로 배경색을 모두 지움
- 라디오버튼이나 체크박스에서 체크상태인 태그를 모두 구해오는 :checked 필터선택자
- 그리고 :checked 태그로 체크상태인 태그를 모두 구해옴
- each() 함수 : 반복문처럼 반복적인 작업을 수행해주는 함수
- $(":checked").each() 는 구해진 더이상 체크된 체크박스가 없을때까지 실행하라는 의미
- 루프를 돌리듯이 하나씩 구해진 클릭된 체크박스를 가져와서 클릭한 체크박스의 id 속성값과 for 속성값이 같은 label 태그만 css() 로 배경색을 회색으로 설정
+ 여기서 체크된 체크상자에 다시 체크(클릭)을 해도 이 click() 이 실행되는 것, 그러므로 한번더 클릭해서 체크 해제시 배경색을 지워줌
ex) 만약 XHTML 을 체크했다면
$(":checked").each(function(){});- 에서 체크된 모든 체크박스를 하나씩 구해오는데 이때 XTML 체크박스도 해당하게 되므로 안의 내용이 실행됨
$(this).attr("id") 는 'xhtml'- 을 의미한다
$("label[for='"+$(this).attr("id")+"']")- 은 label 태그 중 for 속성값이 'xtml' 인 label 태그를 의미한다
- 체크박스 체크시 옆의 텍스트의 background 색이 바뀐다, 레이블을 클릭시에도 동일
- 한번더 클릭시 다시 click() 이 다시 실행되어서 클릭되어 해제된 체크박스의 레이블이 회색이 아니게 됨
+ 주의 : label 태그의 for 값과 input type=checkbox 의 id 값이 같아야한다
jQuery 예제 44
jQuery form 태그 관련 함수 예제 19
- select-option 에서 선택되어있는 option 태그를 구해오는 :selected 필터선택자
- sample21.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sample21</title>
<script src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
// 연령을 "10대" 로 선택하면 "좋아하는 술" 입력란이 입력 불가 상태가 됨
// :selected 는 선택된 option 태그를 구해오는 필터 선택자
$(function(){
$("select").change(function(){
// if($(":selected").attr("value")=="10 대"){ // '10대' 선택, 아래와 똑같다
if($("select").val() == "10 대") { // 더 간단한 방법
$("input").attr("disabled", "disabled");
// $("input").attr("disabled", true); 위와 똑같다
// $("input").attr("readOnly", "readOnly"); readOnly 로 비활성화
// $("input").attr("readOnly", true); 위와 똑같다
}else{ // 나머지 연령대 선택
$("input").removeAttr("disabled");
// $("input").attr("disabled", false); 위와 똑같다
// $("input").attr("readOnly", false); readOnly 로 비활성화
// $("input").removeAttr("readOnly"); 위와 똑같다
}
});
});
</script>
</head>
<body>
<p> 나이：
<select name="age">
<option value=" 선택해주세요"> 선택해주세요</option>
<option value="10 대">10 대</option>
<option value="20 대">20 대</option>
<option value="30 대">30 대</option>
<option value="40 대이상">40 대이상</option>
</select></p>
<p> 좋아하는 술：<input type="text" /></p>
</body>
</html>- select-option 에서 선택되어있는 option 태그를 구해오는 :selected 필터선택자
- select-option 에서 어떤 값을 선택시 change 이벤트 발생, 이때 select 태그가 이벤트를 발생시키는 태그가 된다
- select-option 중 특정 태그만 구해오려면 if~else 문으로 나눠서 change 이벤트를 처리해야한다
- $(":selected").attr("value") == '10 대' 는 선택된 옵션의 value 속성값이 '10 대' 일때 를 의미한다, 즉 '10 대가 선택되었으면' 을 의미함
- 10 대가 선택되었을때 attr() 함수로 input 태그의 disabled 속성을 "disabled" 로 설정하여 input 태그를 비활성화 시킴
- 그리고 나머지의 경우는 else에서 removeAttr() 함수를 통해 disabled 속성을 삭제함, 또는 attr() 함수로 "disabled" 를 false로 설정해서도 똑같이 구현 가능
$("input").removeAttr("disabled");
// $("input").attr("disabled", false); 위와 똑같다
+ select 에서 아무것도 선택하지 않으면 가장 첫번째가 선택된 상태임 (주로 선택해주세요 메세지)
+ 이때 option 태그에 selected="selected" 속성을 추가시 초기부터 선택된 채로 나타남
$(":selected").attr("value") 대신 다른 간단한 방법으로 구해오기
// if($(":selected").attr("value")=="10 대"){} // '10대' 선택
if($("select").val() == "10 대") {} // 간단한 방법- 그냥 $("select").val() 을 통해서도 select 에서 선택된 옵션의 값을 구해올 수 있다
- val() 함수로 입력양식 / 선택양식의 값을 구해오거나 설정할 수 있다
+ 여기선 select 가 1개이므로 그냥 태그선택자로 가져옴
- select 에서 10대를 선택시 입력창을 비활성화 시킴
+ $("input").attr("disabled",true); 는?
- disabled 해제되어 입력 가능해짐
$("input").attr("disabled", "disabled");
// $("input").attr("disabled", true); 위와 똑같다
+ 비활성화 시키는 방법 2가지 중 disabled 대신 readonly 도 될까?
- 마찬가지로 비활성화 잘 된다
// $("input").attr("disabled", "disabled");
// $("input").attr("disabled", true); 위와 똑같다
$("input").attr("readOnly", "readOnly"); readOnly // readOnly 로 비활성화
비활성화 시키는 코드
$("input").attr("disabled", "disabled");
// $("input").attr("disabled", true); 위와 똑같다
// $("input").attr("readOnly", "readOnly"); readOnly 로 비활성화
// $("input").attr("readOnly", true); 위와 똑같다
비활성화 푸는 코드 (활성화)
$("input").removeAttr("disabled");
// $("input").attr("disabled", false); 위와 똑같다
// $("input").attr("readOnly", false); readOnly 로 비활성화
// $("input").removeAttr("readOnly"); 위와 똑같다
+ AJAX 에서 each() 함수 쓴다, AJAX 할때 자세히 공부
jQuery 예제 45
유효성 검사 예제 1
- jQuery 는 유효성 검사를 할때 가장 많이 사용
- jQuery01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery연습</title>
<!-- <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> -->
<script src="jquery-1.9.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
// $("form").submit(function(){
$("#myform").submit(function(){
// function check() {
var id = $.trim($("#id").val());//jQuery를 이용하여 앞뒤 공백 제거
if (id == "") {
// if($.trim($("#id").val()) == ""){
alert("ID를 입력 하세요?");
$("#id").focus();
return false;
}
// }
}); // submit() end
}); // ready() end
</script>
</head>
<body>
<form id=myform name=myform method=post action=send.jsp>
<table border=1 align=center>
<tr>
<td>ID</td>
<td><input type=text id="id" name="id" size=20></td>
</tr>
<tr>
<td align=center colspan=2>
<input type=submit value="가입"></td>
</tr>
</table>
</form>
</body>
</html>+ submit 버튼이므로 form 태그에 대해 submit 이벤트를 등록한다, 나머지 내용은 모두 그 안에 넣음
- id 값이 id 로 되어있는 태그를 구해서 안의 값을 구해서 var id 에 저장한다
- 그 id 변수가 null 이면 경고창을 띄우고 태그에 focus() 로 focus 를 준다
trim() 함수
- 문자열 좌측과 우측의 공백을 없애줌
- 주의 : 그냥 trim() 이 아니라 $.trim() 형태로 써야함
jQuery 예제 46
유효성 검사 예제 2
- jQuery01-1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery연습</title>
<script src="jquery-1.9.1.min.js" type="text/javascript"></script>
<script>
//function sendGuest() {
$(document).ready(function(){
$("form").submit(function(){
var name=$.trim($("#name").val());
var content=$.trim($("#content").val());
if(name == "") {
alert("이름 !!");
$("#name").focus();
return false;
}
if(content == "") {
alert("내용 !!");
$("#content").focus();
return false;
}
}); // submit();
}); // ready();
//}
</script>
</head>
<body>
<!--
<form onSubmit="return sendGuest()" name=myform method=post action=send.jsp>
-->
<form method=post action=send.jsp>
<table width="500" border="1" align=center>
<tr height="50">
<td align="center"><b>방명록</b></td>
</tr>
</table>
<br>
<table width="500" border="1" align=center>
<tr height="25">
<td align="center" width="100">작성자</td>
<td align="left">
<input type="text" id="name" name="name">
</td>
</tr>
<tr height="70">
<td align="center" width="100">내용</td>
<td align="left">
<textarea rows="6" cols="50" id="content" name="content"></textarea>
</td>
</tr>
</table>
<table width="500" border="0" align=center>
<tr height="25">
<td align="center">
<input type="submit" value="등록하기">
<input type=reset value="취소">
</td>
</tr>
</table>
</form>
</body>
</html>- form 태그에 submit 이벤트를 처리함
- 작성자 입력양식의 id값과 내용 입력양식의 id값을 이용해서 불러온 후 val() 로 값을 구하고,$.trim() 후 각각 변수에 저장해서 유효성 검사를 하고 있다
- name=="" 일때 경고창과 포커스 처리를 한 후 return false 로 함수를 완전히 빠져나간다
- 함수를 빠져나갔으므로 이름을 입력하라는 경고창만 띄우고 내용을 입력하라는 경고창은 띄우지 않음
+ return false 가 없다면?
- 경고창이 이중으로 뜬다
jQuery 예제 47
유효성 검사 예제 3
- 이전 예제와 비슷
- mem_insert.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입 폼</title>
<script src="jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
$("form").submit(function(){
// function check(){
if($.trim($("#id").val())==""){
alert("아이디를 입력하세요!");
$("#id").val("").focus();
return false;
}
if($.trim($("#pwd").val())==""){
alert("비밀번호를 입력하세요!");
$("#pwd").val("").focus();
return false;
}
if($.trim($("#name").val())==""){
alert("이름을 입력하세요!");
$("#name").val("").focus();
return false;
}
if($.trim($("#addr").val())==""){
alert("주소를 입력하세요!");
$("#addr").val("").focus();
return false;
}
if($.trim($("#intro").val()) == ""){
alert("자기 소개를 입력 하세요!");
$("#intro").focus();
return false;
}
// }
}); // submit() end
}); // ready() end
</script>
</head>
<body>
<!--
<form method="post" action="mem_ok.jsp"
onsubmit="return check()">
-->
<form method="post" action="mem_ok.jsp">
<table align="center" border="1">
<tr>
<th>아이디</th>
<td><input name="id" id="id" size="14" /></td>
</tr>
<tr>
<th>비밀번호</th>
<td><input type="password" name="pwd" id="pwd" size="14" /></td>
</tr>
<tr>
<th>회원이름</th>
<td>
<input name="name" id="name" size="20" />
</td>
</tr>
<tr>
<th>회원주소</th>
<td>
<input name="addr" id="addr" size="30" />
</td>
</tr>
<tr>
<th>자기소개</th>
<td>
<textarea name="intro" rows=5 cols=25 id="intro"></textarea>
</td>
</tr>
<tr>
<th colspan="2">
<input type="submit" value="저장" />
<input type="reset" value="취소" onclick="$('#id').focus()" />
</th>
</tr>
</table>
</form>
</body>
</html>- 입력양식들의 id 값을 다르게 설정하여 구분한다
- 전송 버튼 클릭시 값이 전달될 파일은 mem_ok.jsp 파일
- 리셋버튼 태그에 onClick 속성에서 함수이름 대신 바로 함수를 사용하고 있다
- 계속해서 아래쪽의 내용이 실행되지 않도록 return false; 를 추가한다
- 나머지는 이전의 예제들과 비슷하다
jQuery 예제 48
유효성 검사 예제 4
- 패턴 지정해서 정규 표현식 검사
- jQuery02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> jQuery 폼체크 예제 </title>
<script src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
//function form_check() {
$(document).ready(function(){
$("form").submit(function(){
// 체크 패턴
// var pattern = /^[a-zA-Z]+[a-z0-9_]$/;
// var num = /^[0-9]+$/;
var pattern = /^[a-z]+[a-z0-9_]+[a-z0-9_]$/;
var num = /^[0-9]+$/;
// 아이디 체크
var id = $.trim($('#id').val());//jQuery를 이용하여 앞뒤 공백 제거
if(id=="") { // 유효성 검사
alert("아이디를 입력하세요!");
$('#id').focus();
return false;
} else { // 정규 표현식 검사
if(!pattern.test(id)) { // test():pattern에 맞지 않으면 - false 리턴
alert("아이디는 영문소문자로 시작하고\r\n영문소문자, 숫자, 언더바(_)만 사용하실 수 있습니다! ");
// $('#id').select();
// $("#id").val("");
// $("#id").focus();
$("#id").val("").focus();
return false;
}
}
// 비밀번호 체크
var pss = $.trim($('#pss').val());//jQuery를 이용하여 앞뒤 공백 제거
if(pss=="") { // 유효성 검사
alert("비밀번호를 입력하세요!");
$('#pss').focus();
return false;
} else { // 정규 표현식 검사
if(!num.test(pss)) { // test():pattern에 맞지 않으면 - false 리턴
alert("비밀번호는 숫자만 가능합니다!");
// $('#pss:text').attr('value', '');
$("#pss").val("");
$('#pss').focus();
// $('#pss').select();
return false;
}
}
}); // submit() end
}); // ready() end
//}
</script>
</head>
<body>
<!--
<form method="post" action="send.jsp" onSubmit="return form_check()">
-->
<form method="post" action="send.jsp">
ID : <input type="text" id="id" name="post_id"> <br>
비밀번호 : <input type="text" id="pss" name="post_pss"> <br><br>
<input type="submit" id="join_button" value="폼체크">
</form>
</body>
</html>
<!--
test() 함수
test() 함수는 정규식과 비교하여 포함되면 true 반환, 포함되지 않으면 false 반환
pattern에 맞으면 - true
pattern에 맞지 않으면 - false -->- 아이디값은 소문자 a-z , 숫자 0-9, _(언더바) 가능하고 나머지는 불가능
- 비밀번호는 0-9 숫자만 가능
- 유효성 검사보다는 정규 표현식 검사이다, 지정된 정규 표현식과 다른 경우 alert
- 주로 이메일처럼 아이디@g.com 처럼 형식이 정해져있을때, 사용자의 입력이 정규표현식과 일치하는지 확인
패턴 지정 (jQuery02.html 부분)
// 체크 패턴
// var pattern = /^[a-zA-Z]+[a-z0-9_]$/;
// var num = /^[0-9]+$/;
var pattern = /^[a-z]+[a-z0-9_]+[a-z0-9_]$/;
var num = /^[0-9]+$/;- 패턴 지정시 시작을 알리는 ^ 기호, 끝을 알리는 $ 기호
- 대괄호안의 문자만 사용가능하다는 의미
pattern 변수
- 아이디의 패턴 지정
- 3가지 []가 + 로 연결된 것은 순차적으로 연결된 것
- [a-z] 는 영문 소문자 a 부터 z 까지 가능하다는 의미이고 [a-z] 로 시작해야함
- 그 뒤로 a-z 0-9 _ 가 가능하고, 끝나는 문자는 a-z 0-9 _ 가 가능하다 즉 아이디는 최소 3글자 임
- 가운데 있는 [a-z0-9_] 는 없어도 비슷하다
num 변수
- num 변수는 비밀번호의 패턴 지정
- [0-9] 로 0 부터 9까지의 숫자들만 비밀번호로 가능
id 유효성 검사 (jQuery02.html 부분)
// 아이디 체크
var id = $.trim($('#id').val());//jQuery를 이용하여 앞뒤 공백 제거
if(id=="") { // 유효성 검사
alert("아이디를 입력하세요!");
$('#id').focus();
return false;
} else { // 정규 표현식 검사
if(!pattern.test(id)) { // test():pattern에 맞지 않으면 - false 리턴
alert("아이디는 영문소문자로 시작하고\r\n영문소문자, 숫자, 언더바(_)만 사용하실 수 있습니다! ");
// $('#id').select();
// $("#id").val("");
// $("#id").focus();
$("#id").val("").focus();
return false;
}
}- if문에서 유효성 검사를 하고 유효성 검사를 통과했다면(즉 값이 써져있다면) else문에서 정규 표현식 검사를 한다
- 정규 표현식 검사는 아래에서
id 정규 표현식 검사 (jQuery02.html 부분)
if(!pattern.test(id)) { // test():pattern에 맞지 않으면 - false 리턴
alert("아이디는 영문소문자로 시작하고\r\n영문소문자, 숫자, 언더바(_)만 사용하실 수 있습니다! ");
// $('#id').select();
// $("#id").val("");
// $("#id").focus();
$("#id").val("").focus();
return false;- test() 함수 : 입력했던 패턴과 사용자가 입력한 값이 맞는지 확인해줌
- 패턴을저장한변수명.test(사용자입력양식) 으로 사용
- 맞으면 true 리턴, 맞지 않으면 false 리턴
- 우리는 맞지 않을 경우 처리를 알림창을 띄우는 등의 처리를 해야하므로 !pattern.test(id) 를 if() 안에 넣었다
- 정규 표현식에 맞지 않으면 알람창을 띄우고, 아이디 입력양식을 비우고 focus 함
비밀번호 정규 표현식 검사 (jQuery02.html 부분)
if(!num.test(pss)) { // test():pattern에 맞지 않으면 - false 리턴
alert("비밀번호는 숫자만 가능합니다!");
// $('#pss:text').attr('value', '');
$("#pss").val("");
$('#pss').focus();
// $('#pss').select();
return false;
}- id 정규 표현식 검사와 유사
test() 함수
- 입력했던 패턴과 사용자가 입력한 값이 맞는지 확인해줌
- 패턴을저장한변수명.test(사용자입력양식) 으로 사용
- 정규식과 비교하여 포함되면 true 반환, 포함되지 않으면 false 반환
- pattern에 맞으면 true, pattern에 맞지 않으면 false
- 형식에 맞는값을 입력해야만 사용 가능
jQuery 예제 49
유효성 검사 예제 5
- 유효성 검사 + 정규 표현식 검사
- join.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 회원가입</title>
<style type="text/css">
#jointable table{width:600px;}
#jointable th{text-align: right; background-color:orange;}
#jointable td input {border:1px solid seagreen;}
</style>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("form").submit(function() {
var tel1_pattern = /(^01[016789]$)/; //정규식
if ($("#id").val() == "") {
alert("아이디를 입력하세요!");
$("#id").focus();
return false;
} else if ($("#pwd").val() == "") {
alert("비밀번호를 입력하세요!");
$("#pwd").focus();
return false;
} else if ($("#pwd2").val() == "") {
alert("비밀번호확인 을 입력하세요!");
$("#pwd2").focus();
return false;
} else if ($("#pwd").val() != $("#pwd2").val()) {
alert("비밀번호와 비밀번호 확인이 일치하지않습니다.");
$("#pwd").val("");
$("#pwd2").val("");
$("#pwd").focus();
return false;
} else if ($("#name").val() == "") {
alert("이름을 입력하세요!");
$("#name").focus();
return false;
} else if ($("#tel1").val() == "") {
alert("전화번호 첫번째자리 입력하세요!");
$("#tel1").focus();
return false;
} else if ($("#tel1").val().length != 3) {
alert("전화1을 3개의 숫자로 입력하세요!");
$("#tel1").val("");
$("#tel1").focus();
return false;
} else if (isNaN($("#tel1").val())) {
alert("전화1을 3개의 숫자로 입력하세요!");
$("#tel1").val("");
$("#tel1").focus();
return false;
// var tel1_pattern = /(^01[016789]$)/; pattern에 맞지 않으면 - false
} else if (!tel1_pattern.test($("#tel1").val())) {
alert("010, 011, 016, 017, 018, 019만 가능합니다.")
$("#tel1").val("")
$("#tel1").focus();
return false;
} else if ($("#tel2").val() == "") {
alert("전화번호 두번째자리를 입력하세요!");
$("#tel2").focus();
return false;
} else if ($("#tel2").val().length != 4) {
alert("전화1을 4개의 숫자로 입력하세요!");
$("#tel2").val("");
$("#tel2").focus();
return false;
} else if (isNaN($("#tel2").val())) {
alert("전화2을 3~4개의 숫자로 입력하세요!");
$("#tel2").val("");
$("#tel2").focus();
return false;
}
/*
else if($("#tel2").val() == "" ||
$("#tel2").val().length > 4 || isNaN($("#tel2").val())) {
// alert("okkkkkkk");
/*
var pattern = /(^01[016789]$)/; //정규식 슬래쉬(/)로 시작해서, 슬래쉬(/)로 끝났다.
var tel1 = $("#tel2").val();
if (!pattern.test(tel1)) {
//틀리면
alert("010, 011, 016, 017, 018, 019,o19만 가능합니다.")
$("#te2").val("")
$("#te2").focus();
}
*/
// }
else if ($("#tel3").val() == "") {
alert("전화번호 세번째자리를 입력하세요!");
$("#tel3").focus();
return false;
}else if ($("#tel3").val().length != 4) {
alert("전화1을 4개의 숫자로 입력하세요!");
$("#tel3").val("");
$("#tel3").focus();
return false;
} else if (isNaN($("#tel3").val())) {
alert("전화2을 3~4개의 숫자로 입력하세요!");
$("#tel3").val("");
$("#tel3").focus();
return false;
} else if ($("#addr").val() == "") {
alert("주소를 입력하세요!");
$("#addr").focus();
return false;
} else if ($("#job").val() == "") {
alert("직업을 선택하세요!");
$("#job").focus();
return false;
} else if ($("#man").is(':checked') == false &&
$("#woman").is(':checked') == false) {
alert("남자또는 여자를 선택하세요!");
return false;
} else if ($("#email").val() == "") {
alert("이메일을 입력하세요!");
$("#email").focus();
return false;
} else if ($("#intro").val() == "") {
alert("자기소개를 입력하세요!");
$("#intro").focus();
return false;
} else {
alert("ok");
// $("form").submit();
}
}); // click() end
}); // ready() end
</script>
</head>
<body>
<h1>회원 가입</h1>
<form action="send.jsp" method=post>
<table id="jointable">
<tr>
<th>아이디</th>
<td><input type="text" name="id" id="id" size="12" maxlength="12" /></td>
</tr>
<tr>
<th>비밀번호</th>
<td><input type="password" name="pwd" id="pwd" size="12" maxlength="12" /></td>
</tr>
<tr>
<th>비밀번호확인</th>
<td><input type="password" name="pwd2" id="pwd2" size="12" maxlength="12" /></td>
</tr>
<tr>
<th>이름</th>
<td><input type="text" name="name" id="name" size="12" maxlength="12" /></td>
</tr>
<tr>
<th>전화번호</th>
<td>
<input type="text" name="tel1" id="tel1" size="3" maxlength="3" />-
<input type="text" name="tel2" id="tel2" size="4" maxlength="4" />-
<input type="text" name="tel3" id="tel3" size="4" maxlength="4"/>
</td>
</tr>
<tr>
<th>주소</th>
<td><input type="text" name="addr" id="addr" maxlength="100" /></td>
</tr>
<tr>
<th>직업</th>
<td>
<select id = "job">
<option value="">------
<option value="학생">학생
<option value="직장인">직장인
<option value="자영업">자영업
<option value="주부">주부
</select>
</td>
</tr>
<tr>
<th>성별</th>
<td>
<input type="radio" id="man" name="gender" value="M">남자
<input type="radio" id="woman" name="gender" value="W">여자
</td>
</tr>
<tr>
<th>이메일</th>
<td><input type="text" name="email" id="email" size="50" maxlength="50" /></td>
</tr>
<tr>
<th>자기소개</th>
<td>
<textarea rows="5" cols="40" id="intro" name="intro"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align=center>
<input type="submit" id="btn_join" value="가입">
<input type="reset" id="btn_cancel" value="취소">
</td>
</tr>
</table>
</form>
</body>
</html>
<!--
1. isNaN() 함수
isNaN() 함수는 숫자인지 아닌지를 판단하고 true/false 를 리턴함.
isNaN('a') -- true 리턴.(문자)
isNaN('123') --- false 리턴.(숫자)
cf.isNaN 은 Not a Number 의 약자.
if(isNaN(document.myform.tel1.value){
alert("숫자만 입력 하세요");
}
if(isNaN($("#tel1").val())){
alert("숫자만 입력 하세요");
}
2. test() 함수
test() 함수는 정규식과 비교하여 포함되면 true 반환, 포함되지 않으면 false 반환
pattern에 맞으면 - true
pattern에 맞지 않으면 - false
3. is() 함수
is() 함수는 값의 유형을 검사하고 그 결과에 따라 true 또는 false를 반환함
라디오 버튼이나 체크박스가 체크되면 true를 반환하고, 체크되지 않으면 false를 반환함.
-->- 테이블의 id 값인 jointable 으로 <style> 에서 CSS 를 적용하고 있다
- 가장바깥에 $(document).ready() 가 오고 그 다음 form 에 대해 submit 이벤트 처리를 하고 있다, 나머지 내용은 모두 그 안에 들어간다
패턴 지정(join.html 부분)
var tel1_pattern = /(^01[016789]$)/; //정규식- tel1_pattern 변수에 정규표현식 설정
- 01 로 시작해서 [] 안의 값중 한개가 들어가야함
+- [] 는 그 안의 값 중 하나를 의미, 여러개가 올 수 있다
패턴 적용 (join.html 부분)
사용된 함수
1. isNaN() 함수
- 숫자인지 아닌지를 판단,숫자가 아니면(문자이면) true 리턴, 숫자이면 false 리턴
2. test() 함수
- 정규식과 비교하여 포함되면 true 반환, 포함되지 않으면 false 반환
- pattern에 맞으면 true, pattern에 맞지 않으면 false 리턴
3. is() 함수
- 라디오버튼이나 체크박스에 체크가 되었는지 판별, 체크가 되었으면 true 리턴, 체크되지 않았을땐 false 리턴
부분 코드 (순차적)
유효성 검사 1 (join.html 부분)
- 아이디, 비밀번호, 비밀번호 확인은 유효성 검사를 한다
유효성 검사 2 (join.html 부분)
- 일치하지 않는 경우 비밀번호도 지우고 비밀번호 확인 도 지우고 비밀번호에 focus
유효성 검사 3 (join.html 부분)
- val() 을 이용하여 전화번호 첫번째 부분에 대한 유효성 검사를 하고 있다
- length 속성과 isNaN() 함수로 유효성 검사
- 전화번호 첫번째 부분 유효성 검사 : 입력이 되어야하고, 입력된 값이 3자리 여야하며, 숫자여야 한다
정규 표현식 검사 1 (join.html 부분)
- 전화번호 첫번째 부분에 대한 정규 표현식 검사를 하고 있다
- test() 를 통해 기존에 지정해둔 패턴과 맞는지 확인하고 있다
- 맞지않을때 false를 리턴하고 ! 를 사용했으므로 위는 정규 표현식에 맞지 않으면 실행되는 코드이다
- 01 로 시작해야하고 다음 자리는 0,1,6,7,8 또는 9 이어야한다
+ 그 다음의 전화번호 두째자리, 세번째 자리도 첫번째 자리에서 했던 것과 유사하게 유효성 검사와 정규표현식 검사를 한다
+ 이름, 자기소개의 유효성 검사도 앞과 비슷하게 처리한다
select 유효성 검사 (join.html 부분)
- select 에서 아무것도 선택하지 않았을때의 기본 option 의 value 가 "" 이므로 이렇게 select-option 유효성 검사 가능하다
라디오박스 유효성 검사 (join.html 부분)
- is() 함수를 통해 해당 라디오박스가 체크되었는지 is(':checked') 로 확인한다, 체크시에 true 반환
- 즉 남자도 선택되지 않았고 (&&) 여자도 선택되지 않았을때 alert 메세지를 띄운다
모든 유효성 검사와 정규 표현식 검사 통과 후 마지막 else 구문 (join.html 부분)
- 앞의 if, else if 에 걸리지 않으면 모든 유효성 검사와 정규 표현식 검사를 통과한 것이다.
- 모든 유효성 검사와 정규 표현식 검사를 통과시 alert 창으로 "ok" 를 출력
jQuery 예제 50
유효성 검사 예제 직접 작성 1
- 유효성 검사 + 정규 표현식 검사
실습 준비
- 폴더 생성 후, HTML 시간에 만들었던 양식폼 html 파일을 각 폴더로 가져오기
- loginform.html
- requred 속성에 의해 메세지를 출력, 우리가 원하는 메세지를 출력할 수 없으므로 지우자
- method="get" 에서 "post" 로 수정
- 현재는 유효성 검사가 안되어있으므로 '로그인' 버튼 클릭시 바로 넘어감
- 직접 차례로 유효성 검사를 하자
- loginform.html 에 코드 추가
1. jQuery 사용을 위해 라이브러리 구해오기
<script src="http://code.jquery.com/jquery-Latest.js"></script>
- head 태그 내에서 CDN 방식으로 최신 라이브러리 불러오기
2. <script></script> 사이에 jQuery 코드 쓰기
- $(document).ready(); 문서를 불러오고 준비가 완료되면 이라는 의미
- jQuery 기본적인 형태, 안의 내용은 코드 실행이 되자마자 실행됨
3. '로그인' 버튼은 input type=submit 이므로 form 태그에 대해 submit 이벤트 처리
- 폼과 관련된 나머지 내용은 모두 이 submit 함수에 들어가야한다
4. id와 비밀번호 유효성 검사
- 입력이 되지 않은 경우의 유효성 검사를 하고 있다
- return false 를 이용해서 바로 위의 함수인 submit() 함수를 완전히 빠져나감
- 실행 확인 캡처
5. 작성한 jQuery 코드를 외부 파일로 빼기
- 외부파일로 뺄때는 확장자를 .js 로 해야한다
- Javascript 에선 함수단위로 들어갔지만 jQuery 에는 $(document).ready() 부터 안의 내용이 모두 들어가야함
- 해당 부분을 복사 후 주석처리 한다
- login.js 안에 복사한다
- loginform.html 파일로 돌아와서 <script> 로 외부 파일을 불러온다
- 결과 캡처
- 이전에 만들어둔 login.jsp 파일이 있으므로 넘어가서 id와 비밀번호가 출력됨
위 예제 전체코드
- loginform.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인 폼</title>
<script src="http://code.jquery.com/jquery-Latest.js"></script>
<!-- 외부 jQuery 파일 불러오기 -->
<script src="login.js"></script>
<script>
/* $(document).ready(function(){
$("form").submit(function(){
// id 유효성 검사
if($.trim($("#id").val()) == "") { // id 입력안하면
alert("ID를 입력하세요.");
$("#id").focus();
return false;
}
// 비밀번호 유효성 검사
if($.trim($("#passwd").val()) == "") { // 비밀번호 입력안하면
alert("비밀번호를 입력하세요.");
$("#passwd").focus();
return false;
}
});
}); */
</script>
</head>
<body>
<!--
method : 값을 전달하는 방식을 설정 : get, post
action : 값이 전달될 파일을 설정
-->
<form method="post" action="login.jsp">
<table border=1 width=350 align=center>
<caption>로그인</caption>
<tr>
<td>ID</td>
<td><input type=text size=20
maxlength=10
autofocus="autofocus"
name="id"
id="id">
</td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type=password size=20
name="passwd"
id="passwd"></td>
</tr>
<tr>
<td colspan=2 align=center>
<input type=submit value="로그인"><!-- 전송기능이 있는 버튼 -->
<input type=reset value="취소"><!-- 초기화 버튼 -->
</td>
</tr>
</table>
</form>
</body>
</html>- login.js
$(document).ready(function(){
$("form").submit(function(){
// id 유효성 검사
if($.trim($("#id").val()) == "") { // id 입력안하면
alert("ID를 입력하세요.");
$("#id").focus();
return false;
}
// 비밀번호 유효성 검사
if($.trim($("#passwd").val()) == "") { // 비밀번호 입력안하면
alert("비밀번호를 입력하세요.");
$("#passwd").focus();
return false;
}
});
});
jQuery 예제 51
유효성 검사 예제 직접 작성 2
- 유효성 검사
- boardform.html 에 코드 추가
실습 준비
- submit 버튼과 reset 버튼만 남기고 주석처리 또는 지우기
- 초기값으로 나오는 value 삭제
- 유효성 검사를 위해 내용안에 들어간 내용 삭제
- textarea 는 저 태그 안의 값이 value 가 되고 val() 로 구해지는 값이기 때문에
1. boardform.html 에 코드 추가, 기본
2. 작성자명과 비밀번호 유효성 검사
+ 만약 .trim() 을 사용한다면 $.trim($("#passwd").val()) 처럼 val() 까지 안에 들어가야함
+ 반복문은 break 로 빠져나가고 함수는 return false; 로 빠져나가야 한다
- id 를 입력하지 않았을때 return false; 로 submit() 함수를 빠져나감
- 따라서 id 유효성 검사에서 걸린 후 함수를 빠져나가면 "비밀번호를 입력하세요" alert 창은 뜨지 않는다
3. 비밀번호 정규 표현식 검사
- 비밀번호 값은 2자리부터 8자리까지만 입력 가능하다
- OR 연산자 || 로 인해 둘 중 하나만 만족하여도 참이된다.
- 결과 캡처
4. 제목과 내용 유효성 검사
- 값이 입력되었는지와 값의 길이를 유효성 검사한다
- 제목은 50자 이내, 내용은 200자 이내로 입력해야한다
- 제목 길이가 적절하지 않으면 경고창을 띄우고 "" 로 지우고 focus 한다
- 내용 길이가 적절하지 않으면 경고창을 띄우고 focus 만 한다
+ 내용 textarea 태그의 경우엔 value 속성이 없지만, 그 태그 사이의 내용이 value 가 되어 val() 할때 나타난다
- 즉, val()=="" 이란 의미는 내용을 입력하지 않음 의 의미
- 결과 캡처
4. 첨부파일 유효성 검사
- 첨부파일 선택하지 않았을때 메세지를 뿌리는 유효성 검사
- 일반적인 양식과 비슷하게 처리
- 꼭 첨부파일이 필요한 경우에 유효성 검사
+ 첨부파일은 일반적인 텍스트 전달과 다르다
+ JSP 에서 첨부파일 처리위한 라이브러리로 파일을 서버측으로 전달 가능
4. 작성한 코드를 외부파일로 만들기
- 작성한 코드를 외부파일 board.js 로 빼기
- $(document).ready() 부터의 모든 내용을 복사 후 주석처리
- 해당 내용을 복사 후 주석처리
- board.js 파일에 붙여넣기
- 다시 boardform.html 에서 외부 jQuery 파일 불러오기
- 결과 출력
+ 외부파일 board.js 는 재사용 가능한 파일이 됨
위 예제 전체코드
- boardform.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>게시판</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!-- 외부 jQuery 파일 불러오기 -->
<script src="board.js"></script>
<script>
/* $(document).ready(function(){
$("form").submit(function(){
if($("#writer").val() ==""){
alert("작성자 명을 입력하세요");
$("#writer").focus();
return false;
}
if($("#passwd").val() ==""){
alert("비밀번호를 입력하세요");
$("#passwd").focus();
return false;
}
if($("#passwd").val().length < 2 ||
$("#passwd").val().length > 8 ) {
alert("비밀번호는 2 ~ 8 자 이내로 입력하세요");
$("#passwd").val("").focus();
return false;
}
if($("#subject").val() ==""){
alert("제목을 입력하세요.");
$("#subject").focus();
return false;
}
if($("#subject").val().length > 50) {
alert("제목을 50자 이내로 입력하세요.");
$("#subject").val("").focus();
return false;
}
if($("#content").val() ==""){
alert("내용을 입력하세요.");
$("#content").focus();
return false;
}
if($("#content").val().length > 200) {
alert("내용을 200자 이내로 입력하세요.");
$("#content").focus();
return false;
}
if($("#myfile").val() == ""){
alert("첨부파일을 선택하세요.");
return false;
}
}); // submit() end
}) // $(document) end */
</script>
</head>
<body>
<form method="post" action="board.jsp">
<table border=1 width=500 align=center>
<caption>게시판</caption>
<tr>
<th>작성자</th>
<td><input type=text size=20 name="writer"
id="writer"
placeholder="작성자명 입력">
</td>
</tr>
<tr>
<th>비밀번호</th>
<td><input type=password size=20 name="passwd"
id="passwd"
placeholder="2~8자 이내 입력">
</td>
</tr>
<tr>
<th>제목</th>
<td><input type=text size=50 name="subject"
id="subject"
placeholder="50자 이내로 입력">
</td>
</tr>
<tr>
<th>내용</th>
<td><textarea rows="5" cols="50" name="content"
id="content" placeholder="200자 이내로 입력"></textarea>
</td>
</tr>
<tr>
<th>파일첨부</th>
<td><input type=file name="myfile" id="myfile">
</td>
</tr>
<tr>
<td colspan=2 align=center>
<input type="submit" value="글작성1"><!-- 전송기능 있는 버튼 -->
<!-- <input type="button" value="글작성2">전송기능 없는 버튼 -->
<!-- <button>글작성3</button>전송기능 있는 버튼 -->
<!-- <button type="submit">글작성4</button>전송기능 있는 버튼 -->
<!-- <button type="button">글작성5</button>전송기능 없는 버튼 -->
<input type="reset" value="취소"><!-- 초기화 버튼 -->
<!-- <button type="reset">초기화</button>초기화 버튼 -->
</td>
</tr>
</table>
</form>
</body>
</html>- board.js
$(document).ready(function(){
$("form").submit(function(){
if($("#writer").val() ==""){
alert("작성자 명을 입력하세요");
$("#writer").focus();
return false;
}
if($("#passwd").val() ==""){
alert("비밀번호를 입력하세요");
$("#passwd").focus();
return false;
}
if($("#passwd").val().length < 2 ||
$("#passwd").val().length > 8 ) {
alert("비밀번호는 2 ~ 8 자 이내로 입력하세요");
$("#passwd").val("").focus();
return false;
}
if($("#subject").val() ==""){
alert("제목을 입력하세요.");
$("#subject").focus();
return false;
}
if($("#subject").val().length > 50) {
alert("제목을 50자 이내로 입력하세요.");
$("#subject").val("").focus();
return false;
}
if($("#content").val() ==""){
alert("내용을 입력하세요.");
$("#content").focus();
return false;
}
if($("#content").val().length > 200) {
alert("내용을 200자 이내로 입력하세요.");
$("#content").focus();
return false;
}
if($("#myfile").val() == ""){
alert("첨부파일을 선택하세요.");
return false;
}
}); // submit() end
}) // $(document) end'국비지원 과정 > 웹표준' 카테고리의 다른 글
| 코딩 46일 / 2022.08.24 / jQuery Ajax 2, Map(맵), jQuery UI, JSP 기초 (0) | 2022.08.24 |
|---|---|
| 코딩 45일 / 2022.08.23 / jQuery 유효성 검사, Ajax 1 (0) | 2022.08.23 |
| 코딩 43일 / 22.08.19 / jQuery의 선택자, 함수, 이벤트 함수 (0) | 2022.08.19 |
| 코딩 39일 / 2022.08.12 / 자바스크립트 사용자 정의 함수,배열,객체,String 객체,Math 객체 (0) | 2022.08.12 |
| 코딩 38일 / 2022.08.11 / 자바스크립트 연산자,제어문,내장 함수2 (0) | 2022.08.11 |