vue实现注册页

创建Vue项目

使用Vue CLI创建一个新项目，确保已安装Node.js和Vue CLI。

vue create register-page
cd register-page

安装依赖

如果需要表单验证，可以安装VeeValidate或Vuelidate。

npm install vee-validate --save

创建注册组件

在src/components目录下创建Register.vue文件，包含表单结构。

<template>
  <div class="register">
    <h2>用户注册</h2>
    <form @submit.prevent="handleSubmit">
      <div class="form-group">
        <label for="username">用户名</label>
        <input
          type="text"
          id="username"
          v-model="form.username"
          required
        />
      </div>
      <div class="form-group">
        <label for="email">邮箱</label>
        <input
          type="email"
          id="email"
          v-model="form.email"
          required
        />
      </div>
      <div class="form-group">
        <label for="password">密码</label>
        <input
          type="password"
          id="password"
          v-model="form.password"
          required
        />
      </div>
      <div class="form-group">
        <label for="confirmPassword">确认密码</label>
        <input
          type="password"
          id="confirmPassword"
          v-model="form.confirmPassword"
          required
        />
      </div>
      <button type="submit">注册</button>
    </form>
  </div>
</template>

添加表单逻辑

在<script>部分添加表单数据处理和验证逻辑。

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        email: '',
        password: '',
        confirmPassword: ''
      }
    }
  },
  methods: {
    handleSubmit() {
      if (this.form.password !== this.form.confirmPassword) {
        alert('两次输入的密码不一致');
        return;
      }

      // 模拟API调用
      console.log('注册信息:', this.form);
      alert('注册成功');

      // 实际项目中替换为真实的API调用
      // this.$http.post('/api/register', this.form)
      //   .then(response => {
      //     console.log(response);
      //   })
      //   .catch(error => {
      //     console.error(error);
      //   });
    }
  }
}
</script>

添加样式

在<style>部分添加基本样式。

<style scoped>
.register {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}
.form-group {
  margin-bottom: 15px;
}
label {
  display: block;
  margin-bottom: 5px;
}
input {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}
button {
  background-color: #42b983;
  color: white;
  padding: 10px 15px;
  border: none;
  cursor: pointer;
}
button:hover {
  background-color: #369f6e;
}
</style>

配置路由

在src/router/index.js中添加注册页面的路由配置。

import Vue from 'vue'
import Router from 'vue-router'
import Register from '@/components/Register'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/register',
      name: 'Register',
      component: Register
    }
  ]
})

运行项目

启动开发服务器查看效果。

npm run serve

表单验证增强

使用VeeValidate进行更强大的表单验证，修改Register.vue。

import { ValidationProvider, extend } from 'vee-validate';
import { required, email, confirmed } from 'vee-validate/dist/rules';

extend('required', {
  ...required,
  message: '此字段为必填项'
});

extend('email', {
  ...email,
  message: '请输入有效的邮箱地址'
});

extend('confirmed', {
  ...confirmed,
  message: '两次输入的密码不一致'
});

响应式设计

添加媒体查询使页面在移动设备上表现良好。

@media (max-width: 600px) {
  .register {
    padding: 10px;
  }
}

表单提交状态

添加加载状态和错误处理，提升用户体验。

data() {
  return {
    form: {
      /* 原有字段 */
    },
    loading: false,
    error: null
  }
},
methods: {
  async handleSubmit() {
    this.loading = true;
    this.error = null;

    try {
      // 模拟API延迟
      await new Promise(resolve => setTimeout(resolve, 1000));
      console.log('注册信息:', this.form);
      alert('注册成功');
    } catch (err) {
      this.error = '注册失败，请重试';
    } finally {
      this.loading = false;
    }
  }
}