01. 필수항목이 입력이 되었는지 확인
$('.error').hide();
$('.submit').click(function(event){
var data = $('.infobox').val();
var len = data.length;
if(len < 1){
$('.error').show();
event.preventDefault();
}else{
$('.error').hide();
}
});
1. 처음엔 Error 메시지는 숨기고 Click Event 는 Submit 버튼에 연결
2. Click Event 의 이벤트 처리함수에서 Text Field 에 입력된 데이터 추출 data 변수에 저장
3. Data 의 길이를 구하여 IF문으로 구분 하여 처리 / preventDefault() 메소드는 submit > 서버전송 막는데 사용
02. 숫자 필드 유효성 확인
1. 숫자값만 허용
$('.error').hide();
$('.submit').click(function(event){
var data = $('.infobox').val();
var len = data.length;
var c;
for(var i=0;i<len;i++){
c = data.charAt(i).charCoadeAt(0);
if(c < 48 || c > 57){
$('.error').show();
event.preventDefault();
break;
}else{
$('.error').hide();
}
}
});
2. 음수값 허용
$('.error').hide();
$('.submit').click(function(event){
var data = $('.infobox').val();
var len = data.length;
var c;
for(var i=0;i<len;i++){
c = data.charAt(i).charCoadeAt(0);
if(c == 45 && i == 0){
continue;
}
if(c < 48 || c > 57){
$('.error').show();
event.preventDefault();
break;
}else{
$('.error').hide();
}
}
});
3. 범위값 허용 (폼에 5 ~~ 99 사이의 수만 허용하고 작거나 큰값이 들어오면 에러메시지 표시)
$('.error').hide();
$('.submit').click(function(event){
var data = $('.infobox').val();
var len = data.length;
var c=0;
var age=0;
var flag=0;
for(var i=0;i<len;i++){
c = data.charAt(i).charCoadeAt(0);
if(c < 48 || c > 57){
$('.error').show();
flag = 1;
event.preventDefault();
break;
}else{
$('.error').hide();
}
}
if(flag == 0){
age = parseInt(data);
if(age < 5 || age > 99){
$('.error').show();
$('.error').text('Invalid Age. Please enter the age within the range 5 to 99');
event.preventDefault();
}
}
});
-------------------------------------------------------------------------------------------------
# for 루프를 통해 charCodeAt() 함수를 이용 ASCII 값을 얻어서 처리
# 문자의 ASCII 값이 숫자 0 (ASCII 값 48) 이하이거나 숫자 9 (ASCII 값 57) 이상이면 그문자는 숫자가 아니라는 의미임.
-------------------------------------------------------------------------------------------------
03. 전화번호 유효성 확인
$('.error').hide();
$('.submit').click(function(event){
var data = $('.infobox').val();
if(validate_phoneno(data)){
$('.error').hide();
}else{
$('.error').show(); // 주어진조건에 맞지 않을때 Error Message 를 보여줌.
event.preventDefault();
}
});
function validate_phoneno(ph){
var pattern = new RegExp(/^[0-9-+]+$/);
return pattern.test(ph); // 정규식조건과 일치하면 True 그렇지 않으면 False 반환
}
-------------------------------------------------------------------------------------------------
# 텍스트 필드가 숫자와 -, + 기호 만을 갖도록 하는 jQuery 코드-
# data 변수는 유효성 확인을 위해 validate_phoneno() 에 전달됨
# validate_phoneno() 에서는 RegExp 클래스의 객체를 하나 생성함
# 전달된 정규식 /^[0-9-+]+$/ : Text Field 데이터는 0 ~ 9 사이의 숫자와 -, + 기호 로 시작하거나 끝이 나야만함.
-------------------------------------------------------------------------------------------------
* 정규식 패턴 : ^ 는 시작 , $ 는 끝 을 의미 // 닫기 대괄호 (]) 뒤의 + 기호는 이 패턴이 한번 or 그 이상 반복된다는 의미.
-------------------------------------------------------------------------------------------------
04. 사용자 아이디 유효성 확인
if(validate_userid(data)){ ....
function validate_userid(uid){
var pattern = new RegExp(/^[a-z0-9_]+$/);
return pattern.test(uid); // 정규식조건과 일치하면 True 그렇지 않으면 False 반환
}
-------------------------------------------------------------------------------------------------
# 전달된 정규식 /^[a-z0-9_]+$/ :
Text Field 데이터(사용자ID) 는 a ~ z 사이문자, 0 ~ 9 사이숫자 와 _ (밑줄문자) 로 시작하거나 끝이나야 함.
-------------------------------------------------------------------------------------------------
05. 날짜 유효성 확인
if(validate_date(data)){ ....
function validate_date(date){
var pattern = new RegExp(/\b\d{1,2}[\/-]\d{1,2}[\/-]\d{4}\b/);
return pattern.test(date);
}}
-------------------------------------------------------------------------------------------------
# 전달된 정규식 /\b\d{1,2}[\/-]\d{1,2}[\/-]\d{4}\b/
- 정규식의 처음과 끝의 \b 는 단어의 경계를 나타냄, 패턴이 정확히 일치해야함
- \d{1,2} 는 숫자가 1개 또는 2개가 나올수 있다는 의미임.
- [\/-] 는 / 또는 - 기호가 허용된다는 의미임.
- \d{4} 는 숫자가 4개 나와야 한다는 의미임.
- mm/dd/yyyy or mm-dd-yyyy >> 제약조건에 따른 형식
-------------------------------------------------------------------------------------------------
06. 이메일 주소
이메일주소의 정규식 패턴 : RegExp(/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/);
-------------------------------------------------------------------------------------------------
# 전달된 정규식 /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/
- /^[\w-]+ 는 문자, 숫자, 밑줄문자, 또는 하이픈이 이메일주소 처음에 있을수 있다는 조건.
- ^ 는 처음의 의미.
- \w 는 문자, 숫자, 밑줄문자를 의미.
- 닫기 대괄호 (]) 뒤의 + 기호는 하나또는 그이상이 올수 있다는 의미.
- (\.[\w-]+)* 는 . (마침표) 와 그 다음에 하나 이상의 문자, 숫자, 밑줄문자, 또는 하이픈이 0 번 또는 그 이상 나올수 있다는 의미이며 마지막에 * 기호는 0 번 또는 그이상 나올수 있다는 의미
- @ 는 @기호가 이메일의 주소의 이 지점(앞에 정의한 식(Expression) ) 뒤에, 그리고 정의할식 앞에 나와야 한다는 의미 임.
- ([\w-]+\.) 는 문자, 숫자, 밑줄문자, 하이픈이 한번이상 나오고 그 다음에 마침표가 나온다는 의미임. 그리고 이 해당 조합이 한번이상 나올수 있다는 의미.
- [a-zA-Z]+$/ 는 메일 주소의 마지막을 정의 이메일 주소는 대문자, 소문자에 상관없이 문자(중복가능)로 끝나야한다는 의미.
- $ 는 끝의 의미.
-------------------------------------------------------------------------------------------------
07. 체크박스 체크여부
# 여러개의 체크박스가 있고 해당 체크박스가 적어도 하나 이상의 체크여부를 확인한다.
$('.error').hide();
$('.submit').click(function(event){
var count = 0;
var amt = 0;
$('form').find(':checkbox').each(function(){ // 폼의 모든박스를 체크되어 있는지 하나씩 확인.
if($(this).is(':checked')){
count++; // 체크박스가 체크되었을때 Count 를 +1
amt = amt + parseInt($(this).val());
}
});
if(count == 0){ // 체크박스 체크된 개수가 0 일때
$('p.result').hide();
$('.error').show();
}else{
$('.error').hide();
$('p.result').show();
$('p.result').text('Your Bill is $' + amt);
}
event.preventDefault();
});
-------------------------------------------------------------------------------------------------
# Length 메소드로 체크박스 확인
$('.error').hide();
$('.submit').click(function(event){
var amt = 0;
var count = $('input:checked').length;
if(count == 0){
$('p.result').hide();
$('.error').show();
}else{
$('form').find(':checkbox').each(function(){
if($(this).is(':checked')){
count++;
amt = amt + parseInt($(this).val());
}
});
$('.error').hide();
$('p.result').show();
$('p.result').text('Your Bill is $' + amt);
}
event.preventDefault();
});
-------------------------------------------------------------------------------------------------
08. 라디오 버튼 선택여부
$("input:checked").val(); => $("input:checked").attr("value");
$("input:checked").length;
$("td#ID값 input:checked").val();
$("td#ID값 input:checked").length;
-------------------------------------------------------------------------------------------------
09. Select 엘리먼트 항목 선택여부
$("select option:selected").val(); => $("select option:selected").text();
$("#ID값 select option:selected").val();
$("#ID값 option:selected").val();
$("Class값 option:selected").val();
$('.test option:selected').val(); // option이 selected 된 value 값
$('.test option:selected').text(); // option이 selected 된 text 값
// option 중 선택(selected) 된 위치의 index 값 (select option index값은 0부터 시작)
var index = $('.test option').index($('.test option:selected'));
// select 마지막에 해당 ( '<option value="last">마지막</option>' ) 추가
$('.test').append('<option value="last">last</option>');
// select 처음에 해당 ( '<option value="first">first</option>' ) 추가
$('.test').prepend('<option value="first">first</option>');
// 기존 select의 option대신 html 안에 내용으로 option 값을 새로 정의
$('.test').html('<option value="new">new</option>');
// 지정된 option값 replaceWith 안에 값으로 변경
$('.test option:eq(1)').replaceWith('<option value="bbb">option_change</option>');
$('.test option:eq(1)').remove(); // 지정된 option값 제거
$('.test option:first').remove(); // 처음 option값 제거
$('.test option:last').remove(); // 마지막 option값 제거
$('.test option').size(); // select option의 갯수
// 선택된 option 앞의 option 갯수
$('.test option:selected').prevAll().size();
// 선택된 option 뒤의 option 갯수
$('.test option:selected').nextAll().size();
// 첫번째 option 뒤에 해당 ( '<option value="aaa">aaa</option>' ) 추가
$('.test option:eq(0)').after('<option value="aaa">aaa</option>');
// 세번째 option 뒤에 해당 ( '<option value="aaa">aaa</option>' ) 추가
$('.test option:eq(2)').before('<option value="aaa">aaa</option>');
// 지정된 option selected 하기
$('.test option:eq(0)').attr('selected', 'selected');
-------------------------------------------------------------------------------------------------
<select id="test" class="test" MULTIPLE> // Multiple 속성시 Ctrl, Shift 로 다중 선택 가능함.
var selectedopts = "";
$("select option:selected").each(function(){
selectedopts += $(this).text() + ","; // 여러개 선택시 선택된 값을 TEXT 로 연결하여 표현
});
-------------------------------------------------------------------------------------------------
10. 폼버튼과 옵션에 스타일 적용
1. CSS 내 각각 다른 스타일을 만들어 준비
option{
background-color:red;
color:white;
}
.meal{
background-color:blue;
color:cyan;
}
2. 옵션 박스의 홀수번째 옵션에 .meal 클래스를 적용한다
$('option:odd').addClass('meal');
-------------------------------------------------------------------------------------------------
11. 체크박스 모두 체크 또는 체크 해제
<form>
<div class="infobox"><input type="checkbox" id="checkall">Check/Uncheck all Checkboxes</div>
<div class="infobox"><input type="checkbox" id="pizza" name="pizza">Pizza $5</div>
<div class="infobox"><input type="checkbox" id="hotdog" name="hotdog">Hotdog $2</div>
<div class="infobox"><input type="checkbox" id="coke" name="coke">Coke $1</div>
<div class="infobox"><input type="checkbox" id="fries" name="fries">French Fries $3</div>
</form>
-------------------------------------------------------------------------------------------------
$('#checkall').click(function(){
$("input[type='checkbox']").attr('checked', $('#checkall').is(':checked'));
});
$('form').find(':checkbox').click(function(){
var amt = 0;
$('div').filter(':gt(0)').find(':checkbox').each(function(){
if($('div:gt(0)')){
if($(this).is(':checked')){
amt = amt + parseInt($(this).val());
}
}
});
$('p').remove();
$('<p>').insertAfter('div:eq(4)'); // index 값이 4인 div Element (마지막 체크박스) 다음에 넣는다.
$('p').text('Your Bill is $' + amt);
});
gt >> 특정값 이후의 값을 찾는다. (great than : '~보다 큰' 의미 '>')
eq >> 원하는 결과를 찾는다. (양수 입력시 index 0 부터 시작, 음수 입력시 index 값이 1부터 시작)
-------------------------------------------------------------------------------------------------
$("input[type='checkbox']").attr('checked',$('#checkall').is(':checked'));
attr ( 속성, 값 )
- attr() 메소드는 선택한 엘리먼트의 속성을 정하는 데 사용
is ( 선택자 )
- is() 메소드는 선택한 엘리먼트와 선택자를 비교하여 일치하면 True를 반환, 그렇지않으면 False 반환
12. 두개필드 유효성 확인
# 두개의 필드가 있고, 해당 필드의 값이 모두 있어야 한다.
<div><span class="label">User ID *</span><input type="text" class="infobox" id="userid" name="userid"><span class="error">This Field Cannot be blank</span></div>
<div><span class="label">Password *</span><input type="password" class="infobox" id="password" name="password"><span class="error">This Field Cannot be blank</span></div>
-------------------------------------------------------------------------------------------------
$('.error').hide();
$('.infobox').each(function(){
$(this).blur(function(){ // 각 필드에 blur 이벤트(필드에 포커스 없어짐) 발생시
var data = $(this).val();
var len = data.length;
if(len < 1){
$(this).parent().find('.error').show();
}else{
$(this).parent().find('.error').hide();
}
});
});
-------------------------------------------------------------------------------------------------
# 서브밋 버튼 추가
$('.submit').click(function(event){
$('.infobox').each(function(){
$(this).blur(function(){ // 각 필드에 blur 이벤트(필드에 포커스 없어짐) 발생시
var data = $(this).val();
var len = data.length;
if(len < 1){
$(this).parent().find('.error').show();
}else{
$(this).parent().find('.error').hide();
}
});
});
evnent.preventDefault();
});
-------------------------------------------------------------------------------------------------
13. 비번필드, 비번확인 필드 비교
<div><span class="label">User ID</span><input type="text" class="userid" id="userid" name="userid"><span class="error">This Field Cannot be blank</span></div>
<div><span class="label">Password</span><input type="password" class="password" id="password" name="password"><span class="error">This Field Cannot be blank</span></div>
<div><span class="label">Confirm Password</span><input type="password" class="confpass" id="confpass" name="confpass"><span class="error">Password and Confirm Password don't Match</span></div>
<input class="submit" type="submit" value="Submit">
-------------------------------------------------------------------------------------------------
$('.submit').click(function(event){
var data = $('.password').val();
var len = data.length;
if(len < 1){
$('.password').next().show();
}else{
$('.password').next().hide();
}
if($('.password').val() != $('.confpass').val()){
$('.confpass').next().show();
}else{
$('.confpass').next().hide();
}
evnent.preventDefault();
});
-------------------------------------------------------------------------------------------------
next ( 선택자 )
- 이 메소드는 선택자 표현식을 이용해서 해당 형제 엘리먼트를 찾는데 사용 >> 지정하지 않아도 됨.
- 각 엘리먼트의 바로 다음 형제 엘리먼트 반환. >> nextAll() 은 다음의 모든 형제 엘리먼트 반환
14. 특정 필드 비활성화
-------------------------------------------------------------------------------------------------
$('.password').attr('disabled', true);
$('.confpass').attr('disabled', true);
$('.password').removeAttr('disabled');
$('.confpass').removeAttr('disabled', true);
-------------------------------------------------------------------------------------------------
15. 전체폼 유효성 확인
-------------------------------------------------------------------------------------------------
# 1 ~ 14 항목 조합.
-------------------------------------------------------------------------------------------------
16. 폼 데이터 직렬화
-------------------------------------------------------------------------------------------------
# Submit 버튼 클릭시 Form 내용 Serialize() 함수 이용
Input name >> UserID , Email Address
>> userid=John_123&emailaddress=john%40naver.com
# Check Box, Radio Button, Select Box 도 동일하게 표시됨 (공백 '+' 로 표시)
-------------------------------------------------------------------------------------------------
'# JQuery' 카테고리의 다른 글
| 이벤트 처리 2 (0) | 2015.08.23 |
|---|---|
| 이벤트 처리 1 (0) | 2015.08.23 |
| 배열 관련 (0) | 2015.08.20 |
| JQuery....... Start (0) | 2010.11.16 |
