请使用Vue3写一个登录页面,界面上有账号和密码的输入框 要求:点击登录时校验账号是否为11位手机号,若手机号格式正确,提示登录成功
时间: 2024-09-10 14:02:21 浏览: 27
在Vue 3中创建一个登录页面,首先你需要创建一个新的Vue 3项目或者在现有的Vue 3项目中添加一个新组件。以下是一个简单的示例来说明如何实现:
1. 首先,确保你已经安装了Node.js和npm(Node.js包管理器)。
2. 使用Vue CLI创建一个新的Vue 3项目(如果你还没有一个):
```
vue create my-login-project
```
在提示时选择Vue 3。
3. 在项目中,创建一个新的组件,例如 `Login.vue`,并添加以下代码:
```vue
<template>
<div class="login-container">
<h1>登录页面</h1>
<form @submit.prevent="handleLogin">
<div>
<label for="account">账号(手机号):</label>
<input id="account" type="text" v-model="account" />
</div>
<div>
<label for="password">密码:</label>
<input id="password" type="password" v-model="password" />
</div>
<button type="submit">登录</button>
</form>
</div>
</template>
<script setup>
import { ref } from 'vue';
const account = ref('');
const password = ref('');
const handleLogin = () => {
const phonePattern = /^1[3-9]\d{9}$/; // 正则表达式匹配11位手机号
if (phonePattern.test(account.value)) {
alert('登录成功');
// 这里可以进行实际的登录操作,例如发送请求到后端API
} else {
alert('账号格式错误,请输入正确的11位手机号!');
}
};
</script>
<style>
.login-container {
max-width: 300px;
margin: auto;
padding: 1em;
}
label {
display: block;
margin: 0.5em 0;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 0.5em;
margin-bottom: 1em;
}
button {
width: 100%;
padding: 0.5em;
cursor: pointer;
}
</style>
```
4. 在你的Vue应用中引入并使用这个组件。
这个示例中,我们使用了Vue 3的Composition API,`<script setup>` 是一个特殊的语法糖,使代码更加简洁。我们还使用了 `ref` 来创建响应式的变量,并在登录时使用正则表达式对手机号进行格式校验。
阅读全文