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 {...}部分则会在输入合法时，显示用户输入的用户名和密码，这里使用了模板字符串来方便地显示用户输入的信息。
六、样式处理（CSS）
我们的 style.css 文件也起着重要的作用，让我们看看其中的代码：
.input-error {
border: 2px solid red;
}
这里定义了 .input-error 类，当输入框被添加这个类时，会显示一个 2 像素宽的红色边框。这与我们在 v-bind:class 中使用的类名相对应，当输入不满足长度要求时，输入框会显示红色边框，让用户知道输入有问题，增强了用户体验。
七、总结
通过这个简单的 Vue.js 登录页面项目，我们学习了很多重要的 Vue 特性：
- 如何使用
v-model进行双向数据绑定，使数据在页面和 Vue 实例之间轻松同步。 - 利用
v-bind:class进行动态的类名绑定，根据条件为元素添加不同的样式，让页面更加生动和具有交互性。 - 使用计算属性来自动更新数据的状态，避免了手动更新和复杂的逻辑判断。
- 实现了简单的表单验证逻辑，处理用户输入并提供反馈。
这个小项目只是 Vue.js 的冰山一角，但通过这样的实践，我们可以逐渐掌握 Vue 的核心概念和使用技巧。希望你也能动手尝试一下，相信你会对 Vue 有更深刻的理解和认识哦 继续加油，一起探索 Vue.js 的更多可能性吧 期待在 Vue 的世界里创造出更棒的项目！
八、后续改进
当然，这个项目还有很多可以改进的地方哦，比如：
- 可以将验证逻辑扩展为更复杂的规则，例如检查用户名是否包含特殊字符，密码是否包含数字和字母等。
- 可以将表单提交改为异步操作，通过调用后端 API 来验证用户信息，实现真正的登录功能。
- 可以添加更多的用户反馈，例如使用 Vue 的组件系统创建一个专门的消息提示组件，取代
alert函数，使页面更加美观。
注意：记得将 style.css 文件和上述 HTML 文件放在同一个目录下，这样才能正常加载样式哦。
户名是否包含特殊字符，密码是否包含数字和字母等。
- 可以将表单提交改为异步操作，通过调用后端 API 来验证用户信息，实现真正的登录功能。
- 可以添加更多的用户反馈，例如使用 Vue 的组件系统创建一个专门的消息提示组件，取代
alert函数，使页面更加美观。
注意：记得将 style.css 文件和上述 HTML 文件放在同一个目录下，这样才能正常加载样式哦。