Vue 3 表单验证神器！vue-uform 让你的表单开发效率提升 10 倍

简介

vue-uform 是一个基于 Vue 3 的表单验证组件库，专为构建灵活、可定制的表单而设计。它提供了强大的验证功能、灵活的布局方案和与多种 UI 组件库的兼容性。

主要特性

完全可定制的布局：可自定义标签、输入框、帮助信息、验证消息等元素的布局
兼容多种 UI 组件库：支持传统输入框以及第三方 UI 库的输入组件（如 Naive UI、Element UI）
全局应用布局：通过 scheme 属性在 u-form 组件中统一设置所有表单字段的布局
内置和自定义验证规则：支持常用的内置验证规则，并允许使用自定义验证规则
Vue 3 原生支持：基于 Vue 3 的 Composition API 构建

解决痛点

传统的表单组件通常需要固定布局结构，很难灵活适配不同的 UI 设计需求。vue-uform 通过提供完全可定制的布局方案，让你可以轻松实现任何形式的表单布局，同时保持验证逻辑的清晰和易维护。

快速开始

安装

pnpm add vue-uform

引入

在 Vue 项目中引入并注册 vue-uform：

import { createApp } from "vue";
import App from "./App.vue";
import { plugin as VueuForm } from "vue-uform";

const app = createApp(App);
app.use(VueUform);
app.mount("#app");

基础使用

<script setup>
  const formValues = {
    username: "",
    password: "",
  };

  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>
    <!-- 自定义提交按钮 -->
    <u-submit custom v-slot="{ submit }">
      <button type="button" :style="{ color: 'blue' }" @click="submit">
        Login
      </button>
    </u-submit>
  </u-form>
</template>

组件介绍

u-form 组件

u-form 组件是表单的容器，用于管理表单的值和验证状态。它接受以下属性：

values：表单的初始值对象
submit：提交表单时触发的回调函数
scheme：全局应用布局的配置对象

<script setup>
  const formValues = {
    username: "",
  };

  const myScheme = (arg) => {
    return h("div", { class: "myscheme-field" }, [
      h("label", { class: "myscheme-label" }, arg.label),
      h("div", { class: "myscheme-input" }, [arg.slot()]),
      arg.help ? h("div", { class: "myscheme-help" }, arg.help) : null,
      arg.messages.value && arg.messages.value.length
        ? h(
            "ul",
            { class: "myscheme-messages" },
            arg.messages.value.map((e: string) => h("li", e))
          )
        : null,
    ]);
  };
</script>

<template>
  <u-form :values="formValues" :scheme="myScheme" @submit="handleSubmit">
    <u-field name="username" v-slot="{ value, update }">
      <input f-model />
    </u-field>
  </u-form>
</template>

u-field 组件

u-field 组件用于定义表单字段，它接受以下属性：

name：字段的名称，用于绑定表单值和验证规则
label：字段的标签文本
help：字段的帮助信息
validation：字段的验证规则，可以是字符串或数组
validation-messages：使用对象自定义验证消息
rules：添加自定义验证规则
custom：是否自定义字段渲染内容
scheme：使用 Vue 的 h 函数组装 HTML 元素，允许在表单字段之间重用 HTML 结构。

<template>
  <u-field
    name="username"
    label="Username"
    help="Please input your username"
    validation="required"
    v-slot="{ value, update }"
  >
    <input :value="value" @input="($event) => update($event.target.value)" />
    <!-- or -->
    <input f-model />
  </u-field>
</template>

u-submit 组件

u-submit 组件用于定义表单的提交按钮，它接受以下属性：

custom：是否自定义按钮的渲染内容
slot：自定义按钮的渲染内容

<template>
  <u-submit>提交按钮</u-submit>
  <u-submit custom v-slot="{ submit }">
    <button type="button" :style="{ color: 'blue' }" @click="submit">
      自定义提交按钮
    </button>
  </u-submit>
</template>

u-reset 组件

u-reset 组件用于定义表单的重置按钮，它接受以下属性：

custom：是否自定义按钮的渲染内容
slot：自定义按钮的渲染内容

<template>
  <u-reset>重置按钮</u-reset>
  <u-reset custom v-slot="{ reset }">
    <button type="button" @click="reset">自定义重置按钮</button>
  </u-reset>
</template>

u-field-array 组件

u-field-array 组件用于定义数组类型的表单字段。

u-form 和一样 u-field，u-field-array也支持 scheme 配置。
优先级顺序为：

自定义属性 > u-field 的方案 > u-field-array 的方案 > u-form 的方案 > 默认配置。

数组验证

