- 首页
- 前端开发
- 验证在 vuejs 中有问题的电子邮件地址?
验证在 vuejs 中有问题的电子邮件地址?
[英] Validate email address having issue in vuejs?
本文介绍了验证在 vuejs 中有问题的电子邮件地址?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
email:'',最大电子邮件:30，验证状态:函数(验证){返回类型验证 != "undefined" ?验证.$错误:假；},计算:{已禁用:功能(){return (this.fullname <= this.max) ||(this.mobile.length < this.maxmobile)||(this.gstin.length < this.maxgstin) ||(this.email <= this.maxemail) ||!this.terms ||!(this.verified == true );}isEmail(e) {if (/^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/.test(value)){this.msg['email'] = '';} 别的{this.msg['email'] = '无效的电子邮件地址';}},
<div v-if="!$v.email.maxLength" class="invalid-feedback-register">仅 30 个字符{{ $v.user.password.$params.maxLength.min }}
目前我无法验证电子邮件地址，即使我输入 2 或 3 个字符按钮正在启用并移动到下一页.我想禁用按钮，直到用户输入有效的电子邮件地址.有人可以帮助我解决上述代码的问题.https://vuejsdevelopers.com/2018/08/27/vue-js-form-handling-vuelidate/
解决方案
尝试以下步骤将帮助您解决问题.
第 1 步:使用 npm install --save vuelidate
安装 vuelidate
第 2 步:在 main.js
中注册 vuelidate
从 'vuelidate' 导入 VuelidateVue.use(Vuelidate)
第 3 步:从 vuelidate/lib/validators
导入
required、email、minLength、sameAsimport { required, email, minLength, sameAs } from 'vuelidate/lib/validators'
第 4 步:添加验证
验证:{用户:{名称:{必填}，电子邮件:{必需，电子邮件}，密码:{ 需要，minLength:minLength(6) }，确认密码:{ 需要，sameAsPassword:sameAs('password') }}},
第 4 步:对按钮单击进行验证
方法:{提交注册(){this.submitted = 真this.$v.$touch()如果 (this.$v.$invalid) {return false//如果表单无效则停止} 别的 {alert('表格有效')}}}
第五步:设计html模板
<模板><div><form @submit.prevent="submitRegistration";没有验证><div class="form-group"><输入类型=文本"类=表单控制"占位符=名字"值="v-model="user.name"/><div v-if="this.submitted &&!$v.user.name.required"class="invalid-feedback left">输入用户名</div>
<div class="form-group"><输入类型=文本"类=表单控制"placeholder="输入您的公司电子邮件 ID";值="v-model=user.email"自动完成=关闭"/><div v-if="this.submitted &&$v.user.email.$error"class =无效反馈左"><span v-if="!$v.user.email.required">电子邮件是必需的</span><span v-if="user.email &&!$v.user.email.email">输入有效的电子邮件地址</span><span v-if="user.email &&$v.user.email.email &&!$v.user.email.maxLength">电子邮件仅允许 30 个字符</span>
<div class="form-group"><输入类型=密码"类=表单控制"占位符=输入密码"值="v-model="user.password";自动完成=关闭"/><div v-if="this.submitted &&$v.user.password.$error"class =无效反馈左"><span v-if="!$v.user.password.required">需要密码</span><span v-if="user.password &&!$v.user.password.minLength">密码必须至少为 6 个字符</span>
<div class="form-group"><输入类型=密码"类=表单控制"placeholder="确认密码";值="v-model="user.confirmPassword";自动完成=关闭"/><div v-if="this.submitted &&$v.user.confirmPassword.$error"class =无效反馈左"><span v-if="!$v.user.confirmPassword.required">需要确认密码</span><span v-if="user.confirmPassword &&!$v.user.confirmPassword.sameAsPassword>密码和确认密码应该匹配</span>
<输入类型=提交"类=btn注册"值=注册":disabled="this.isDisabled";/></表单>
第 6 步:在表单有效之前禁用按钮
created () {this.submitted = 真返回 this.$v.$touch()},计算:{被禁用 () {返回 this.$v.$invalid}},
你可以参考https://github.com/Jebasuthan/vue-vuex-vuelidate-i18n-registration-login-todo
<button type="submit"
class="register-button"
:class="(isDisabled) ? '' : 'selected'"
:disabled='isDisabled'
v-on:click=" isFirstScreen"
@click="persist" >
PROCEED
</button>
email:'',
maxemail:30,
validationStatus: function (validation) {
return typeof validation != "undefined" ? validation.$error : false;
},
computed: {
isDisabled: function(){
return (this.fullname <= this.max) || (this.mobile.length < this.maxmobile)
|| (this.gstin.length < this.maxgstin) ||
(this.email <= this.maxemail) || !this.terms || !(this.verified == true );
}
isEmail(e) {
if (/^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/.test(value))
{
this.msg['email'] = '';
} else{
this.msg['email'] = 'Invalid Email Address';
}
},
<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="isEmail($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>
Currently i am unable to validate the email address, even if i enter 2 or 3 characters button is enabling and moving to next page. I want to disable button until user enter valid email address.
Can some one help me on this, to solve the issue for the above code.
https://vuejsdevelopers.com/2018/08/27/vue-js-form-handling-vuelidate/
解决方案
Try below steps it will help you to fix the issue.
Step 1: Install vuelidate using npm install --save vuelidate
Step 2: Register vuelidate in main.js
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)
Step 3: Importrequired, email, minLength, sameAs from vuelidate/lib/validators
import { required, email, minLength, sameAs } from 'vuelidate/lib/validators'
Step 4: Add validations
validations: {
user: {
name: { required },
email: { required, email },
password: { required, minLength: minLength(6) },
confirmPassword: { required, sameAsPassword: sameAs('password') }
}
},
Step 4: Do the validation on button click
methods: {
submitRegistration () {
this.submitted = true
this.$v.$touch()
if (this.$v.$invalid) {
return false // stop here if form is invalid
} else {
alert('Form Valid')
}
}
}
Step 5: Design html template
<template>
<div>
<form @submit.prevent="submitRegistration" novalidate>
<div class="form-group">
<input type="text" class="form-control" placeholder="First Name" value="" v-model="user.name" />
<div v-if="this.submitted && !$v.user.name.required" class="invalid-feedback left">Enter Username</div>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter your company email ID" value="" v-model="user.email" autocomplete="off"/>
<div v-if="this.submitted && $v.user.email.$error" class="invalid-feedback left">
<span v-if="!$v.user.email.required">Email is required</span>
<span v-if="user.email && !$v.user.email.email">Enter valid email address</span>
<span v-if="user.email && $v.user.email.email && !$v.user.email.maxLength">Email is allowed only 30 characters</span>
</div>
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Enter Password" value="" v-model="user.password" autocomplete="off" />
<div v-if="this.submitted && $v.user.password.$error" class="invalid-feedback left">
<span v-if="!$v.user.password.required">Password is required</span>
<span v-if="user.password && !$v.user.password.minLength">Password must be minimum 6 characters</span>
</div>
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Confirm Password" value="" v-model="user.confirmPassword" autocomplete="off" />
<div v-if="this.submitted && $v.user.confirmPassword.$error" class="invalid-feedback left">
<span v-if="!$v.user.confirmPassword.required">Confirm Password is required</span>
<span v-if="user.confirmPassword && !$v.user.confirmPassword.sameAsPassword">Password and Confirm Password should match</span>
</div>
</div>
<input type="submit" class="btnRegister" value="Register" :disabled="this.isDisabled" />
</form>
</div>
</template>
Step 6: Button disabled till the form is valid
created () {
this.submitted = true
return this.$v.$touch()
},
computed: {
isDisabled () {
return this.$v.$invalid
}
},
You can refer for demo https://github.com/Jebasuthan/vue-vuex-vuelidate-i18n-registration-login-todo
这篇关于验证在 vuejs 中有问题的电子邮件地址?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
