/ / Cách xây dựng các biểu mẫu có thể tái sử dụng trong Vue3 với FormKit

Cách xây dựng các biểu mẫu có thể tái sử dụng trong Vue3 với FormKit

Biểu mẫu là cổng để người dùng tương tác với ứng dụng của bạn và cung cấp dữ liệu cần thiết cho các tác vụ như tạo tài khoản, xử lý thanh toán và thu thập thông tin. Tuy nhiên, việc xây dựng các biểu mẫu có thể là một nhiệm vụ khó khăn, đòi hỏi mã soạn sẵn rộng rãi, tốn nhiều thời gian và dễ bị lỗi.


FormKit cung cấp một giải pháp bằng cách cung cấp các thành phần dựng sẵn giúp loại bỏ nhu cầu về mã soạn sẵn. Đây là cách sử dụng nó.


FormKit là gì?

FormKit là một khung xây dựng biểu mẫu mã nguồn mở được phát triển dành riêng cho Vue 3, được thiết kế để đơn giản hóa quy trình tạo biểu mẫu chất lượng cao, sẵn sàng sản xuất. Đây là phiên bản nâng cao của thư viện Vue Formulate phổ biến và cung cấp hơn 25 tùy chọn đầu vào có thể tùy chỉnh và có thể truy cập, cùng với một bộ quy tắc xác thực được xác định trước.

FormKit cũng cung cấp khả năng tạo biểu mẫu thông qua các lược đồ động tương thích với JSON, giúp dễ dàng tạo các biểu mẫu phức tạp một cách nhanh chóng. Ngoài ra, FormKit có một cộng đồng tích cực trên Discord, cung cấp hỗ trợ và thúc đẩy sự cộng tác giữa những người dùng. Với các tính năng và hệ thống hỗ trợ toàn diện, FormKit là một công cụ đáng tin cậy và hiệu quả dành cho các nhà phát triển muốn xây dựng biểu mẫu cho các dự án Vue 3 của họ.

Các tính năng của Khung FormKit

Bạn sẽ tìm thấy nhiều lựa chọn tính năng tạo biểu mẫu trong FormKit.

1. API thành phần đơn

Một trong những tính năng thú vị của FormKit là API một thành phần của nó: thành phần. Nó cung cấp cho bạn quyền truy cập vào tất cả các loại đầu vào. Điều này cho phép truy cập trực tiếp và dễ dàng vào việc tạo các phần tử biểu mẫu thay vì phải sử dụng các phần tử HTML gốc.

2. Quy tắc xác thực được xác định trước

Formkit đơn giản hóa việc xử lý xác thực biểu mẫu bằng cách cho phép bạn áp dụng trực tiếp một bộ quy tắc cho đầu vào bằng cách sử dụng chỗ dựa xác thực. Nó có hơn 30 quy tắc được xác định trước khác nhau mà bạn có thể chọn tùy theo sở thích của mình. Ngoài ra, bạn có thể tạo các quy tắc tùy chỉnh được đăng ký trên toàn cầu hoặc cụ thể trên đầu vào cho các hạn chế phức tạp.

3. Tùy chọn kiểu dáng có thể tùy chỉnh

FormKit không có tùy chọn kiểu dáng mặc định nhưng có chủ đề cơ sở tùy chọn – Genesis. Bạn cần phải cài đặt này một cách riêng biệt.

Bằng cách cài đặt đầu tiên @formkit/theme bưu kiện.

 npm install @formkit/themes 

Sau đó nhập nó vào dự án của bạn

 import '@formkit/themes/genesis' 

Các tùy chọn tạo kiểu khác bao gồm việc sử dụng các lớp tùy chỉnh cho phép bạn áp dụng các kiểu và lớp của riêng mình cho đánh dấu được cung cấp của FormKit.

4. Tạo lược đồ

Tạo lược đồ của FormKit là một tính năng tuyệt vời giúp đơn giản hóa quá trình tạo các trường biểu mẫu. Lược đồ là một mảng các đối tượng, với mỗi đối tượng đại diện cho một phần tử HTML và bạn chỉ có thể biểu thị ở định dạng JSON.

Mảng lược đồ bao gồm các đối tượng nút FormKit tương ứng với các phần tử khác nhau, chẳng hạn như các phần tử HTML, thành phần hoặc nút văn bản. Các đối tượng này có thể tham chiếu các biến Vue có sẵn và hiển thị bất kỳ đánh dấu hoặc thành phần nào với các thuộc tính và đạo cụ có thể chỉnh sửa, làm cho nó trở thành một phương pháp hiệu quả để xây dựng và tùy chỉnh biểu mẫu. Theo mặc định, nó không được đăng ký trên toàn cầu, vì vậy bạn cần nhập nó.

 import { FormKitSchema } from '@formkit/vue' 

Tích hợp FormKit trong Vue3

Để bắt đầu sử dụng FormKit trong ứng dụng Vue 3, trước tiên, hãy cài đặt nó trong dự án của bạn. Phần này sẽ liên quan đến bản demo sử dụng ứng dụng vue mới từ đầu.

Điều kiện tiên quyết để sử dụng FormKit

Trước khi bắt đầu, hãy chắc chắn rằng bạn có những điều sau đây:

Khi bạn đã bắt kịp tốc độ, bạn đã sẵn sàng tạo ứng dụng đầu tiên của mình.

Tạo một ứng dụng Vue mới

Trước tiên, hãy chạy lệnh bên dưới trong thiết bị đầu cuối của bạn để khởi tạo ứng dụng Vue mới:

 npm init vue@latest  

