GitHub -tu6ge/vue -uform: Verifikasi formulir berikutnya – Beragampengetahuan

Vue-Eform adalah perpustakaan verifikasi bentuk fleksibel yang tidak terhubung untuk Vue 3, dengan fokus pada desain yang digerakkan oleh komponen.

Perpustakaan Verifikasi Bentuk Vue generasi berikutnya. Perpustakaan memperlakukan komponen sebagai warga negara kelas satu. Semua fitur, termasuk transfer data dan verifikasi formal, berputar di sekitar komponen. Ini memiliki fungsi berikut:

• 🎨 Digunakan dengan Perpustakaan Komponen UI
• Layout Layout Kustom (Tag, Input, Informasi Bantuan, Pesan Verifikasi, dll.)
• 📦Worldwide Terapkan tata letak di semua bidang formulir
• 🔘 tombol kirim yang dapat disesuaikan
• ✨ Kode JS/TS minimal – sebagian besar logika tetap di komponen
• ✅ aturan verifikasi yang dibangun dan kustom

Ini adalah pengantar

1. Memasang

pnpm install vue-uform
pnpm install @vue-uform/vite-plugin -D

2. Konfigurasikan vite seperti ini:

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import uForm from "@vue-uform/vite-plugin";

export default defineConfig({
  plugins: [vue(), uForm()],
});

3. Instal Vue Plugin di Main.ts

import { plugin as VueuForm } from "vue-uform";

const app = createApp(App);

app.use(VueuForm).mount("#app");

4. Berikut adalah contoh sederhana:

<script setup>
// init form values
const formValues = {
  username: "",
  password: "",
};

// handler form submit event
function doLogin(data) {
  console.log(data);
}
</script>
<template>
  <u-form :values="formValues" @submit="doLogin">
    <u-field
      name="username"
      label="Username"
      validation="required"
      v-slot="{ value, update }"
    >
      <input f-model />
    </u-field>
    <u-field
      name="password"
      label="Password"
      validation="required"
      v-slot="{ value, update }"
    >
      <input type="password" f-model />
    </u-field>
    <u-submit>Login</u-submit>
    <!-- or -->
    <u-submit custom v-slot="{ submit }">
      <button :style="{ color: 'blue' }" @click="submit">Login</button>
    </u-submit>
  </u-form>
</template>

Untuk contoh lebih lanjut, silakan lihat dokumentasinya