使用Vue3和VeeValidate进行表单和表单验证

作者 : IT 大叔 本文共624个字,预计阅读时间需要2分钟 发布时间: 2020-09-22

总览

表单和表单验证是许多应用程序的关键部分,因此我想创建一个小示例应用程序,以显示一个基于VeeValidate模板的Vue.js验证库以及如何将其与新的Vue3版本集成。

由于许多阅读我的内容的人都知道我使用Ionic Framework,因此我已经使用Ionic Vue3 Web Components实现了该解决方案

其他例子

使用Vue3和VeeValidate进行表单和表单验证插图

设定初始值

<v-form v-slot="{ values }" 
   @submit="onSubmit" 
   :initialValues="formData">
</v-form>

在中script,使用适当的键/值对定义要分配给表单的对象

setup() {
  // set some initial values
  const formData = ref<any>({
    title: "Aaron",
    body: null,
    gender: "MALE",
    save : false
  });

  return { formData };
},

使用Toggle,复选框

<ion-item>
  <ion-label>SAVE IT</ion-label>
  <v-field name="save" v-slot="{ field }">
    <!-- we need to set the checked property -->
    <ion-toggle v-bind="field" name="save" 
       :checked="field.value">
    </ion-toggle>
  </v-field>
</ion-item>
免责声明:
1. 本站资源转自互联网,源码资源分享仅供交流学习,下载后切勿用于商业用途,否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议,可自由转载、引用,但需署名原版权作者且注明文章出处
3. 未登录无法下载,登录使用金币下载所有资源。
IT小站 » 使用Vue3和VeeValidate进行表单和表单验证

常见问题FAQ

没有金币/金币不足 怎么办?
本站已开通每日签到送金币,每日签到赠送五枚金币,金币可累积。
所有资源普通会员都能下载吗?
本站所有资源普通会员都可以下载,需要消耗金币下载的白金会员资源,通过每日签到,即可获取免费金币,金币可累积使用。

发表评论