|
|
폼 유효성 검사 스크립트(jQuery에 종속됨)
function FormCheck(){ /* -필독 해당 클래스는 jQuery를 사용함으로 이 클래스보다 위에 jQuery를 먼저 include하여야함. -지원하는 속성 required : 필수입력 필드를 나타냄 minlength="0~9" : 문자의 최소입력 수치를 나타냄 email : 입력내용이 e메일 형태인지 체크 numeric : 입력내용이 숫자인지 확인 alpha : 입력내용이 영문인지 확인 alphanumeric : 입력내용이 영문또는 숫자인지 확인 idcheck : 특수문자가 들어갔는지 체크(ID입력용) -사용법 먼저 이 클래스를 이용하여 객체선언 하고 체크할 INPUT의 ID값을 checkInput() 메소드를 호출하여 검사함 checkInput() 메소드는 해당 INPUT의 에 설정한 속성을 체크하여 해당 속성의 유효성과 맞지 않을시에 리턴값으로 true를 반환 한다. -사용예제 var objTest = new FormCheck(); if(objTest.checkInput("INPUT_ID")){ return; } */ var input_el = null; //INPUT 엘리먼트를 저장할 변수 var itemname = null; //INPUT 엘리먼트의 이름을 저장할 변수 //INPUT의 ID값을 받아 유효성검사를 한다. this.checkInput = function(input_id){ //INPUT 엘리먼트를 저장 this.input_el = $("#" + input_id); //INPUT 엘리먼트의 이름을 저장 if($(this.input_el).attr("itemname") != "" && $(this.input_el).attr("itemname") != null){ this.itemname = $(this.input_el).attr("itemname"); }else{ this.itemname = $(this.input_el).attr("id"); } //유효성 검사를 위해 함수 호출 if(this.hasAttr("required")){ if(!this.isRequired()){ return true; } } if(this.hasAttr("minlength")){ if(!this.checkMinlength()){ return true; } } if(this.hasAttr("email")){ if(!this.isEmail()){ return true; } } if(this.hasAttr("numeric")){ if(!this.isNumeric()){ return true; } } if(this.hasAttr("alpha")){ if(!this.isAlpha()){ return true; } } if(this.hasAttr("alphanumeric")){ if(!this.isAlphaNumeric()){ return true; } } if(this.hasAttr("idcheck")){ if(!this.checkId()){ return true; } } } //해당 속성을 가지고 있는 확인 this.hasAttr = function(attrName){ if($(this.input_el).attr(attrName) != null){ return true; }else{ return false; } } //INPUT의 값을 TRIM함 this.doTrim = function(){ var text = $(this.input_el).val(); var pattern = /(^s*)|(s*$)/g; // s 공백 문자 text = text.replace(pattern,""); return text; } //INPUT의 값을 리턴함 this.getText = function(){ var text = $(this.input_el).val(); return text; } //INPUT이 필수입력인지 확인 this.isRequired = function(){ if(this.doTrim() == ""){ alert(this.itemname + "는(은) 필수 입력입니다."); $(this.input_el).focus(); return false; }else{ return true; } } //INPUT의 최소입력 값을 확인 this.checkMinlength = function(){ var minlength = $(this.input_el).attr("minlength"); var length = this.getText().length; if(minlength == ""){minlength = 0;} if(length < minlength){ alert(this.itemname + "는(은) " + minlength + "자 이상 입력하셔야 합니다."); $(this.input_el).focus(); return false; }else{ return true; } } //INPUT의 입력형식이 이메일인지 확인 this.isEmail = function(){ var pattern = /([0-9a-zA-Z_-]+)@([0-9a-zA-Z_-]+).([0-9a-zA-Z_-]+)/; var text = this.getText(); if(!pattern.test(text)){ alert(this.itemname + "은(는) E-메일주소 형식이 아닙니다."); $(this.input_el).focus(); return false; }else{ return true; } } //INPUT의 입력형식이 숫자인지 확인 this.isNumeric = function(){ var text = this.getText(); var length = text.length; var flag = true; for(i=0;i < length;i++){ if(text.charAt(i) < "0" || text.charAt(i) > "9"){ flag = false; } } if(!flag){ alert(this.itemname + "은(는) 숫자만 입력하실수 있습니다."); $(this.input_el).focus(); return false; }else{ return true; } } //INPUT의 입력형식이 영문인지 확인 this.isAlpha = function(){ var text = this.getText(); var pattern = /(^[a-zA-Z]+$)/; if(!pattern.test(text)){ alert(this.itemname + "은(는) 영문만 입력하실수 있습니다."); $(this.input_el).focus(); return false; }else{ return true; } } //INPUT의 입력형식이 영문/숫자 인지 확인 this.isAlphaNumeric = function(){ var text = this.getText(); var pattern = /(^[a-zA-Z0-9]+$)/; if(!pattern.test(text)){ alert(this.itemname + "은(는) 영문 또는 숫자만 입력하실수 있습니다."); $(this.input_el).focus(); return false; }else{ return true; } } //INPUT의 입력형식이 ID인지 확인 this.checkId = function(){ var text = this.getText(); var pattern = /(^[a-zA-Z0-9_]+$)/; if(!pattern.test(text)){ alert(this.itemname + "은(는) 영문, 숫자, 언더하이픈 기호(_)만 입력하실수 있습니다."); $(this.input_el).focus(); return false; }else{ return true; } } } [출처] 폼 유효성 검사 스크립트(jQuery에 종속됨)|작성자 일루문 |
| 
|
