HTML 表單驗證-html教學-PHP中文網

HTML 表單驗證

WBOY

發布： 2024-09-04 16:44:32

原創

1284 人瀏覽過

HTML 表單驗證是檢查 HTML 表單頁面內容以避免錯誤資料傳送到伺服器的過程。此過程是開發基於 HTML 的 Web 應用程式的重要一步，因為它可以輕鬆提高網頁或 Web 應用程式的品質。有兩種方法可以執行 HTML 表單驗證，即使用 HTML5 內建功能和使用 JavaScript。

HTML 表單驗證

主要有兩種方法可以執行 HTML 表單驗證，

使用 HTML5 內建功能
使用 JavaScript

1.使用 HTML5 內建功能

HTML5 無需使用 JavaScript 即可提供表單驗證的功能。表單元素將新增驗證屬性，這將自動為我們啟用表單驗證。驗證屬性允許我們在表單元素上指定各種規則。它們允許我們設定資料的長度、設定資料值的限制等。

讓我們來看一個使用內建表單驗證元素進行 HTML 表單驗證的簡單範例，然後進一步使用 JavaScript 進行 HTML 表單驗證。

範例

使用 HTML5 驗證屬性的表單驗證 – 在本範例中，我們將使用 required 表單驗證標籤，這將導致強制輸入該欄位中的資料；否則，表格將不會提交。下面是相同的程式碼片段，以及 Web 表單的一些樣式。

<!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>

登入後複製

因此，我們有一個非常簡單的 Web 表單，只有一個輸入資料欄位作為「名稱」。請注意，我們在輸入標籤元素中使用了必要的關鍵字。

輸出:

HTML 表單驗證

讓我們嘗試在名稱欄位中不輸入任何值的情況下提交表單。提交後，您將收到“請填寫此欄位”的錯誤訊息，並且表格將不會提交。

空白資料的輸出：

HTML 表單驗證

所以可以看出錯誤訊息不是我們加的，而是HTML本身提供的。

與 HTML 提供的 required 屬性一樣，有各種表單標籤可供使用。以下是一些表單驗證標籤的列表，

minlength：用來設定元素所需的最小長度
maxlength: 用來設定元素所需的最大長度
模式： 用來定義正規表示式

2.使用 JavaScript

JavaScript 廣泛用於 HTML 表單驗證，因為它提供了更多自訂和設定驗證規則的方法；此外，舊版本的 Internet Explorer 不支援 HTML5 中提供的某些標記。 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」中刪除了所需的標籤。相反，我們在表單元素中加入了一個 onsubmit 標籤。如前所述，我們將編寫一個用於驗證的函數，其中 <script>標籤已新增。 </script>

我們寫了一個名為 validateForm() 的函式來執行驗證。我們正在實作相同的規則來檢查名稱欄位中輸入的資料是否為空。檢查這一點的邏輯是單擊提交按鈕後，將呼叫此函數，並檢查輸入的值是否為空或空白。如果資料不為空或空，函數將傳回 true，但如果資料為空或空，則會向使用者顯示錯誤訊息。

輸出：

HTML 表單驗證