資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 TypeScript 中操作表單元素？
表單是 Web 開發的重要組成部分，允許使用者輸入和提交資料。TypeScript 憑藉其靜態型別和增強的工具，為構建表單驅動型應用程式提供了強大的環境。在本教程中，我們將探討在 TypeScript 中操作表單元素的各種場景。我們將涵蓋表單提交、輸入驗證、事件處理和訪問表單值。
建立基本表單
首先，讓我們建立一個基本的 HTML 表單，並使用 TypeScript 對其進行增強。我們將捕獲使用者輸入並在提交時顯示它。
語法
在 HTML 中建立表單的語法：
<form> <!-- Form elements go here --> </form>
在 TypeScript 中處理表單提交的語法：
const form = document.querySelector('form') as HTMLFormElement;
form.addEventListener('submit', (event) => {
event.preventDefault();
// Handle form submission
});
示例 1
我們使用其 ID 選擇表單元素並新增提交事件偵聽器。我們在事件偵聽器中使用 event.preventDefault() 阻止預設的表單提交行為。我們透過使用其 ID 選擇它來訪問名稱輸入元素的值。最後，我們在控制檯中顯示使用者的姓名。
<form id="myForm"> <label for="name">Name:</label> <input type="text" id="name" /> <button type="submit">Submit</button> </form>
現在，讓我們在 TypeScript 中處理表單提交：
const form = document.querySelector('#myForm') as HTMLFormElement;
form.addEventListener('submit', (event) => {
event.preventDefault();
const nameInput = document.querySelector('#name') as HTMLInputElement;
const name = nameInput.value;
console.log(`Hello, ${name}!`);
});
輸出
示例 2
現在讓我們使用 FormData API 來訪問上一個表單中的資料。在本例中，我們使用 FormData API 方便地訪問表單資料。我們建立一個新的 FormData 物件，並將表單元素作為引數傳遞。我們使用 FormData 物件上的 get() 方法檢索名稱輸入的值。
const form = document.querySelector('#myForm') as HTMLFormElement;
form.addEventListener('submit', (event) => {
event.preventDefault();
const formData = new FormData(form);
const name = formData.get('name');
console.log(`Hello, ${name}!`);
});
輸出
表單輸入驗證
輸入驗證對於確保資料的正確性和完整性至關重要。讓我們探討如何使用 TypeScript 驗證表單輸入。
語法
const input = document.querySelector('#inputId') as HTMLInputElement;
input.addEventListener('input', () => {
// Validate input value
});
示例 1
我們選擇名稱輸入元素和錯誤容器元素。我們在名稱輸入元素上附加一個輸入事件偵聽器，該偵聽器在使用者鍵入或修改輸入時觸發。在事件偵聽器內部，我們檢索名稱輸入的值並檢查它是否少於 3 個字元。如果條件為真，我們使用錯誤訊息更新錯誤容器的文字內容。否則，如果輸入有效，我們清除錯誤訊息。
<form> <label for="name">Name:</label> <input type="text" id="name" /> <div id="nameError" class="error"></div> <button type="submit">Submit</button> </form>
以下是處理表單的 TypeScript 程式碼：
const nameInput = document.querySelector('#name') as HTMLInputElement;
const errorContainer = document.querySelector('#nameError') as HTMLDivElement;
nameInput.addEventListener('input', () => {
const name = nameInput.value;
if (name.length < 3) {
errorContainer.textContent = 'Name must be at least 3 characters long.';
} else {
errorContainer.textContent = '';
}
});
輸出
示例 2
在本例中，我們使用正則表示式 (emailRegex) 驗證電子郵件輸入。我們在電子郵件輸入元素上附加一個輸入事件偵聽器。我們在事件偵聽器內部檢索電子郵件輸入值並根據正則表示式對其進行測試。如果電子郵件格式不正確，我們將顯示錯誤訊息；否則，我們將清除錯誤。
<form> <label for="email">Email:</label> <input type="email" id="email" /> <div id="emailError" class="error"></div> <button type="submit">Submit</button> </form>
以下是處理表單的 TypeScript 程式碼：
const emailInput = document.querySelector('#email') as HTMLInputElement;
const errorContainer = document.querySelector('#emailError') as HTMLDivElement;
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
emailInput.addEventListener('input', () => {
const email = emailInput.value;
if (!emailRegex.test(email)) {
errorContainer.textContent = 'Please enter a valid email address.';
} else {
errorContainer.textContent = '';
}
});
輸出
處理表單事件
表單通常需要額外的事件處理，例如在按鈕點選時觸發操作或響應輸入更改。讓我們看看如何在 TypeScript 中處理這些事件。
語法
const button = document.querySelector('#buttonId') as HTMLButtonElement;
button.addEventListener('click', () => {
// Handle button click
});
示例 1
我們使用各自的 ID 選擇表單元素、使用者名稱輸入、密碼輸入和重置按鈕。我們在表單元素上附加一個提交事件偵聽器以處理表單提交。在事件偵聽器內部，我們使用 event.preventDefault() 阻止預設的表單提交行為。我們使用其 value 屬性檢索使用者名稱和密碼輸入的值。
在本例中，我們在控制檯中記錄提交的值。您可以執行其他操作，例如將表單資料傳送到伺服器或更新 UI。表單提交後，我們使用表單元素上的 reset() 方法重置表單欄位。此外，我們在重置按鈕上附加一個點選事件偵聽器，該偵聽器在點選按鈕時呼叫 reset() 方法以重置表單欄位。
<form> <label for="username">Username:</label> <input type="text" id="username" /> <br /> <label for="password">Password:</label> <input type="password" id="password" /> <br /> <button type="submit">Submit</button> <button type="button" id="resetButton">Reset</button> </form>
以下是處理上述表單的 TypeScript 程式碼
const form = document.querySelector('form') as HTMLFormElement;
const usernameInput = document.querySelector('#username') as HTMLInputElement;
const passwordInput = document.querySelector('#password') as HTMLInputElement;
const resetButton = document.querySelector('#resetButton') as HTMLButtonElement;
form.addEventListener('submit', (event) => {
event.preventDefault();
const username = usernameInput.value;
const password = passwordInput.value;
// Perform form submission or other actions
console.log(`Submitted: Username - ${username}, Password - ${password}`);
// Reset form fields
form.reset();
});
resetButton.addEventListener('click', () => {
form.reset();
});
輸出
示例 2
在本例中，我們處理複選框輸入上的 change 事件。在事件偵聽器內部，我們根據複選框是否選中來更新訊息元素的文字內容。
<form> <label for="checkbox">Checkbox:</label> <input type="checkbox" id="checkbox" /> <div id="message"></div> <button type="submit">Submit</button> </form>
以下是處理上述表單的 TypeScript 程式碼：
const checkbox = document.querySelector('#checkbox') as HTMLInputElement;
const message = document.querySelector('#message') as HTMLDivElement;
checkbox.addEventListener('change', () => {
message.textContent = checkbox.checked ? 'Checkbox is checked' : 'Checkbox is unchecked';
});
輸出
結論
在本教程中，我們介紹了在 TypeScript 中操作表單元素的基本方面。我們探討了建立表單、處理表單提交、驗證輸入和響應表單事件。瞭解這些概念使您能夠在 TypeScript 專案中構建強大且互動式的表單。請記住，利用 TypeScript 的靜態型別功能來增強表單處理並提高程式碼質量。
2K+ 瀏覽量
