[英]Email validation in Vue.js
I have been working with Vue for 24 hours now, so forgive the ignorance.我已经使用 Vue 工作了 24 小时,所以请原谅我的无知。 I have searched around and I'm getting close, but I'm sure it's my lack of understanding and basic principles.
我已经四处寻找,我已经接近了,但我确信这是我缺乏理解和基本原则。
I have a modal that opens when a button is clicked.我有一个在单击按钮时打开的模式。 This modal displays a form with an email input.
此模式显示带有 email 输入的表单。 I managed to get the modal working, but nothing happens when I type in an incorrect email.
我设法让模态正常工作,但是当我输入不正确的 email 时没有任何反应。
Here's my code for the component:这是我的组件代码:
<template>
<div>
<!-- Aside -->
<aside class="aside">
<button class="aside__btn button" @click="showModal = true">
Send Me The Tips
</button>
</aside>
<!-- Modal -->
<div class="modal" v-if="showModal">
<div class="modal-container">
<a href="#" class="close" @click="showModal = false"></a>
<p class="modal__steps">Step 1 of 2</p>
<div class="relative">
<hr class="modal__divider" />
</div>
<div class="modal__heading-container">
<p class="modal__heading">Email Your Eail To Get <span class="modal__heading-span">Free</span>
</p>
<p class="modal__heading">iPhone Photography Email Tips:</p>
</div>
<form>
<input for="email" type="email" placeholder="Please enter your email here" required v-model="email">
<span class="floating-placeholder" v-if="msg.email">{{msg.email}}</span>
<!-- <span class="floating-placeholder">Please enter your email here</span> -->
<button class="modal__button button">Send Me The Tips</button>
</form>
</div>
</div>
</div>
</template>
<script>
export default ({
data () {
return {
showModal: false,
email: '',
msg: [],
}
},
watch: {
email(value) {
// binding this to the data value in the email input
this.email = value;
this.validateEmail(value);
}
},
methods: {
validateEmail(value){
if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(value))
{
this.msg['email'] = '';
} else{
this.msg['email'] = 'Please enter a valid email address';
}
}
}
})
</script>
I'm using Laravel if that's of importance.如果这很重要,我正在使用 Laravel。
I would delete the watch and add an event listener on blur like so:我会删除手表并在模糊上添加一个事件侦听器,如下所示:
<input for="email" type="email" placeholder="Please enter your email here" required v-model="email" @blur="validateEmail" >
and update the validateEmail method like so:并像这样更新 validateEmail 方法:
validateEmail() {
if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(this.email)) {
this.msg['email'] = 'Please enter a valid email address';
} else {
this.msg['email'] = '';
}
}
You could also change the event listener to change @change
if it serves your needs better.如果它更好地满足您的需求,您还可以更改事件侦听器以更改
@change
。
You could also checkout Vuelidate which handles form validation.您还可以查看处理表单验证的 Vuelidate。 For example:
例如:
<template>
<div>
<input
class="rounded shadow-sm border border-warning"
v-model="form.email"
placeholder="E-mail"
@input="$v.form.email.$touch"
:state="$v.form.email.$dirty ? !$v.form.email.$error : null" />
</div>
</template>
<script>
import {required, email} from "vuelidate/lib/validators";
export default {
data() {
return {
form: {
email: null,
}
};
},
validations: {
form: {
email: {
required,
email
}
}
},
};
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.