vue实现注册验证

Vue 实现注册验证

表单结构设计

使用 Vue 的 v-model 绑定表单输入字段，例如用户名、密码、邮箱等。为每个字段添加验证规则和错误提示。

<template>
  <form @submit.prevent="handleSubmit">
    <div>
      <label>用户名</label>
      <input v-model="form.username" @blur="validateUsername" />
      <span v-if="errors.username">{{ errors.username }}</span>
    </div>
    <div>
      <label>邮箱</label>
      <input v-model="form.email" @blur="validateEmail" />
      <span v-if="errors.email">{{ errors.email }}</span>
    </div>
    <div>
      <label>密码</label>
      <input v-model="form.password" type="password" @blur="validatePassword" />
      <span v-if="errors.password">{{ errors.password }}</span>
    </div>
    <button type="submit">注册</button>
  </form>
</template>

数据与验证逻辑

在 Vue 的 data 或 setup 中定义表单数据和错误信息对象，并编写验证方法。

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        email: '',
        password: '',
      },
      errors: {
        username: '',
        email: '',
        password: '',
      },
    };
  },
  methods: {
    validateUsername() {
      if (!this.form.username) {
        this.errors.username = '用户名不能为空';
      } else if (this.form.username.length < 3) {
        this.errors.username = '用户名至少3个字符';
      } else {
        this.errors.username = '';
      }
    },
    validateEmail() {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!this.form.email) {
        this.errors.email = '邮箱不能为空';
      } else if (!emailRegex.test(this.form.email)) {
        this.errors.email = '邮箱格式不正确';
      } else {
        this.errors.email = '';
      }
    },
    validatePassword() {
      if (!this.form.password) {
        this.errors.password = '密码不能为空';
      } else if (this.form.password.length < 6) {
        this.errors.password = '密码至少6个字符';
      } else {
        this.errors.password = '';
      }
    },
    handleSubmit() {
      this.validateUsername();
      this.validateEmail();
      this.validatePassword();
      if (!this.errors.username && !this.errors.email && !this.errors.password) {
        // 提交表单逻辑
        console.log('表单验证通过', this.form);
      }
    },
  },
};
</script>

使用 Vuelidate 库

如果需要更复杂的验证逻辑，可以使用 Vuelidate 库简化验证过程。

安装 Vuelidate：

npm install vuelidate

示例代码：

<script>
import { required, minLength, email } from 'vuelidate/lib/validators';
export default {
  data() {
    return {
      form: {
        username: '',
        email: '',
        password: '',
      },
    };
  },
  validations: {
    form: {
      username: { required, minLength: minLength(3) },
      email: { required, email },
      password: { required, minLength: minLength(6) },
    },
  },
  methods: {
    handleSubmit() {
      this.$v.$touch();
      if (!this.$v.$invalid) {
        console.log('表单验证通过', this.form);
      }
    },
  },
};
</script>

实时验证与反馈

通过 @input 或 watch 实现实时验证，提升用户体验。

<input v-model="form.username" @input="validateUsername" />

后端验证补充

前端验证仅用于用户体验，必须结合后端验证确保数据安全。提交表单时调用 API 并处理后端返回的验证错误。

methods: {
  async handleSubmit() {
    try {
      const response = await axios.post('/api/register', this.form);
      console.log('注册成功', response.data);
    } catch (error) {
      if (error.response.data.errors) {
        this.errors = error.response.data.errors;
      }
    }
  },
},