HTML 양식 유효성 검사
- WBOY원래의
- 2024-09-04 16:44:321314검색
HTML 양식 유효성 검사는 오류가 발생한 데이터가 서버로 전송되는 것을 방지하기 위해 HTML 양식 페이지의 내용을 검사하는 프로세스입니다. 이 프로세스는 웹 페이지 또는 웹 애플리케이션의 품질을 쉽게 향상시킬 수 있으므로 HTML 기반 웹 애플리케이션을 개발하는 데 중요한 단계입니다. HTML 양식 유효성 검사를 수행하는 방법에는 HTML5 내장 기능을 사용하는 방법과 JavaScript를 사용하는 두 가지 방법이 있습니다.
HTML 양식 유효성 검사
HTML 양식 유효성 검사를 수행하는 방법에는 주로 두 가지가 있습니다.
- HTML5 내장 기능 사용
- 자바스크립트 사용
1. HTML5 내장 기능 사용
HTML5는 JavaScript를 사용하지 않고 양식 유효성 검사 기능을 제공합니다. 양식 요소에는 유효성 검사 속성이 추가되어 자동으로 양식 유효성 검사를 활성화합니다. 유효성 검사 속성을 사용하면 양식 요소에 다양한 종류의 규칙을 지정할 수 있습니다. 이를 통해 데이터 길이 설정, 데이터 값 제한 등을 설정할 수 있습니다.
내장된 양식 확인 요소를 사용하여 HTML 양식 확인의 간단한 예를 살펴보고 JavaScript를 사용하여 HTML 양식 확인을 계속 진행하겠습니다.
예
HTML5 유효성 검사 속성을 사용한 양식 유효성 검사 – 이 예에서는 필수 양식 유효성 검사 태그를 사용하여 해당 필드의 데이터를 필수로 입력하게 됩니다. 그렇지 않으면 양식이 제출되지 않습니다. 다음은 웹 양식의 일부 스타일과 함께 동일한 코드 조각입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.formData {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
background-color: darkcyan;
}
form {
font-size: 30px;
}
form input {
margin-left: 10px;
font-size: 15px;
}
</style>
</head>
<body>
<div class = "formData" >
<form action = "#" >
Name: <input type = "text" name = "name" required>
<input type = "submit" >
</form>
</div>
</body>
</html>
따라서 "이름"이라는 입력 데이터 필드가 하나만 있는 매우 간단한 웹 양식이 있습니다. 입력 태그 요소에 필수 키워드를 사용하였으니 참고해주세요.
출력:
이름 필드에 아무 값도 입력하지 않고 양식을 제출해 보겠습니다. 제출 시 '이 항목을 작성해 주세요'라는 오류 메시지가 표시되며 양식이 제출되지 않습니다.
빈 데이터로 출력:
그래서 오류 메시지는 당사에서 추가한 것이 아니고 HTML 자체에서 제공하는 것임을 알 수 있습니다.
HTML에서 제공하는 필수 속성처럼 다양한 form 태그를 사용할 수 있습니다. 다음은 일부 양식 유효성 검사 태그 목록입니다.
- minlength: 요소의 필수 최소 길이를 설정하는 데 사용됩니다
- maxlength: 요소의 필수 최대 길이를 설정하는 데 사용됩니다
- 패턴: 정규식을 정의하는 데 사용됩니다
2. 자바스크립트 사용
JavaScript는 유효성 검사 규칙을 사용자 정의하고 설정하는 더 많은 방법을 제공하므로 HTML 양식 유효성 검사에 널리 사용됩니다. 또한 HTML5에서 제공되는 일부 태그는 이전 버전의 Internet Explorer에서 지원되지 않습니다. JavaScript는 양식 유효성 검사를 위해 오랫동안 사용되고 있습니다.
JavaScript 양식 유효성 검사에서는 기본적으로 데이터를 서버에 제출하기 전에 유효성을 검사하는 함수를 정의합니다. 유효성 검사 규칙을 달성하는 데 필요한 모든 논리를 구현할 수 있습니다. 규칙 정의에 제한이 없기 때문에 JavaScript는 이러한 방식으로 더 유연합니다. 하지만 내장 태그를 사용하는 양식 유효성 검사에 비해 이를 구현하려면 JavaScript를 알아야 합니다.
JavaScript를 사용한 양식 유효성 검사의 예를 살펴보겠습니다. 이름 요소로 하나의 입력만 사용하여 동일한 양식 예제를 구현하겠습니다.
예
<!DOCTYPE html>
<html>
<head>
<style>
.formData {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
background-color: darkcyan;
position: absolute;
width: 100%;
}
form {
font-size: 30px;
}
form input {
margin-left: 10px;
font-size: 15px;
}
.errorMessage {
background-color: white;
width: 143px;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
margin-left: 107px;
visibility: hidden;
border-radius: 10px;
position: relative;
float: left;
}
.errorMessage.top-arrow:after {
content: " ";
position: absolute;
right: 90px;
top: -15px;
border-top: none;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 15px solid white;
}
</style>
</head>
<body>
<div class = "formData" >
<form name = "simpleForm" action = "#" onsubmit = "return validateForm()" >
Name: <input type = "text" name = "name">
<input type = "submit" >
</form>
<p class = "errorMessage top-arrow" > </p>
</div>
<script>
function validateForm() {
var nameVal = document.forms["simpleForm"]["name"].value;
if(nameVal == null || nameVal == "") {
document.getElementsByClassName( "errorMessage" )[0].style.visibility = "visible";
document.getElementsByClassName( "errorMessage" )[0].innerHTML = "Please Fill out this field";
return false;
} else {
return true;
}
}
</script>
</body>
</html>
이전 예에서는 양식 요소 'name'에서 필수 태그를 제거했습니다. 대신 양식 요소에 제출 시 태그 하나를 추가했습니다. 앞서 언급했듯이