• 회원가입
  • 로그인
  • 구글아이디로 로그인

[Form] JS - Forms - 폼양식 유효성 제어

목차
  1. JS Form 유효성
  2. JS 숫자 입력 유효성
  3. 자동 HTML Form 유효성
  4. 데이터 유효성 체크 단계
  5. HTML 제약조건 유효성
  6. 제약 유효성 HTML input 속성
  7. 제약 유효성 CSS 가상 선택자
  8. this / this.form 키워드 차이

 

JS Form 유효성

 

HTML Form 유효성은 JS로 가능.

 


[예제]

Form 필드 (fname)이 빈 상태로 전송 시도 시, 

메세지를 띄운 후 폼 전송 막기 위해 false 반환.

 

<script>

function validateForm() {

  var x = document.forms["hz"]["name"].value;

  if (x == "") {

    alert("이름 입력 필수");

    return false;

  }

}

</script>


<form name="hz" action="/action.php" onsubmit="return validateForm()" method="post">

  이름: <input type="text" name="name">

  <input type="submit" value="확인">

</form>

 

 

JS 숫자 입력 유효성

 

숫자 메서드, 숫자 함수, 비교/논리 연산자 등을 이용.

 


[예제] 

1 이상 10 이하 숫자만 입력 허용.


<input id="num">


<button type="button" onclick="checkNum()">확인</button>


<p id="demo"></p>


<script>

function checkNum() {

  var x, text;

  x = document.getElementById("num").value;


  if (isNaN(x) || x < 1 || x > 10) {

    text = "유효 X";

  } else {

    text = "유효 O";

  }

  document.getElementById("demo").innerHTML = text;

}

</script>

 

결과보기

 

자동 HTML Form 유효성

 

Form 태그 안의 input 요소에 requied 속성 추가 시,

브라우저가 해당 요소 필수 입력 여부를 자동 체크함.

※ 주의: IE9 이하 지원 X. 

 


[예제]

이름 입력 없이 확인 누르면 브라우저가 입력하라는 메세지 띄움.

 

<form action="/action.php" method="post">

  <input type="text" name="name" required>

  <input type="submit" value="확인">

</form>

 

결과보기

 

데이터 유효성 체크 단계

 

1.

사용자 입력값이 올바른지 체크.

(예)

1. 값 입력 여부.

2. 값이 원하는 자료형인지 여부.

3. 날짜 기간, 슷지 범위 등 체크. 

 

2.

① 브라우저에서 검사 : JS 등 언어로 입력과 동시에 체크.

② 서버에서 검사 : PHP 등 서버측 언어로 전송받아 체크.

 

 

HTML 제약조건 유효성

 

HTML5에서 새로 도입.

 


제약 유효성 HTML input 속성

 

준비 중

 

 

제약 유효성 CSS 가상 선택자

 

준비 중

 

 

this / this.form 키워드 차이

[this.form 키워드]

※ this.form : 해당 요소가 속한 부모 form 요소 

 

<form>

<div>

  <label><input type="radio" name="active" value="1" onclick="hzOn(this.form)">활성</label>

  <label><input type="radio" name="active" value="0" onclick="hzOff(this.form)" checked>비활성</label>

</div>

<input type="text" name="textbox" disabled>

</form>


<script>

function hzOn(f) {

   f.textbox.disabled=false;

}

function hzOff(f) {

   f.textbox.disabled=true;

}  

</script>

 

결과보기


[this 키워드]

※ this : 해당 요소 

 

<form>

<div>

  <label><input type="radio" name="active" value="1" onclick="hzOn(this)">활성</label>

  <label><input type="radio" name="active" value="0" onclick="hzOff(this)" checked>비활성</label>

</div>

<input type="text" name="textbox" disabled>

</form>


<script>

function hzOn(f) {

   f.form.textbox.disabled=false;

}

function hzOff(f) {

   f.form.textbox.disabled=true;

 

</script>

 

결과보기


PS. 주의

 

함수명을 hzOn(), hzOff() 대신, active(), inactive() 사용했더니 작동 X

(즉, 기존 정의된 함수명과 충돌날 수 있으니, 함수명 지을 때 주의 요망.)

  

PS. this 키워드 : https://homzzang.com/b/js-1905

관련글: DogFoot개발 님 (220130) https://sir.kr/qa/447490

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
Basic JS - Home (JS입문) + Javascript Framework (프레임워크) 종류
Basic JS - Intro (JS소개)
Basic JS - Where To (JS위치) - JS구문 / JS코드위치 / JS사용법 ※ JS외부링크 주의사항
Basic JS - Output (JS출력= JS쓰기) ★★★★★
Basic JS - Syntax (JS구문) ★
Basic JS - Statement (JS구문= JS명령문)
Basic JS - Comment (JS주석)
Basic JS - Variable (JS변수) ★★★★★
Basic JS - Operator (연산자) - JS연산자 ★★★★★
Basic JS - Data Type - 데이터유형 ★★★★★ (= 데이터형식 = 데이터타입 = 데이터종류 = 자료형…
Basic JS - Function - JS함수 ★★★★★ ※ 일반함수 특징 2
Basic JS - Object - JS객체 ★★★★★
Basic JS - Scope - JS유효범위 (= JS접근범위 = 변수 종류) ★★★★★★★★★★
Basic JS - Event - JS이벤트 (= JS코드실행방법) ★★★★★
Basic JS - Strings - JS문자열
Basic JS - String Methods - JS문자열메서드
Basic JS - Number - JS숫자
Basic JS - Number Method - JS숫자메서드
Basic JS - Math 객체 - JS수학객체 (= JS산수객체 = Math객체 = Math Object = 매스 …
Basic JS - Dates - JS날짜
1/67
목록
찾아주셔서 감사합니다. Since 2012