資料結構
網路
關係資料庫管理系統(RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何在HTML中指定提交表單時不進行驗證？
<form> 元素是HTML中一個重要的元件，它允許我們在網站上建立互動式部分，例如聯絡表單、登入表單等。透過表單元素，使用者可以輸入資料並將其提交到Web伺服器。<form> 元素非常靈活，可以包含許多不同的輸入欄位，例如文字框、單選按鈕、複選框、下拉選單和按鈕。此外，<form> 元素包含多個屬性，例如“action”和“method”，用於確定提交資料的目的地和處理方法。
表單驗證是<form> 元素的關鍵部分之一，用於檢查使用者輸入表單的資料是否符合必要的條件。驗證允許我們檢查提交的資料是否準確、完整且格式正確。表單資料的驗證可以透過兩種主要方法完成——客戶端驗證和伺服器端驗證。
在本文中，我們將學習如何在HTML中指定提交表單時不進行驗證。我們將討論在HTML中執行此任務的三種不同方法。
指定表單不進行驗證的不同方法
有三種不同的方法可以檢查表單是否有效。讓我們詳細逐一討論這些方法。
方法一：使用“novalidate”表單屬性
第一種方法是在表單標籤中使用“novalidate”屬性。此屬性停用瀏覽器預設的驗證行為，這意味著提交表單時不會進行驗證。
語法
<form action="/data-submitted" method="post" novalidate> <!-- your other input fields go here --> </form>
在上面的程式碼中，我們在表單標籤中添加了“novalidate”屬性。這告訴瀏覽器在提交表單時不要進行驗證。請注意，此方法僅停用瀏覽器的預設驗證行為。如果您有自定義驗證邏輯，它仍然會執行。
示例
在此示例中，我們有一個包含<form> 元素的novalidate屬性的HTML檔案。此屬性告訴瀏覽器停用整個表單的驗證。當用戶點選提交按鈕時，表單將在沒有任何驗證的情況下提交。
<html>
<head>
<title>Using novalidate attribute</title>
</head>
<body>
<form method="post" action="data-submit.php" novalidate>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required></br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br>
<button type="post">Add</button>
</form>
</body>
</html>
方法二：使用“formnovalidate”表單屬性
第二種方法是在提交按鈕中使用“formnovalidate”屬性。此屬性告訴瀏覽器不要在點選按鈕時驗證表單。
formnovalidate屬性會覆蓋<form> 元素的novalidate屬性，並且此formnovalidate屬性可與<button> 元素中提供的type="submit"一起使用。
語法
<form action="/data-submitted" method="post" novalidate> <!-- your other input fields go here → <button type="add" formnovalidate>Add</button> </form>
在上面的示例中，我們在提交按鈕中添加了“formnovalidate”屬性。這告訴瀏覽器不要在點選按鈕時驗證表單。請注意，此方法僅停用瀏覽器的預設驗證行為。如果您有自定義驗證邏輯，它仍然會執行。
示例
在此示例中，我們有一個包含兩個提交按鈕的HTML表單。第一個提交按鈕包含formnovalidate屬性，該屬性告訴瀏覽器在不執行驗證的情況下提交表單。第二個提交按鈕不包含此屬性，並將觸發瀏覽器的預設驗證行為。
<html>
<head>
<title>Using formnovalidate attribute</title>
</head>
<body>
<form method="post" action="data-submit.php">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required><br/>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br/>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required> <br/>
<button type="post" formnovalidate>Add</button>
</form>
</body>
</html>
方法三：使用自定義JavaScript阻止表單驗證
第三種方法是使用JavaScript在提交表單時阻止預設的表單驗證行為。這種方法可以更好地控制驗證行為，並允許我們自定義驗證邏輯。
語法
<form action="/data-submitted" method="post" novalidate>
<!-- your other input fields go here →
<button type="add" formnovalidate>Add</button>
</form>
<script>
const formValidate = document.getElementById(data-form');
formValidate.addEventListener(add, function(event) {
event.preventDefault();
//other data goes here
});
</script>
在上面的程式碼中，我們使用JavaScript向表單提交事件添加了一個事件監聽器。此事件監聽器在提交表單時阻止表單的預設行為。然後，您可以新增自定義驗證邏輯並以程式設計方式提交表單資料。
示例
在此示例中，我們有一個表單，其中包含一個名為validateDataForm()的JavaScript函式，該函式檢索使用者輸入的值並檢查它們是否滿足所需的條件。如果任何驗證測試失敗，則使用alert()函式顯示錯誤訊息，並且該函式返回false，阻止表單提交。如果所有驗證測試都透過，則該函式返回true，允許表單提交。
<html>
<head>
<title>Using formnovalidate attribute</title>
</head>
<body>
<script>
function validateDataForm() {
const usernameValidate = document.getElementById("username");
const emailValidate = document.getElementById("email");
const passwordValidate = document.getElementById("password");
const emailValidateRegex = /^\S+@\S+\.\S+$/;
if (usernameValidate.value === "") {
alert("Enter a valid username");
return false;
}
if (!emailValidateRegex.test(emailValidate.value)) {
alert("Enter a valid email");
return false;
}
if (passwordValidate.value.length < 10) {
alert("Password must be at least 10 characters long.");
return false;
}
return true;
}
</script>
<form method="post" action="data-submit.php">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required><br />
<label for="email">Email:</label>
<input type="email" id="email" name="email" required> <br /> <label for="password">Password:</label>
<input type="password" id="password" name="password" required> <br />
<button type="post" onclick="return validateDataForm()">Add</button>
</form>
</body>
</html>
結論
在本文中，我們討論瞭如何在HTML中指定提交表單時不進行驗證，並且我們已經看到了指定提交表單時不進行驗證的不同方法。我們討論了包括“novalidate”屬性、“formnovalidate”屬性以及使用JavaScript阻止預設表單驗證行為的方法。
577 次瀏覽
