- 首页
- 其他开发
- 无法在 Vue3 中使用 Vuelidate 验证电子邮件
无法在 Vue3 中使用 Vuelidate 验证电子邮件
[英] Can't validate email with Vuelidate in Vue3
本文介绍了无法在 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"><输入id=电子邮件"类型=文本"v-model.trim="电子邮件":class="{无效: ($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">不能为空</small><small class="helper-text invalid";v-else-if="$v.email.$dirty &&!$v.email.email">格式不正确</small>
<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="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 验证电子邮件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
