Hướng dẫn cài và sử dụng Vee-Validate cho nuxt js

VeeValidate - một thư viện validation cho Vue. js. Nó cung cấp rất nhiều quy tắc để validation dữ liệu và dễ dàng custom lại theo mong muốn. Chúng ta có thể validate HTML5 inputs cũng như custom Vue components.

Bước 1: Tạo Dự Án Nuxt.js Mới

Nếu bạn chưa có dự án Nuxt.js, bạn có thể tạo một dự án mới :

Chú ý: Có 2 cách để tạo dự án Nuxtjs đó là:

• npm
• yarn

Đối với yarn chạy lệnh sau :

yarn create nuxt-app <project-name>

Còn đối với npm thì  tạo dự án bằng cách sử dụng npx:

npx create-nuxt-app servbay-nuxt-app

Bước 2: Cài Đặt Thư Viện vee-validate

Mở terminal và chạy lệnh sau để cài đặt vee-validate:

Đối với yarn chạy lệnh sau:

yarn add vee-validate

Còn với npm thì chạy lệnh :

npm install vee-validate --save

Bước 3: Tạo plugin cho vee-validate

Tạo một file mới trong thư mục plugins, ví dụ vee-validate.js:

import Vue from 'vue';
import { ValidationProvider, ValidationObserver, configure, extend } from 'vee-validate';
import { required, min, max, between, email, numeric, confirmed } from 'vee-validate/dist/rules';

Vue.component('validation-observer', ValidationObserver);
Vue.component('validation-provider', ValidationProvider);

// If any option you want to change common
configure({ bails: false });

// Continue to add the necessary rule
extend('minSalary', {
  validate: (value, { min, max } = {}) => {
    return Number(min) <= value && Number(max) >= value;
  },
  message: 'Dữ liệu nhập vào lớn hơn {length} VND.'
});
extend('maxSalary', {
  ...max,
  message: 'Dữ liệu nhập vào nhỏ hơn {length} VND.'
});
extend('min', {
  ...min,
  message: 'Dữ liệu nhập vào lớn hơn {length} ký tự.'
});
extend('max', {
  ...max,
  message: 'Dữ liệu nhập vào nhỏ hơn {length} ký tự.'
});
extend('required', {
  ...required,
  message: 'Đây là thông tin bắt buộc.'
});
extend('between', {
  ...between,
  params: ['min', 'max'],
  message: 'Dữ liệu nhập vào lớn hơn {min} ký tự và nhỏ hơn {max} ký tự.'
});
extend('email', {
  ...email,
  message: 'Địa chỉ email không đúng định dạng.'
});
extend('numeric', {
  ...numeric,
  message: 'Dữ liệu nhập vào phải là số.'
});
extend('confirmed', {
  ...confirmed,
  message: 'Mật khẩu không chính xác.'
});
extend('phone', {
  message: 'Số điện thoại không đúng định dạng',
  validate: (value) => {
    return /(02|03|05|07|08|09|01[2|6|8|9])+([0-9]{8})\b/.test(value);
  }
});
extend('password', {
  message: 'Mật khẩu bao gồm 8-16 ký tự, có ít nhất 1 số, 1 ký tự viết hoa, 1 ký tự viết thường, 1 ký tự đặc biệt',
  validate: (value) => {
    return /(?=^.{8,16}$)((?=.*\d)(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$/.test(value);
  }
});
extend('website', {
  message: 'Đường dẫn website không đúng định dạng',
  validate: (value) => {
    return /^((ftp|http|https):\/\/)?([a-zA-Z0-9]+\.)[a-zA-Z0-9]+(\.[a-zA-Z0-9]+)*\/?$/.test(value);
  }
});
extend('facebook', {
  message: 'Đường đẫn facebook không đúng định dạng',
  validate: (value) => {
    return /^(?:(?:http|https):\/\/)?(?:www.)?facebook.com\/(?:(?:\w)*#!\/)?(?:pages\/)?(?:[?\w+-]*\/)?(?:profile.php\?id=(?=\d.*))?([\w+-+.]*)?$/.test(value);
  }
});
extend('limit_date', {
  message: 'Hạn nộp hồ sơ tối thiểu là 10 ngày',
  validate: (value) => {
    const today = new Date();
    const parts = value.split('/');
    const day = parts[0];
    const month = parts[1];
    const year = parts[2];
    const inputDate = new Date(`${year}-${month}-${day}`);
    const afterTenDay = new Date();
    afterTenDay.setDate(today.getDate() + 8);

    if (afterTenDay >= inputDate) {
      return false;
    } else {
      return true;
    }
  }
});

Bước 4: Đăng ký plugin trong nuxt.config.js

Mở file nuxt.config.js và thêm plugin:

// nuxt.config.js
export default {
  plugins: [
    '~/plugins/vee-validate.js'
  ]
};

Bước 5: Sử dụng vee-validate trong component

Bây giờ bạn có thể sử dụng vee-validate trong các component của bạn. Ví dụ, tạo một form trong pages/index.vue:

<template>
  <div>
    <h1>Form Validation with Vee-Validate</h1>
    <Form @submit="handleSubmit">
      <Field name="email" type="email" as="input" placeholder="Email" />
      <ErrorMessage name="email" />
      
      <Field name="password" type="password" as="input" placeholder="Password" />
      <ErrorMessage name="password" />

      <button type="submit">Submit</button>
    </Form>
  </div>
</template>

<script>
import { useForm } from 'vee-validate';

export default {
  setup() {
    const { handleSubmit } = useForm();

    const onSubmit = (values) => {
      console.log('Submitted values:', values);
    };

    return { handleSubmit: handleSubmit(onSubmit) };
  }
};
</script>

Bước 6: Chạy project 

Chạy project của bạn:

npm run dev

Kết quả

Khi bạn điền vào form và gửi, vee-validate sẽ kiểm tra tính hợp lệ của các trường và hiển thị thông báo lỗi nếu cần.

Nếu bạn có bất kỳ câu hỏi nào khác, hãy cho tôi biết!