用vue3和element-plus建一个注册界面
时间: 2024-05-09 20:18:59 浏览: 10
抱歉,我是一个AI语言模型,无法提供图形界面。但是,我可以提供一个基于Vue3和Element Plus的注册界面代码示例,您可以根据自己的需求进行修改和美化。
```vue
<template>
<div class="register">
<el-form :model="form" ref="form" :rules="rules" label-width="80px" class="register-form">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="form.password"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="confirmPassword">
<el-input type="password" v-model="form.confirmPassword"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email"></el-input>
</el-form-item>
<el-form-item label="手机号" prop="phone">
<el-input v-model="form.phone"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">注册</el-button>
<el-button @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { defineComponent } from 'vue';
import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus';
export default defineComponent({
name: 'Register',
components: {
ElForm,
ElFormItem,
ElInput,
ElButton,
},
data() {
return {
form: {
username: '',
password: '',
confirmPassword: '',
email: '',
phone: '',
},
rules: {
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 20, message: '密码长度应为6-20位', trigger: 'blur' },
],
confirmPassword: [
{ required: true, message: '请再次输入密码', trigger: 'blur' },
{
validator: (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.form.password) {
callback(new Error('两次输入密码不一致'));
} else {
callback();
}
},
trigger: 'blur',
},
],
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱格式', trigger: ['blur', 'change'] },
],
phone: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
{ pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号', trigger: ['blur', 'change'] },
],
},
};
},
methods: {
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
// TODO: 发送注册请求
} else {
return false;
}
});
},
resetForm() {
this.$refs.form.resetFields();
},
},
});
</script>
<style scoped>
.register {
width: 400px;
margin: 50px auto;
}
.register-form {
margin-top: 20px;
}
</style>
```