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

验证电子邮件

关注

发信

关注(28)粉丝(399)

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

本文介绍了无法在 Vue3 中使用 Vuelidate 验证电子邮件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

import { createApp } from 'vue'从 'vuelidate' 导入 Vuelidate从'./App.vue'导入应用程序导入'./registerServiceWorker'从'./router'导入路由器从./store"导入商店导入'materialize-css/dist/js/materialize.min'createApp(App).use(store).use(router).use(Vuelidate).mount('#app')

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

<form class="card auth-card";@submit.prevent="onSubmit"><div class="card-content"><span class="card-title">示例</span><div class="input-field">

<div class="card-action"><div><按钮class =btn wave-effect wave-light auth-submit"；类型=提交">输入登录<i class="material-icons right">发送</i>

</表单></模板><脚本>从@vuelidate/validators"导入 { email, required, minLength }从@vuelidate/core"导入 useVuelidate导出默认{name: '登录',设置 () {返回 { v$: useVuelidate() }},数据:() =>({电子邮件: ''，密码: ''}),验证:{电子邮件:{电子邮件，必填}，密码:{ 必需，minLength:minLength(6) }},方法: {提交(){如果 (this.$v.$invalid) {this.$v.$touch()返回}this.$router.push('/')}}}

然后我尝试使用 npm run serve 运行所有这些，但没有成功.Chrome DeveloperTools 通知我Uncaught (in promise) TypeError: Cannot read property 'super' of undefined".

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

莉迪亚

解决方案

第一步:在组件内部导入useVuelidate

从@vuelidate/core"导入useVuelidate；从@vuelidate/validators"导入 { email, required, minLength };

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

setup() {返回 { v$: useVuelidate() };},

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

data() {返回 {电子邮件: ''，密码: ''};},

第 4 步: 添加 validations 规则

validations() {返回 {电子邮件:{电子邮件，必填}，密码:{ 必需，minLength:minLength(6) }};},

第五步:添加表单submit方法

方法:{提交:函数(){this.v$.$touch();如果(this.v$.$error)返回；alert('表格有效')}}

第 6 步: HTML template 设计如下，

<div class="card-content"><span class="card-title">示例</span><div class="input-field"><label for="email">Email <span class="required">*</span></label><input id="email";类型=文本"v-model.trim=电子邮件"><small class="error";v-for=(error, index) of v$.email.$errors"；:key=索引">{{ capitalizeFirstLetter(error.$property) }} {{error.$message}}</小>

<div class="input-field"><label for="email">密码<span class="required">*</span></label><input id="email";类型=文本"v-model.trim="密码"><small class="error";v-for=(error, index) of v$.password.$errors"；:key=索引">{{ capitalizeFirstLetter(error.$property) }} {{error.$message}}</小>

<div class="card-action"><div><button class="btn wave-effect wave-light auth-submit";类型=提交">Enter-login<i class="material-icons right">send</i>

</表单></模板>

演示

I'm trying to use validation option in a form. The app is developing under Vue3.I have installed npm install @vuelidate/core @vuelidate/validator into project folder. In a file main.js I have been trying to add Vuelidate as following:

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')

Next I am working on Login.vue file as following

<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>

Then I try to run all that with npm run serve but with no success. Chrome DeveloperTools inform me about "Uncaught (in promise) TypeError: Cannot read property 'super' of undefined".

What did I do wrong? Is it possible to use Vue3 and Vuelidate together?

Lidia

解决方案

Step 1: Import useVuelidate inside component

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

Step 2: Initalize useVuelidate inside component

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

Step 3: Initalize your modal data

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

Step 4: Add validations rule

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

Step 5: Add form submit method

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

Step 6: HTML template design will be like,

<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 验证电子邮件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-04 06:33