SCRIPT Input(인풋) 입력창 null값인지 입력 체크
페이지 정보
조회 983회 작성일 22-04-08 11:47
본문
입력값 체크
Input(인풋) null 체크
이 소스는 입력창에 내용이 입력되었는지 안 되었는지를 확인하는 방법에 이용할 수 있는 소스다.
예를 들어, 검색창에 검색어를 입력한 상태인지, 회원 가입 때 필요한 항목을 입력한 상태인지, 게시판에서 필요한 내용이 비어 있는 것은 아닌지에 사용할 수 있다.
Input(인풋) 입력창 null값인지 입력 체크
기본 if문 구조
가장 기본적은 구조는 이렇다.
[code]
if( !입력창네임 ){
var 변수 = '내용';
}
[/code]
여기에서 "입력창네임"이 무엇을 의미하는지는 아래에서 설명하겠다.
구조를 보자면, "!입력창네임"이 핵심이다. !는 영어에서 not(부정)을 의미한다. 즉, "!입력창네임"의 뜻은 "특정입력창이 비었다면"이라는 뜻이 되겠다.
그러므로, 입력창이 비었다면 "var 변수" 부분에 필요한 내용을 넣으라는 것이다.
만약, 경고창을 띄우고 싶다면 이 부분을 지우고 alert('필수 입력창'); 같은 것을 넣으면 된다.
입력창네임에 대한 주의사항
먼저, 이것을 이용하기 위해서는 입력창의 이름을 알아야 한다.
예를 들어, 아래처럼 된 검색창이라면 name이라고 적힌 부분을 꼭 알아야 한다.
[code]
<form name="fsearchbox" method="get" action="./search.php" onsubmit="return fsearchbox_submit(this);">
<input type="text" name="stx" id="sch_stx" maxlength="20" placeholder="검색어를 입력하세요.">
</form>
[/code]
위에서 name은 2개가 있다. 그것은 name="fsearchbox"와 name="stx"다.
문제는 어떤 창(input창)이 비었는지를 지정해야 하므로 이것을 사용한다.
"fsearchbox 안에 있는 stx의 값"을 코드 소스에서는 "fsearchbox.stx.value"라고 쓴다.
그러므로 위의 기본 구조에서 사용한 "!입력창네임"에 !fsearchbox.stx.value을 넣어야 한다.
맨 앞에 느낌표가 있으므로 "fsearchbox 안에 있는 stx의 값이 비었다면"이라는 뜻이 된다.
input(인풋) 입력창이 비었는지(null값인지) 체크 소스
위에서 설명한 두 가지를 가지고 예제를 보이자면 이렇다. [저작권법 표시] 원본 출처 : 키스세븐(www.kiss7.kr)
[code]
if( !fsearchbox.stx.value ){ // 검색창의 입력창의 값이 없다면
var val = '검색창이 비었습니다'; // 필요한 변수를 만들 수 있다.
alert(val); // 경고창도 띄울 수 있다.
}
[/code]
이것은 방문자가 필요한 입력을 하지 않았을 때, 자동으로 다른 내용을 넣어버리는 데에 사용할 수도 있다.