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 {...} 部分则会在输入合法时，显示用户输入的用户名和密码，这里使用了模板字符串来方便地显示用户输入的信息。