logo image
메인
기술
HOME
기술

폼체크용 JS 함수

목록
#javascript
//=== 폼체크용 (라디오는 하나는 필수체크, 그외에는 값이 있는지만 체크)
function checkFillForm(f,passNames){
var els = f.elements;
if(!passNames){ 
var skipFn = function(){return false;}
}else if(passNames instanceof Function){ //이름 체크가 함수일 경우
var skipFn= function(fn){
return function(){
return fn(el);
}
}(passNames)
}else if(passNames instanceof String){ //이름 체크가 숨표로 구분된 문자열일 경우
var skipFn = function(str){
return function(el){
var name = el.name;
if(str.indexOf(name) != -1){
return true;
}
return false;
}
}(passNames)
}

for(var i=0,m=els.length;i<m;i++){
var el = els[i];
if(el.name==''){continue;}
if(el.disabled){continue;}

if(el.value==undefined){//value 프로퍼티가 없는건 무시한다.(IE에서는 FIELDSET도 체크가 되네... 제길)
continue; // 스킵한다.
}

if(skipFn(el)){
continue; // 스킵한다.
}

if(el.type == 'radio'){
var elns = f[el.name]; //네임으로 콜렉션가져오기
var checked = false;
var t = null
if(elns.length || elns instanceof NodeList || elns instanceof Array){ //콜렉션이다.
t = elns[0];
for(var i2=0,m2=elns.length;i2<m2;i2++){
if(elns[i2].checked){ 
checked = true; break;
}
}
}else{ //단일 라디오
checked = elns.checked
t = elns;
}
if(!checked){
alert('선택 안 된 값이 있습니다.');
t.focus();
return false;
}
}else if(el.type == 'checkbox'){ //체크박스는 체크 안한다. 따로 처리하도록 해라
}else if(el.type == 'hidden'){ //히든값은 빈 값을 가질 수도 있다.
}else{
if(el.value.length==0){
alert('입력 안 된 값이 있습니다.');
el.focus();
return false;
}
}
}
return true;
}
//== 체크함수 예제
var skipFn = function(el){ //여기 한곳에서 관리한다.
var name = el.name
if(name.indexOf("SCH_INFO")!== -1){ //학교정보들을 체크 안한다.
return true;
}
var cl = el.className;
if(cl.indexOf("address2")!== -1){ // 도로명주소 2번째 텍스트 박스를 체크 안한다.
return true;
}

return false;
}
//== 사용법 예제
function checkFormAppc(f){
if(f.mode.value=='nextsave'){
return checkFillForm(f,skipFn); //빈값이 있으면 경고후 그 인풋엘레멘트로 포커스 이동시킨다.
}else{
return true;
}
}
  • 기본적으로 폼의 모든 값을 체크
  • disabled, name이 없는 엘레멘트 등은 무시
  • 값이 없으면 경고를 한 뒤 해당 부분으로 포커스 이동
  • passNames 을 기준으로 스킵할 name을 지정함
    • 문자열이면 문자열내에서 비교
    • 함수면 name을 아규멘트로 넘겨서 true,false로 비교함
목록
댓글
  • / /
  • No Nickname
    No Comment
  • 권한이 없습니다.
    {{m_row.m_nick}}
    -
목록형 📷 갤러리형
제목
[기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js)
유용한 리눅스(LINUX) 명령어
[공지] 기술 게시판
일
월
화
수
목
금
토
3.31
4.1
4.2
4.3
4.4
4.5
4.6
4.7
4.8
4.9
game_tictactoe
4.10
4.11
4.12
4.13
4.14
4.15
4.16
4.17
:scope selector , querySelector 에서 this, self node 지정
4.18
4.19
4.20
4.21
4.22
4.23
ui_treemap
4.24
4.25
4.26
4.27
4.28
4.29
4.30
5.1
5.2
5.3
5.4
tag