Validation form với Vuelidate hoặc Yup trong Vue.js

Khi xây dựng các biểu mẫu trong Vue.js, việc kiểm tra dữ liệu nhập vào (validation) là vô cùng quan trọng để đảm bảo tính chính xác và bảo mật. Trong bài này, chúng ta sẽ tìm hiểu cách sử dụng Vuelidate và Yup để xác thực dữ liệu form, giúp ngăn chặn lỗi nhập liệu ngay từ phía người dùng.

Validation form với Vuelidate hoặc Yup

1. Giới thiệu về Validation trong Vue.js

Validation giúp kiểm tra dữ liệu nhập vào trước khi gửi đi. Một số quy tắc kiểm tra phổ biến:

• Trường bắt buộc (required)
• Email hợp lệ
• Độ dài ký tự (min/max length)
• So khớp mật khẩu
• Số điện thoại hợp lệ

Trong Vue.js, có thể thực hiện validation theo nhiều cách:

1. Tự viết logic validation thủ công
2. Dùng thư viện như Vuelidate hoặc Yup (được khuyến khích vì dễ bảo trì hơn)

2. Sử dụng Vuelidate để kiểm tra dữ liệu

Cài đặt Vuelidate:

npm install @vuelidate/core @vuelidate/validators

Ví dụ form đăng ký sử dụng Vuelidate:

<template>
  <div>
    <h2>Đăng ký tài khoản</h2>
    <form @submit.prevent="submitForm">
      <label>Họ và tên:</label>
      <input v-model="name" type="text">
      <p v-if="v$.name.$error">Họ tên không được để trống</p>

      <label>Email:</label>
      <input v-model="email" type="email">
      <p v-if="v$.email.$error">Email không hợp lệ</p>

      <label>Mật khẩu:</label>
      <input v-model="password" type="password">
      <p v-if="v$.password.$error">Mật khẩu phải có ít nhất 6 ký tự</p>

      <button type="submit" :disabled="v$.$invalid">Đăng ký</button>
    </form>
  </div>
</template>

<script>
import useVuelidate from "@vuelidate/core";
import { required, email, minLength } from "@vuelidate/validators";

export default {
  setup() {
    const state = reactive({
      name: "",
      email: "",
      password: ""
    });

    const rules = {
      name: { required },
      email: { required, email },
      password: { required, minLength: minLength(6) }
    };

    const v$ = useVuelidate(rules, state);

    const submitForm = () => {
      if (!v$.$invalid) {
        alert("Đăng ký thành công!");
      }
    };

    return { state, v$, submitForm };
  }
};
</script>

<style scoped>
p {
  color: red;
  font-size: 12px;
}
</style>

Giải thích:

• useVuelidate() giúp kiểm tra dữ liệu dựa trên rules.
• Nếu có lỗi, sẽ hiển thị thông báo tương ứng.
• v$.$invalid kiểm tra nếu form có lỗi thì vô hiệu hóa nút Submit.

3. Validation Form với Yup

Cài đặt Yup và @vueuse/core

npm install yup @vueuse/core

Sử dụng Yup để kiểm tra dữ liệu form

<template>
  <div>
    <h2>Đăng ký tài khoản</h2>
    <form @submit.prevent="submitForm">
      <label>Họ và tên:</label>
      <input v-model="name" type="text">
      <p v-if="errors.name">{{ errors.name }}</p>

      <label>Email:</label>
      <input v-model="email" type="email">
      <p v-if="errors.email">{{ errors.email }}</p>

      <label>Mật khẩu:</label>
      <input v-model="password" type="password">
      <p v-if="errors.password">{{ errors.password }}</p>

      <button type="submit" :disabled="Object.keys(errors).length > 0">Đăng ký</button>
    </form>
  </div>
</template>

<script>
import * as yup from "yup";
import { useForm } from "@vueuse/core";

export default {
  setup() {
    const schema = yup.object({
      name: yup.string().required("Họ tên không được để trống"),
      email: yup.string().email("Email không hợp lệ").required("Email không được để trống"),
      password: yup.string().min(6, "Mật khẩu phải có ít nhất 6 ký tự").required("Mật khẩu không được để trống")
    });

    const { values, errors, validate } = useForm({ validationSchema: schema });

    const submitForm = async () => {
      const isValid = await validate();
      if (isValid) {
        alert("Đăng ký thành công!");
      }
    };

    return { ...values, errors, submitForm };
  }
};
</script>

<style scoped>
p {
  color: red;
  font-size: 12px;
}
</style>

Giải thích:

• Dùng Yup để định nghĩa schema validation cho form.
• Dùng useForm() từ @vueuse/core để liên kết dữ liệu và kiểm tra lỗi.
• Nếu có lỗi, nó sẽ được hiển thị ngay dưới input.

Thực hành: Xây dựng form đăng ký có kiểm tra hợp lệ dữ liệu

Yêu cầu:

• Người dùng nhập tên, email, mật khẩu.
• Hiển thị lỗi nếu nhập sai hoặc thiếu.
• Chỉ cho phép submit nếu dữ liệu hợp lệ.

Giải pháp:

• Sử dụng Vuelidate hoặc Yup để kiểm tra dữ liệu.
• Hiển thị thông báo lỗi dưới input.
• Ngăn chặn submit nếu có lỗi.

Kết luận

• Vuelidate phù hợp cho các dự án Vue.js thông thường vì tích hợp chặt chẽ với Vue.
• Yup mạnh mẽ hơn khi làm việc với Vue 3 + Composition API và có thể kết hợp với useForm().
• Cả hai thư viện đều giúp validation form dễ dàng hơn và cải thiện trải nghiệm người dùng.