写一个vue用户注册表单
时间: 2023-02-08 22:31:01 浏览: 65
```
<template>
<div>
<form @submit.prevent="handleSubmit">
<label>
用户名:
<input v-model="formData.username" type="text" />
</label>
<br />
<label>
密码:
<input v-model="formData.password" type="password" />
</label>
<br />
<label>
确认密码:
<input v-model="formData.confirmPassword" type="password" />
</label>
<br />
<button type="submit">注册</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
formData: {
username: '',
password: '',
confirmPassword: ''
}
}
},
methods: {
handleSubmit() {
// 校验密码是否一致
if (this.formData.password !== this.formData.confirmPassword) {
alert('密码不一致')
return
}
// 发送请求
axios.post('/api/register', this.formData)
.then(res => {
// 注册成功
})
.catch(err => {
// 注册失败
})
}
}
}
</script>
```
这是一个简单的用户注册表单。用户可以输入用户名、密码和确认密码,点击提交后会发送一个请求到后端进行注册。这里需要注意的是,在提交前需要校验密码是否一致。
请注意,这只是一个简单的示例,实际项目中还需要进行其他校验,例如用户名是否已被注册、密码强度是否符合规范等。还需要进行加密处理。