목차
- JS Form 유효성
- JS 숫자 입력 유효성
- 자동 HTML Form 유효성
- 데이터 유효성 체크 단계
- HTML 제약조건 유효성
- 제약 유효성 HTML input 속성
- 제약 유효성 CSS 가상 선택자
- 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
