[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