无法在 Vue3 中使用 Vuelidate 验证电子邮件

Question

我正在尝试在表单中使用验证选项。该应用程序在 Vue3 下开发。我已经将 npm install @vuelidate/core @vuelidate/validator 安装到项目文件夹中。在文件 main.js 中，我一直在尝试添加 Vuelidate，如下所示：

import { createApp } from 'vue'
import Vuelidate from 'vuelidate'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import 'materialize-css/dist/js/materialize.min'
createApp(App).use(store).use(router).use(Vuelidate).mount('#app')

接下来我正在处理 Login.vue 文件，如下所示

<template>
    <form class="card auth-card" @submit.prevent="onSubmit">
    <div class="card-content">
        <span class="card-title">Example</span>
        <div class="input-field">
        <input
            id="email"
            type="text"
            v-model.trim="email"
            :class="{invalid: ($v.email.$dirty && !$v.email.required) || ($v.email.$dirty && !$v.email.email)}"
        >
        <label for="email">Email</label>
        <small class="helper-text invalid"
        v-if="$v.email.$dirty && !$v.email.required"
        >Could not be empty</small>
        <small class="helper-text invalid"
        v-else-if="$v.email.$dirty && !$v.email.email"
        >Incorrect form</small>
        </div>
    </div>
    <div class="card-action">
        <div>
        <button
            class="btn waves-effect waves-light auth-submit"
            type="submit">
             Enter-login
            <i class="material-icons right">send</i>
        </button>
        </div>
    </div>
    </form>
</template>

<script>
import { email, required, minLength } from '@vuelidate/validators'
import useVuelidate from '@vuelidate/core'

export default {
  name: 'login',
  setup () {
    return { v$: useVuelidate() }
  },
  data: () => ({
    email: '',
    password: ''
  }),
  validations: {
    email: { email, required },
    password: { required, minLength: minLength(6) } 
  },
  methods: {
    onSubmit () {
      if (this.$v.$invalid) {
        this.$v.$touch()
        return
      }
      this.$router.push('/') 
    }
  }
}
</script>

然后我尝试运行使用 npm 运行服务但没有成功。 Chrome DeveloperTools 通知我“未捕获（承诺）TypeError：无法读取未定义的属性 'super'”。

我做错了什么？ Vue3和Vuelidate可以一起使用吗？

莉迪亚

Answer 1

第 1 步： 在组件中导入 useVuelidate

import useVuelidate from "@vuelidate/core";
import { email, required, minLength } from "@vuelidate/validators";

第 2 步： 在组件内部初始化 useVuelidate

setup() {
    return { v$: useVuelidate() };
},

第 3 步：初始化您的 modal 数据

data() {
    return {
      email: '',
      password: ''
    };
},

第 4 步： 添加 validations 规则

validations() {
    return {
      email: { email, required },
      password: { required, minLength: minLength(6) }
    };
},

第 5 步： 添加表单 submit 方法

methods: {
  onSubmit: function() {
    this.v$.$touch();
    if (this.v$.$error) return;
    alert('Form is valid')
  }
}

第6步：HTMLtemplate设计会像，

<form class="card auth-card" @submit.prevent="onSubmit">
    <div class="card-content">
      <span class="card-title">Example</span>
      <div class="input-field">
        <label for="email">Email <span class="required">*</span></label>
        <input id="email" type="text" v-model.trim="email">
        <small class="error" v-for="(error, index) of v$.email.$errors" :key="index">
          {{ capitalizeFirstLetter(error.$property) }} {{error.$message}}
        </small>
      </div>
      <div class="input-field">
        <label for="email">Password <span class="required">*</span></label>
        <input id="email" type="text" v-model.trim="password">
        <small class="error" v-for="(error, index) of v$.password.$errors" :key="index">
          {{ capitalizeFirstLetter(error.$property) }} {{error.$message}}
        </small>
      </div>
    </div>
    <div class="card-action">
      <div>
        <button class="btn waves-effect waves-light auth-submit" type="submit"> Enter-login<i class="material-icons right">send</i>
        </button>
      </div>
    </div>
  </form>
</template>

DEMO

无法在 Vue3 中使用 Vuelidate 验证电子邮件

Can't validate email with Vuelidate in Vue3

vuejs3

vuelidate