Sau đó làm theo các bước được chỉ định trong lời nhắc tùy theo sở thích của bạn. Sau khi dự án đã được cài đặt hoàn chỉnh, hãy tiến hành cài đặt FormKit trong ứng dụng.

 npm install @formkit/vue  

Tiếp theo, trong chính.js tài liệu.

 import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { plugin, defaultConfig } from "@formkit/vue";
import "@formkit/themes/genesis";
createApp(App).use(plugin, defaultConfig).mount('#app')

Gói @formkit/vue đi kèm với plugin Vue và thiết lập được định cấu hình mặc định để cài đặt liền mạch. Khi bạn đã hoàn tất thiết lập, bạn đã sẵn sàng kết hợp thành phần vào ứng dụng Vue 3 của bạn. Ngoài ra, bạn có thể thêm thiết lập cho chủ đề Genesis như đã nêu trước đó.

Tạo biểu mẫu có thể tái sử dụng với FormKit

Phần này trình bày cách sử dụng FormKit trong việc xây dựng một biểu mẫu chức năng và có thể tùy chỉnh bằng cách tạo một biểu mẫu đăng ký đơn giản.

Để có cấu trúc mã tốt hơn, bạn nên tạo một tệp riêng cho thành phần này: Đăng kýForm.vue

Đầu tiên, xác định phần tử đầu vào bằng định dạng này

 <FormKit
     type="text"
     label="First name"
     placeholder="Abiola"
     validation="required|length:4"
     help = "Enter a minimum of 4 characters"
<FormKit/>

Mã này cho biết cách sử dụng FormKit để tạo kiểu nhập văn bản bằng một loại văn bản. Prop xác thực phân tách các quy tắc bằng cách sử dụng ký hiệu ống “|”. Trợ giúp định vị một văn bản nhỏ ngay bên dưới phần tử đầu vào.

Ngoài ra, bạn có thể khám phá các loại đầu vào khác như các loại bên dưới.

 <FormKit
     type="text"
     label="Last name"
     placeholder="Esther"
     validation="required|length:4"
     help = "Enter a minimum of 4 characters"
   />
   <FormKit
     type="email"
     label="Email Address"
     prefix-icon="email"
     validation="required|email"
     placeholder="test@gmail.com"
   />
     <FormKit
       type="date"
       label="Date of Birth"
       help="Enter your birthday in the format- DD/MM/YYYY"
       validation="required"
     />

     <FormKit
       v-model="value"
       type="radio"
       label="Gender"
       :options="['Male', 'Female']"
       help="Select your gender"
     />
   <FormKit
   type="file"
   label="Upload your photo"
   accept=".jpg,.png,.jpeg"
   help="Select your image"
 />

Mã này cho biết cách sử dụng một số thành phần đầu vào khác và đặt quy tắc xác thực.

FormKit bao gồm một loại chống đỡ được gọi là “biểu mẫu” bao bọc tất cả các phần tử đầu vào. Nó theo dõi trạng thái xác thực của biểu mẫu và chặn người dùng gửi biểu mẫu nếu bất kỳ đầu vào nào không hợp lệ. Ngoài ra, nó sẽ tự động tạo một nút gửi.

  <FormKit
   type="form"
   form-class="outer-container"
   submit-label="Register"
   @submit="Register">

Kết hợp mọi thứ lại với nhau sẽ tạo thành biểu mẫu hoàn chỉnh, như trong hình bên dưới.

Đăng ký từ được tạo bằng Formkit-2

Tạo biểu mẫu bằng lược đồ của FormKit

Với các lược đồ JSON, có thể tạo các biểu mẫu tương tự như các phần tử đầu vào, như đã thực hiện trước đó. Để tạo biểu mẫu, chỉ cần cung cấp mảng lược đồ của bạn cho thành phần bằng cách sử dụng lược đồ chống đỡ.

Mảng lược đồ

      const schema = [
       {
         $formkit: "email",
         name: "email",
         label: "Email Address",
         placeholder: "Enter your email",
         validation: "required|email",
       },
       {
       $formkit: 'password',
       name: 'password',
       label: 'Password',
       validation: 'required|length:5,16'
     },
     {
       $formkit: 'password',
       name: 'password_confirm',
       label: 'Confirm password',
       validation: 'required|confirm',
       validationLabel: 'password confirmation',
     },
     ];

Sau đó, nó được chuyển đến chỗ dựa trong thành phần FormKit.

    <FormKit type="form" form-class="outer-container"submitlabel="Login">
       <FormKitSchema :schema="schema" />
</FormKit>

Đây là đầu ra được tạo cuối cùng:

Đăng nhập từ được tạo bằng Formkit Schema-1

Cách tiếp cận nhanh hơn để xây dựng biểu mẫu trong Vue3

FormKit cung cấp cách tiếp cận nhanh hơn và hiệu quả hơn để xây dựng biểu mẫu trong Vue 3. Với FormKit, bạn có thể loại bỏ nhu cầu tạo mẫu soạn sẵn từ đầu, cho phép bạn tập trung trực tiếp vào việc triển khai logic. Quá trình sắp xếp hợp lý này không chỉ tiết kiệm thời gian mà còn nâng cao năng suất.

Ngoài ra, FormKit cho phép hiển thị động các biểu mẫu thông qua hiển thị có điều kiện. Tính năng này cho phép bạn tạo các giao diện tương tác và thân thiện với người dùng, trong đó các thành phần biểu mẫu hiển thị hoặc ẩn dựa trên các điều kiện nhất định.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *