使用vue写一个登录页面,有用户名和密码,都做一些输入校验,不符合校验规则就提示重新输入...
时间: 2024-03-09 20:44:35 浏览: 13
好的,下面是使用Vue编写的登录页面示例代码:
```
<template>
<div class="login-container">
<h1>登录</h1>
<form @submit.prevent="submit">
<div class="form-group">
<label for="username">用户名:</label>
<input type="text" id="username" v-model.trim="username" required>
<div class="error-message" v-if="!validUsername">请输入用户名</div>
</div>
<div class="form-group">
<label for="password">密码:</label>
<input type="password" id="password" v-model.trim="password" required>
<div class="error-message" v-if="!validPassword">密码长度应为6-20位</div>
</div>
<button type="submit" :disabled="!validUsername || !validPassword">登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: "",
password: "",
validUsername: true,
validPassword: true
};
},
methods: {
submit() {
// 提交表单的逻辑
},
validateUsername() {
this.validUsername = !!this.username.trim();
},
validatePassword() {
this.validPassword = this.password.length >= 6 && this.password.length <= 20;
}
},
watch: {
username() {
this.validateUsername();
},
password() {
this.validatePassword();
}
}
};
</script>
<style>
.error-message {
color: red;
font-size: 14px;
}
</style>
```
该组件包含一个表单,包括一个用户名输入框和一个密码输入框,以及一个登录按钮。输入框都有必填的校验,并且密码长度需要在6-20位之间。如果未通过校验,会提示对应的错误信息。登录按钮会在用户名和密码输入框都通过校验后才可用。
使用时,将该组件引入到你的Vue应用中即可。