javascript - 如何在 vuejs 中验证电子邮件？

Question

这个问题在这里已经有了答案:





Validate email address having issue in vuejs?

(1 个回答)


6 个月前关闭。




regex rule for email validation is not working in vuejs

<div class="input-wrapper">
<div class="email-icon"></div>

<input type="email"  v-model.trim="$v.email.$model"
 v-validate="'required'"
:class="{ 'is-invalid': validationStatus($v.email) }"
 name="email" class=" input-section" 
placeholder="Enter your company email ID"
:maxlength="maxemail"
v-on:keypress="validEmail($event)"
 id='email'  v-model='email' />
 
<div v-if="!$v.email.required" class="invalid-feedback">
The email field is required.</div>
                 
<div v-if="!$v.email.maxLength" class="invalid-feedback-register">
 30 characters only  {{ $v.user.password.$params.maxLength.min }} </div>
</div>

我试着用 regex rule for email validation is not working in vuejs 检查但无法解决问题。
我希望电子邮件强制检查域名，例如:- abc@gmail.com，
尝试进行一个按键事件，我无法通过链接中给出的正则表达式

Answer 1

我总是用 Vuelidate .简单易行。
你可以做 maxlength 等等!此外，您甚至可以检查 Vue Devtools 中哪些部分是“脏的”!
示例代码:

<template>
   <input required="required" v-model="email" :error-messages="emailErrors"
   @input="$v.email.$touch()" @blur="$v.email.$touch()" label="Email*"
   prepend-icon="mdi-email"></input>
</template>

<script>
import { validationMixin } from 'vuelidate'
import { required, email, ... } from 'vuelidate/lib/validators'
import { mapActions } from "vuex";
export default {

mixins: [validationMixin],
validations: {
    ...,
    email: { required, email },
    ...
},
data: () => ({ email: '', ... })
computed: {
    emailErrors () {
        const errors = []
        if (!this.$v.email.$dirty) return errors
        !this.$v.email.email && errors.push('Must be valid e-mail')
        !this.$v.email.required && errors.push('E-mail is required')
        return errors
    },
}