请使用Vue3写一个登录页面,界面上有账号和密码的输入框 要求:点击登录时校验账号是否为11位手机号,若手机号格式正确,提示登录成功
时间: 2024-09-10 22:06:42 浏览: 29
在Vue3中创建一个简单的登录页面,我们可以使用`<template>`、`<script>` 和 `style` 标签来构建。首先,确保已经安装了Vue CLI,并且在项目中引入了Vue。接下来,按照以下步骤编写代码:
1. 创建一个login.vue组件文件:
```html
<!-- login.vue -->
<template>
<div class="login-form">
<h2>Login</h2>
<form @submit.prevent="handleSubmit">
<label for="username">手机号:</label>
<input type="tel" v-model.trim="phoneNumber" id="username" placeholder="请输入11位手机号" required>
<label for="password">密码:</label>
<input type="password" v-model="password" id="password" placeholder="请输入密码" required>
<button type="submit" :disabled="!isValidPhoneNumber">登录</button>
<p v-if="showSuccessMessage">{{ successMessage }}</p>
</form>
</div>
</template>
<script>
export default {
data() {
return {
phoneNumber: '',
password: '',
isValidPhoneNumber: true,
successMessage: '',
};
},
methods: {
handleSubmit() {
if (this.validatePhoneNumber()) {
// 检查密码或其他验证逻辑(这里仅示例)
if (this.password === 'your-password') {
this.successMessage = '登录成功';
this.isValidPhoneNumber = false; // 防止再次提交
} else {
this.successMessage = '';
}
}
},
validatePhoneNumber() {
const regex = /^\d{11}$/;
return regex.test(this.phoneNumber);
},
},
};
</script>
<style scoped>
.login-form {
display: flex;
flex-direction: column;
align-items: center;
}
</style>
```
在这个例子中,我们定义了一个表单,包含手机号和密码输入字段。当用户点击登录按钮时,会触发`handleSubmit`方法。`validatePhoneNumber`函数检查手机号格式,如果格式正确,则设置`successMessage`显示成功信息,并禁用登录按钮防止重复提交。