写一个vue的注册页面
时间: 2024-05-06 18:17:15 浏览: 8
下面是一个简单的 Vue 注册页面的示例,包含了表单验证和提交功能:
```html
<template>
<div>
<form @submit.prevent="submit">
<div>
<label for="name">姓名:</label>
<input type="text" id="name" v-model="name">
<span v-if="!name">请输入姓名</span>
</div>
<div>
<label for="email">邮箱:</label>
<input type="email" id="email" v-model="email">
<span v-if="!email">请输入邮箱</span>
<span v-else-if="!isValidEmail(email)">请输入正确的邮箱格式</span>
</div>
<div>
<label for="password">密码:</label>
<input type="password" id="password" v-model="password">
<span v-if="!password">请输入密码</span>
<span v-else-if="password.length < 6">密码长度不能少于6位</span>
</div>
<div>
<label for="confirmPassword">确认密码:</label>
<input type="password" id="confirmPassword" v-model="confirmPassword">
<span v-if="!confirmPassword">请确认密码</span>
<span v-else-if="password !== confirmPassword">两次密码输入不一致</span>
</div>
<button type="submit">注册</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
name: '',
email: '',
password: '',
confirmPassword: ''
}
},
methods: {
submit() {
if (!this.name || !this.email || !this.password || !this.confirmPassword || !this.isValidEmail(this.email) || this.password.length < 6 || this.password !== this.confirmPassword) {
return;
}
// 提交表单
},
isValidEmail(email) {
const re = /\S+@\S+\.\S+/;
return re.test(email);
}
}
}
</script>
```
这个页面包含了四个表单输入框,分别用于输入姓名、邮箱、密码和确认密码。每个输入框都会进行相应的验证,如果不满足条件,将会显示相应的错误提示信息。
当所有表单都通过验证后,点击注册按钮将会触发 `submit` 方法,执行表单提交操作。