使用 Vue+HTML+CSS 元素 完成 注册和登录页 面,并对输入的数据进行必要验证; 密码长度 6-10 位、年龄 0-100、手机号的验证、邮箱格式验证等
时间: 2024-05-09 09:15:49 浏览: 8
好的,我可以为您提供一些代码示例来完成这个任务。首先,我们可以创建一个Vue组件,包含注册和登录表单,并实现必要的验证逻辑。下面是一个简单的示例:
```
<template>
<div class="form-container">
<h2>注册</h2>
<form @submit.prevent="register">
<div class="form-group">
<label for="username">用户名</label>
<input type="text" id="username" v-model.trim="username" required>
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" id="password" v-model.trim="password" :minlength="6" :maxlength="10" required>
</div>
<div class="form-group">
<label for="age">年龄</label>
<input type="number" id="age" v-model.number="age" min="0" max="100" required>
</div>
<div class="form-group">
<label for="phone">手机号</label>
<input type="tel" id="phone" v-model.trim="phone" pattern="^1[3-9]\d{9}$" required>
</div>
<div class="form-group">
<label for="email">邮箱</label>
<input type="email" id="email" v-model.trim="email" required>
</div>
<button type="submit">注册</button>
</form>
<h2>登录</h2>
<form @submit.prevent="login">
<div class="form-group">
<label for="loginUsername">用户名</label>
<input type="text" id="loginUsername" v-model.trim="loginUsername" required>
</div>
<div class="form-group">
<label for="loginPassword">密码</label>
<input type="password" id="loginPassword" v-model.trim="loginPassword" required>
</div>
<button type="submit">登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
age: null,
phone: '',
email: '',
loginUsername: '',
loginPassword: ''
}
},
methods: {
register() {
// 在这里执行注册逻辑,验证输入数据是否符合要求
// 如果符合要求,向后端发送请求进行注册
},
login() {
// 在这里执行登录逻辑,验证输入数据是否符合要求
// 如果符合要求,向后端发送请求进行登录
}
}
}
</script>
<style scoped>
.form-container {
max-width: 500px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
.form-group {
margin-bottom: 10px;
}
label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
input[type="text"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="email"] {
width: 100%;
padding: 10px;
border-radius: 3px;
border: 1px solid #ccc;
}
button[type="submit"] {
display: block;
width: 100%;
padding: 10px;
border-radius: 3px;
border: none;
background-color: #007bff;
color: #fff;
cursor: pointer;
}
button[type="submit"]:hover {
background-color: #0062cc;
}
</style>
```
在这个示例中,我们使用了Vue的模板语法来创建注册和登录表单。每个表单字段都有一个v-model指令来绑定数据到组件的data属性。我们还为密码、年龄、手机号和邮箱添加了一些验证规则,如最小长度、最大长度、最小值、最大值和正则表达式。在注册和登录方法中,我们可以使用这些数据属性来验证输入数据是否符合要求,并向后端发送请求进行注册或登录。
这只是一个简单的示例,您可以根据需求进行修改和扩展。希望这能帮助到您!