글
입력 폼의 벨리데이션 (validation) 을 공통으로 구현한 예제이다.
로그인 창 또는 입력 폼을 만들때 벨리데이션은 필수이다.
각각 태그를 If문을 걸어서 벨리데이션을 만들 수도 있지만,
Jquery 를 이용해서 태그의 특성을 가지고 공통으로 만들수도이다.
- 이런 구조의 입력폼에서만 가능하다.
input 태그 등 입력받는 태그의 속성 중 title과 id가 필수로 정의되어있어야 한다.
|
<table>
<tr>
<td>
이름
</td>
<td>
<input type="text" id="name" title="이름" >
</td>
</tr>
<tr>
<td>
나이
</td>
<td>
<input type="text" id="age" title="나이" >
</td>
</tr>
</table>
|
cs |
Jquery는 필수이다.
사용 방법은 주석으로 대체한다.
objValueCheck.js
|
/**
사용법
- jquery 필수
- 체크할 input의 Id들을 입력
// 파일 확장자 체크
var fileCheckObjIds = "file1,file2,file3,file4";
if(!fileCheck(fileCheckObjIds, 7)){
return false;
}
// 필수 항목 별 또는 특정 표시 추가
var setStarObjIds = "input1,input2,input3";
$(function(){
zeroLengthCheckTitleSetStar(setStarObjIds);
});
// 필수 항목 체크 (공백으로 체크)
var zeroLengthCheckObjIds = "input1,input2,input3";
if(!zeroLengthCheck(zeroLengthCheckObjIds)){
return false;
}
// 숫자 체크
var numberCheckObjIds = "input1,input2,input3";
if(!numberCheck(numberCheckObjIds)){
return false;
}
*/
////////////////////////////////////////////////////////////////////////////
String.prototype.trim = function() {
return this.replace(/(^\s*)|(\s*$)/gi, "");
}
var imgExtensionArr = ["png","bmp","jpg","jpeg","gif"];
var excelExtensionArr = ["xlsx","xlsm","xlsb","xls"];
var pptExtensionArr = ["ppt","pptm","pptx"];
var wordExtensionArr = ["docx","docm","doc"];
var etcDocumentExtensionArr = ["pdf","txt","hwp"];
var allExtensionsArr = imgExtensionArr + excelExtensionArr + pptExtensionArr + wordExtensionArr + etcDocumentExtensionArr;
var documentExtensionArr = excelExtensionArr + pptExtensionArr + wordExtensionArr + etcDocumentExtensionArr;
/**
* fileCheck type info
* 1. img
* 2. excel
* 3. ppt
* 4. word
* 5. etc (pdf, txt, hwp)
* 6. all (1 + 2 + 3 + 4 + 5)
* 7. document (2 + 3 + 4 + 5)
* */
//fileImgCheck
function fileCheck(objIds, type){
var extensions;
if(type-0 >= 1 && type-0 <= 7){
extensions = setFileType(type);
}else{
return false;
}
var temp = false;
var obj;
var objId = objIds.split(',');
var extension;
var filesNullFlag = true;
for(var i=0; i<objId.length; i++){
obj = $("#"+objId[i]);
extension = obj.val().substring(obj.val().lastIndexOf('.')+1);
if(!extension==''){
filesNullFlag = false;
break;
}
}
if(filesNullFlag){
return true;
}
for(var i=0; i<objId.length; i++){
obj = $("#"+objId[i]);
extension = obj.val().substring(obj.val().lastIndexOf('.')+1);
if(!extension==''){
temp = false;
for(var e=0; e<extensions.length; e++){
if(extensions[e].toLowerCase() == extension){
temp = true;
break;
}
}
}else{
temp = true;
}
if(!temp){
break;
}
}
if(!temp){
alert(obj.attr('title') + " 항목은 '" + extension + "' 확장자를 등록할 수 없습니다.");
obj.val('');
obj.focus();
return false;
}
return true;
}
function setFileType(type){
var extensions;
switch(type){
case 1 : extensions = imgExtensionArr;
break;
case 2 : extensions = excelExtensionArr;
break;
case 3 : extensions = pptExtensionArr;
break;
case 4 : extensions = wordExtensionArr;
break;
case 5 : extensions = etcDocumentExtensionArr;
break;
case 6 : extensions = allExtensionsArr;
break;
case 7 : extensions = documentExtensionArr;
break;
default : extensions = allExtensionsArr;
break;
}
return extensions;
}
// zeroLengthCheckobjIds setting : ("*"+title)
function zeroLengthCheckTitleSetStar(objIds){
var objId = objIds.split(',');
for(var i=0; i<objId.length; i++){
obj = $("#"+objId[i]);
if(obj.parent().prev().text().substr(0,1)!="*"){
// obj.parent().prev().text("*"+obj.parent().prev().text());
// css에 맞게 변경
// <label for='uid'><em>필수</em>아이디</label>
obj.parent().prev().html("<label for='"+objId[i]+"'><em>필수</em>"+obj.parent().prev().text().replace("필수","") + "</label>");
}
}
}
//zeroLengthCheck
function zeroLengthCheck(objIds){
var temp = true;
var obj;
var objId = objIds.split(',');
for(var i=0; i<objId.length; i++){
obj = $("#"+objId[i]);
if(obj.val().trim() == '' || obj.val() == null){
alert(obj.attr('title') + " 항목을 입력해 주세요.");
obj.focus();
obj.val('');
temp = false;
break;
}
}
if(!temp){
return false;
}
return true;
}
// numberCheck
function numberCheck(objIds){
var temp = true;
var obj;
var objId = objIds.split(',');
for(var i=0; i<objId.length; i++){
obj = $("#"+objId[i]);
if(!obj.val().match(/^\d+$/ig) && obj.val()!=''){
alert(obj.attr('title') + " 항목은 숫자만 입력가능합니다.");
obj.val("");
obj.focus();
temp = false;
break;
}
}
if(!temp){
return false;
}
return true;
}
|
cs |
도움이 되셨다면 공감을 부탁드립니다. ^^
'language > javascript' 카테고리의 다른 글
| javascript / 화면 엑셀 다운로드 / table / 테이블 다운로드 / excel / iframe 다운로드 (0) | 2016.01.05 |
|---|---|
| javascript / 천단위 구분기호 / , / 1,000 / 콤마 (0) | 2016.01.05 |
| javascript / popup / 팝업 / 중복으로 열릴때 / 팝업 포커스 / 팝업 체크 / window.open (0) | 2016.01.05 |
| javascript / file size check / 파일 사이즈 / 파일 크기 / 검사 / 체크 (2) | 2016.01.05 |
| javascript / trim 구현 (0) | 2016.01.05 |
| javascript / 검색 또는 로그인 할 때 엔터키 enter 누르면 실행되게 하기 (0) | 2016.01.05 |
| javascript / xml parsing / 파싱 / 예제 (2) | 2016.01.05 |
| javascript / file extension(확장자) check / 필수항목 표시 / zerolength(공백) check / number(숫자) check / validator (0) | 2016.01.05 |
| javascript 프린트 함수 기본 예제 (0) | 2016.01.05 |
| javascript ArrayList 구현 (0) | 2016.01.05 |
| javascript Map 구현 (0) | 2016.01.05 |
댓글