Vue.js 表單驗證實戰：一個簡單的登錄頁面

修改日期	備注
2025.1.2	初版

一、前言

Vue.js 學習第一天——學會一個帶有簡單表單驗證的登錄頁面。通過這個項目，會對 Vue.js 的核心概念有了更深入的理解，加深掌握如何運用 Vue 的一些強大特性來實現動態交互和數據處理。

二、項目的基本結構

首先，讓我們來看一下這個項目的 HTML 結構：

<!DOCTYPE html>
<html lang="en"><head><title>Vue.js 登錄頁面</title><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><link href="style.css" rel="stylesheet" /><script src="https://unpkg.com/vue@latest"></script></head><body><div id="app"><form><input type="text" v-bind:class="{ 'input-error':!usernameIsValid }"placeholder="enter your username" v-model="username"/><br /><input type="password" v-bind:class="{ 'input-error':!passwordIsValid }"placeholder="enter your password" v-model="password"/><br /><button type="submit" v-on:click.prevent="submit">Login</button></form></div><script>const app = {data() {return {username:"",password:"",};},computed: {usernameIsValid() {return this.username.length >= 3;},passwordIsValid() {return this.password.length >= 3;}},methods: {submit() {if (!this.usernameIsValid ||!this.passwordIsValid) {alert("The input length smaller than 3");} else {alert(`Your input is username: ${this.username}; password: ${this.password}`);}}}};Vue.createApp(app).mount("#app");// vue的掛載</script></body>
</html>

在這個 HTML 頁面中，我們使用 Vue.js 構建了一個簡單的登錄表單。

它的首頁展示為：

它包含以下幾個部分：

三、引入 Vue.js 及頁面設置

在 <head> 部分，我們進行了一些基礎的頁面設置和 Vue.js 的引入：

<head><title>Vue.js 登錄頁面</title><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><link href="style.css" rel="stylesheet" /><script src="https://unpkg.com/vue@latest"></script>
</head>

<title> 為我們的頁面設置了一個標題，方便在瀏覽器標簽上顯示。
<meta charset="UTF-8" /> 確保頁面可以正確顯示各種字符，避免出現亂碼。
<meta name="viewport" content="width=device-width, initial-scale=1" /> 使頁面在不同設備上能根據設備的寬度自適應顯示，對于移動設備的適配非常重要哦。
<link href="style.css" rel="stylesheet" /> 引入了外部的樣式表文件，我們會在后面的部分看到它是如何為頁面添加樣式的。
<script src="https://unpkg.com/vue@latest"></script> 是引入 Vue.js 的最新版本，這樣我們就可以在頁面中使用 Vue 的各種功能啦。

四、表單元素與 Vue 的雙向綁定

在 <body> 部分，我們有一個 Vue 應用的根元素 <div id="app">，在這個元素內部是我們的表單：

<div id="app"><form><input type="text" v-bind:class="{ 'input-error':!usernameIsValid }"placeholder="enter your username" v-model="username"/><br /><input type="password" v-bind:class="{ 'input-error':!passwordIsValid }"placeholder="enter your password" v-model="password"/><br /><button type="submit" v-on:click.prevent="submit">Login</button></form>
</div>

這里有兩個輸入框，一個用于輸入用戶名，一個用于輸入密碼。它們都使用了 v-model 指令進行雙向綁定。以用戶名輸入框為例：
- v-model="username" 把輸入框的值和 Vue 實例中的 username 數據屬性綁定在一起。這意味著當用戶在輸入框中輸入內容時，username 的值會自動更新，反之，當我們在 Vue 代碼中修改 username 的值，輸入框的內容也會隨之改變。這是 Vue 中非常方便的雙向數據綁定特性哦讓數據的處理變得簡單又直觀。
輸入框還使用了 v-bind:class 指令：
- v-bind:class="{ 'input-error':!usernameIsValid }" 是一種動態綁定類名的方式。這里，我們將輸入框的類名和一個計算屬性 usernameIsValid 關聯起來。當 usernameIsValid 為 false 時，輸入框會被添加 input-error 類，當 usernameIsValid 為 true 時，這個類不會被添加。這樣可以根據用戶輸入的有效性動態地改變輸入框的樣式，是不是很酷呢？

五、Vue 實例中的數據和方法

接著我們來看看 <script> 部分的 Vue 實例：

const app = {data() {return {username:"",password:"",};},computed: {usernameIsValid() {return this.username.length >= 3;},passwordIsValid() {return this.password.length >= 3;}},methods: {submit() {if (!this.usernameIsValid ||!this.passwordIsValid) {alert("The input length smaller than 3");} else {alert(`Your input is username: ${this.username}; password: ${this.password}`);}}}
};
Vue.createApp(app).mount("#app");

數據部分（data）：
- data() 函數中定義了 username 和 password 兩個數據屬性，它們分別存儲用戶輸入的用戶名和密碼，初始值都為空字符串。這是我們用來保存用戶輸入的地方，它們會通過 v-model 與輸入框進行雙向綁定。
計算屬性（computed）：
- usernameIsValid 計算屬性用于判斷用戶名是否有效，通過 return this.username.length >= 3; 來檢查 username 的長度是否大于或等于 3 個字符。這樣，只要 username 的長度發生變化，usernameIsValid 的值就會自動更新。
- 同樣，passwordIsValid 計算屬性會根據 password 的長度來判斷密碼是否有效。計算屬性的優點是它會根據其依賴的數據自動更新，避免了我們手動更新狀態，使代碼更加簡潔和易于維護。
方法部分（methods）：
- submit() 方法是在用戶點擊登錄按鈕時調用的。
- if (!this.usernameIsValid ||!this.passwordIsValid) {...} 這里會檢查用戶名或密碼是否長度不足 3 個字符。如果是，會彈出一個警告信息，告訴用戶輸入長度太短。
- else {...} 部分則會在輸入合法時，顯示用戶輸入的用戶名和密碼，這里使用了模板字符串來方便地顯示用戶輸入的信息。