<script setup lang="ts">
  import { ref } from "vue";

  let formValues: { name: string[] } = {
    name: ["foo", "bar", "foobar"],
  };

  function onSave(data: {}) {
    alert(JSON.stringify(data, null, 2));
  }
</script>

<template>
  <u-form :values="formValues" @submit="onSave">
    <u-field-array name="name" v-slot="{ fields, remove, push }">
      <div v-for="(field, key) in fields" :key="key">
        <u-field
          :name="`name[${key}]`"
          :label="`Name #${key + 1}`"
          v-slot="{ value, update }"
        >
          <input f-model />

          <button type="button" @click="remove(key)">Remove Item</button>
        </u-field>
      </div>

      <button type="button" @click="push('abc')">Add Item</button>
    </u-field-array>

    <u-submit />
  </u-form>
</template>

对象验证

<script setup lang="ts">
  function onSave(data: {}) {
    alert(JSON.stringify(data, null, 2));
  }

  let formValues2: { address: { city: string }[] } = {
    address: [{ city: "shenzhen" }, { city: "qingdao" }],
  };
</script>

<template>
  <u-form :values="formValues2" @submit="onSave">
    <u-field-array name="address" v-slot="{ fields, remove, push }">
      <div v-for="(field, key) in fields" :key="key">
        <u-field
          :name="`address[${key}].city`"
          :label="`City #${key + 1}`"
          v-slot="{ value, update }"
        >
          <input f-model />
          <button type="button" @click="remove(key)">Remove Item</button>
        </u-field>
      </div>
      <button type="button" @click="push({ city: 'jinan' })">Add Item</button>
    </u-field-array>
    <u-submit />
  </u-form>
</template>

验证

validation 属性支持以下验证规则：

required：字段值不能为空。空字符串（””)、null、undefined 和空数组均被视为无效值。
number：该值必须是数字或可以解析为数字的字符串。
confirm：该值必须与另一个字段的值匹配（通常用于密码确认）。 validation=”confirm:password”
accepted：该字段值必须为 true、“yes”、“on”或“1”（通常用于条款和条件复选框）。
alpha：该值只能包含字母字符（AZ、az）。
alphanumeric：该值只能包含字母和数字。
between：该值必须介于指定的最小值和最大值之间（数值范围）。 validation=”between:18,65″
email：该值必须是一个有效的电子邮件地址。
ends_with：该值必须以指定的子字符串之一结尾。 validation=”ends_with:.com,.org”
is：该值必须等于（==）指定值。 validation=”is:FREE100″
length：该值必须具有指定的长度。 validation=”length:6,10″
lowercase：该值必须全部为小写字母。
max：该值不得大于指定的最大数值。 validation=”max:100″
min：该值不得小于指定的最小值（数值）。 validation=”min:6″
not：该值不得等于任何指定的值。 validation=”not:admin,root”
starts_with：该值必须以指定的子字符串之一开头。 validation=”starts_with:+86,+1″
uppercase：该值必须全部为大写字母。
url：该值必须是一个有效的 URL。

总结

vue-uform 是一个功能强大且灵活的表单验证组件库，它提供了：

完全可定制的布局：通过 scheme 属性实现任意布局结构
强大的验证功能：内置多种验证规则，支持自定义和异步验证
良好的兼容性：可以与各种 UI 组件库无缝集成
清晰的 API 设计：易于理解和使用的组件接口

原文链接：https://code.ifrontend.net/archives/1481，转载请注明出处。

简介

主要特性

解决痛点

快速开始

安装

引入

基础使用

组件介绍

u-form 组件

u-field 组件

u-submit 组件

u-reset 组件

u-field-array 组件

数组验证

对象验证

验证

总结

评论0

在线客服

升级VIP

全屏浏览

夜间模式

返回顶部

Vue 3 表单验证神器！vue-uform 让你的表单开发效率提升 10 倍

简介

主要特性

解决痛点

快速开始

安装

引入

基础使用

组件介绍

u-form 组件

u-field 组件

u-submit 组件

u-reset 组件

u-field-array 组件

数组验证

对象验证

验证

总结

猜你喜欢

Vue文本高亮神器！vue-highlight-words让你的搜索功能瞬间升级，前端开发必备技能！

重磅推荐！这个CSS转换工具让原子化CSS迁移效率提升200%，被尤雨溪点赞

2025最强拼音库pinyin.js使用攻略：多音字与分词一站式搞定

从播放器到编辑器：wavesurfer.js 打造高颜值音频可视化与交互

TresJS v5 震撼发布！让 Vue 开发者轻松玩转 3D 世界

Tweakpane 提速你的图形项目：实时参数调优 + 监控面板全攻略

评论0

在线客服

升级VIP

全屏浏览

夜间模式

返回顶部