JavaScript 기본 튜토리얼

JavaScript 객체

JavaScript 함수

JS HTML DOM

JS 브라우저 BOM

AJAX 기본 튜토리얼

JavaScript 참조 매뉴얼

JavaScript 객체 생성 JavaScript 성능

JavaScript 양식 검증

HTML 양식 검증은 JavaScript를 통해 완료할 수 있습니다.

HTML 양식은 일반적으로 사용자 정보를 수집하기 위해 사용됩니다. 예를 들어 이름, 이메일 주소, 위치, 연령 등입니다.

하지만 일부 사용자가 기대하는 데이터를 입력하지 않을 가능성이 매우 높습니다.

서버 자원에 불필요한 압박을 피하기 위해, 클라이언트(사용자 시스템)에서 JavaScript를 사용하여 양식 데이터를 검증할 수 있습니다.

입력을 웹 서버로 전송하기 전에, 웹 브라우저에서 실행됩니다.클라이언트 검증。

입력이 서버로 전송된 후,서버 측 검증웹 서버에서 실행됩니다。

예제

　　<div class="wrapper">
　　　　<h2>계정 생성</h2>
　　　　<label for="username"><b>이름</b></label>
　　　　<input type="text" placeholder="사용자 이름 입력" name="uname" id="username" required>
　　　　<label for="useremail"><b>Email</b></label>
　　　　<input type="email" placeholder="이메일 입력" name="uemail" id="useremail" required>
　　　　<label for="userpwd1><b>Password</b></label>
　　　　<input type="password" placeholder="비밀번호 입력" name="psw" id="userpwd1"　required>
　　　　<input type="password" placeholder="비밀번호 확인" name="cpsw" id="userpwd2"　required>
　　　　<p style="margin-top:　10px;">
　　　　　　　<input type="radio" name="gender" id="female" value="female" checked><label for="female">여</label>
　　　　　　　<input type="radio" name="gender" id="male" value="male"><label for="male">남</label>
　　　　</p>
　　　　<button type="submit">가입</button>
　　</div>
　　<div class="footer">
　　　　<div>이미 계정이 있는가? <a href="#">로그인</a></div>
　　</div>
</form>
<script>
function validateForm() {
　　let name = document.getElementById("username").value;
　　let email = document.getElementById("useremail").value;
　　let pswd1　= document.getElementById("userpwd1").value;
　　let pswd2　= document.getElementById("userpwd2").value;
　　
　　if(name == "") {
　　　　alert("Name must be filled out");
　　　　return false;
　　}
　　if(email == "") {
　　　　alert("이메일을 입력해야 합니다");
　　　　return false;
　　}
　　if(pswd1　!== "" || pswd2　!== "") {
　　　　if(pswd1　!== pswd2) {
　　　　　　alert("Password didn\39;t.match(");
　　　　　　return false;　　　　　　
　　　　}
　　}
　　　　alert("비밀번호를 입력해야 합니다");
　　　　return false;　　
　　}
　　return true;
}
</script>

테스트를 보세요 ‹/›

표준 검증 작업은 다음과 같습니다:

모든 필수 필드를 입력했는가요?
사용자가 유효한 데이터를 입력했는가요?

이 코드에서 입력 필드(사용자 이름)가 비어 있으면, 이 함수는 경고 메시지를 표시하고 false를 반환하여 폼 제출을 방지합니다:

JavaScript 예제:

　　function validateForm() {
　　let x = document.getElementById("uname").value;
　　if (x == "") {
　　　　alert("이름을 입력해야 합니다");
　　　　return false;
　　}
　　}

폼 제출 시 이 함수를 호출할 수 있습니다:

HTML 형식 예제:

예제

<form action="form-action.html" onsubmit="return validateForm()" method="POST">
　　<label for="uname">이름:</label>
　　<input type="text" name="username" id="uname">
　　<input type="submit" value="제출">
</form>

테스트해보세요‹/›

숫자 입력 검증

JavaScript는 일반적으로 숫자 입력을 검증하기 위해 사용됩니다.

입력하세요:1까지10사이의 숫자:

이메일 입력 검증

JavaScript는 일반적으로 이메일 주소를 검증하기 위해 사용됩니다.

유효한 이메일 주소를 입력하세요:

비밀번호 확인 검증

JavaScript는 일반적으로 비밀번호 확인을 일치시키기 위해 사용됩니다.

자동 HTML 형식 검증

HTML 형식 검증을 사용할 수 있습니다.필수자동으로 실행되는 속성:

예제

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

테스트해보세요‹/›

입력 타입 변경

JavaScript를 사용하여 <input type="password">과<input type="text"> 간의 전환을 할 수 있습니다.

비밀번호 필드에 값을 입력한 후 '비밀번호 표시' 버튼을 클릭하세요:

HTML 입력��증 속성

HTML5다음과 같은 새로운 HTML 속성이 도입되었습니다:

속성	설명
disabled	입력 요소를 비활성화해야 합니다
max	입력 요소의 최대 값을 지정합니다
min	입력 요소의 최소 값을 지정합니다
pattern	입력 요소의 값 패턴을 지정합니다
required	입력 필드에 요소가 필요합니다

CSS��정 가상 선택자

CSS3다음과 같은 새로운 CSS 가상 선택자가 도입되었습니다:

선택자	설명
:disabled	불사용 가능한 속성이 지정된 입력 요소를 선택했습니다
:invalid	유효하지 않은 값을 가진 입력 요소를 선택했습니다
:valid	유효 값을 가진 입력 요소를 선택했습니다
:optional	필수 속성이 지정되지 않은 입력 요소를 선택했습니다
:required	필수 속성이 지정된 입력 요소를 선택했습니다

주의:클라이언트��증은 서버측��증을 대체할 수 없습니다. 사용자가 양식 데이터를 검증한 경우에도, 사용자가 자바스크립트를 브라우저에서 비활성화할 수 있으므로 언제나 서버측에서 양식 데이터를 검증해야 합니다.

JavaScript 객체 생성 JavaScript 성능