提供一个Vue的登录表单代码
时间: 2024-02-09 20:08:02 浏览: 20
以下是一个基本的 Vue 登录表单代码,包括表单验证和提交功能:
```html
<template>
<div>
<form @submit.prevent="login">
<label>用户名:</label>
<input type="text" v-model="username">
<span v-if="!usernameValid">请输入用户名</span>
<br>
<label>密码:</label>
<input type="password" v-model="password">
<span v-if="!passwordValid">请输入密码</span>
<br>
<button type="submit">登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
usernameValid: true,
passwordValid: true
}
},
methods: {
login() {
if (!this.validate()) {
return;
}
// 处理登录逻辑
},
validate() {
this.usernameValid = !!this.username;
this.passwordValid = !!this.password;
return this.usernameValid && this.passwordValid;
}
}
}
</script>
```
在这个代码中,我们定义了一个表单,包括用户名和密码两个输入框和一个提交按钮。在表单提交时,我们调用 `login` 方法进行表单验证,如果验证通过,就可以处理登录逻辑。
表单验证使用 `validate` 方法,该方法会验证用户名和密码是否为空。如果为空,就会将相应的验证标记 `usernameValid` 和 `passwordValid` 置为 false,并在页面中显示错误提示。否则,验证通过,就返回 true。
注:这只是一个基础示例,实际开发中还需要考虑更多因素,如表单验证规则、错误提示样式等。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)