📘 BÀI 26: FORM VALIDATION NÂNG CAO VỚI VUE

Xây dựng Form Validation nâng cao trong Vue giúp nâng trải nghiệm người dùng với các biểu mẫu đẹp, có kiểm tra lỗi, cảnh báo, focus tự động. Đây là bước quan trọng để người dùng không nhập sai và cảm thấy dễ dùng.

Mục tiêu

• Tạo form có validate nâng cao
• Hiển thị lỗi đẹp, realtime
• Thêm UX: autofocus, disable button khi đang xử lý
• Sử dụng thư viện validate chuyên dụng (hoặc tự viết)

Phần 1: Form validate đơn giản với reactive + computed

Ví dụ: form đăng ký

📋 Copy<template>
  <form @submit.prevent="submitForm">
    <input v-model="username" placeholder="Username" @blur="validateUsername" />
    <p v-if="usernameError" class="error">{{ usernameError }}</p>

    <input v-model="password" type="password" placeholder="Mật khẩu" @blur="validatePassword" />
    <p v-if="passwordError" class="error">{{ passwordError }}</p>

    <button :disabled="!formValid">Đăng ký</button>
  </form>
</template>

<script setup>
import { ref, computed } from 'vue'

const username = ref('')
const password = ref('')
const usernameError = ref('')
const passwordError = ref('')

function validateUsername() {
  if (username.value.length < 4) {
    usernameError.value = 'Username phải có ít nhất 4 ký tự'
  } else {
    usernameError.value = ''
  }
}

function validatePassword() {
  if (password.value.length < 6) {
    passwordError.value = 'Mật khẩu quá ngắn'
  } else {
    passwordError.value = ''
  }
}

const formValid = computed(() => {
  return username.value && password.value && !usernameError.value && !passwordError.value
})

function submitForm() {
  alert('Gửi form thành công')
}
</script>

<style scoped>
input {
  display: block;
  margin: 8px 0;
  padding: 8px;
  width: 100%;
}
.error {
  color: red;
  font-size: 13px;
}
button:disabled {
  background: #ccc;
}
</style>

Phần 2: Dùng thư viện validate chuyên nghiệp (VeeValidate)

Cài đặt:

📋 Copynpm install vee-validate yup

Ví dụ dùng trong form login:

📋 Copy<script setup>
import { useForm, useField } from 'vee-validate'
import * as yup from 'yup'

const { handleSubmit } = useForm({
  validationSchema: yup.object({
    username: yup.string().required().min(4),
    password: yup.string().required().min(6)
  })
})

const { value: username, errorMessage: usernameError } = useField('username')
const { value: password, errorMessage: passwordError } = useField('password')

const onSubmit = handleSubmit(values => {
  console.log('Dữ liệu hợp lệ:', values)
})
</script>

Bạn có thể tích hợp onSubmit để login hoặc đăng ký. Thư viện này hỗ trợ hiển thị lỗi, check theo chuẩn quốc tế, và hỗ trợ đa ngôn ngữ.

Phần 3: UX nâng cao cho form

1. Tự động focus ô đầu tiên

📋 Copy<input v-model="username" ref="inputRef" />

onMounted(() => {
  inputRef.value.focus()
})

2. Disable button khi đang xử lý

📋 Copy<button :disabled="isSubmitting">Đăng nhập</button>

3. Hiển thị lỗi realtime, tránh spam

Dùng @blur hoặc debounce input để tránh check liên tục

4. Hiện loader khi đang submit

Thêm <span class="spinner"></span> kế nút khi isSubmitting = true

Bạn đã học được

• Tự xây validate form với reactive + computed
• Dùng thư viện VeeValidate + Yup chuyên nghiệp
• Thêm UX cho biểu mẫu: autofocus, disable, hiển thị lỗi rõ ràng
• Chuẩn bị cho các form nâng cao: đổi mật khẩu, upload avatar, quản lý bài học

Bài tập mở rộng

1. Dùng VeeValidate tạo form: đổi mật khẩu, tạo todo, cập nhật hồ sơ
2. Hiển thị lỗi bằng tooltip hoặc popover thay vì plain text
3. Chuyển sang dùng <Form>, <Field>, <ErrorMessage> của VeeValidate