Javascript 验证vuejs中存在问题的电子邮件地址?
Javascript 验证vuejs中存在问题的电子邮件地址?,javascript,vue.js,Javascript,Vue.js,继续 尝试以下步骤,它将帮助您解决问题 步骤1:使用npm安装--save vuelidate安装vuelidate 步骤2:在main.js import Vuelidate from 'vuelidate' Vue.use(Vuelidate) 步骤3:从vuelidate/lib/validators导入required、email、minLength、sameAs import { required, email, minLength, sameAs } from 'vuelidate
继续
尝试以下步骤,它将帮助您解决问题
步骤1:使用npm安装--save vuelidate安装vuelidate
步骤2:在main.js
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)
步骤3:从vuelidate/lib/validators导入required、email、minLength、sameAs
import { required, email, minLength, sameAs } from 'vuelidate/lib/validators'
步骤4:添加验证
validations: {
user: {
name: { required },
email: { required, email },
password: { required, minLength: minLength(6) },
confirmPassword: { required, sameAsPassword: sameAs('password') }
}
},
步骤4:单击按钮进行验证
methods: {
submitRegistration () {
this.submitted = true
this.$v.$touch()
if (this.$v.$invalid) {
return false // stop here if form is invalid
} else {
alert('Form Valid')
}
}
}
步骤5:设计html模板
<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>
您可以参考演示是否可以签出vuelidate电子邮件地址的链接,必填项,最小长度,请不要发布重复的问题以获取更多答案。还有其他方法可以引起你的注意,包括发布悬赏。谢谢,我试过了,但我上面代码的问题是我已经禁用了按钮。在computed属性中,我需要为isDisabled设置条件,以检查@symbol.com因为现在我在isDisabled中有条件“(this.email@taneerudhanjay我更新了我的答案。按钮被禁用,直到表单有效。@taneerudhanjay为演示我创建了codesandbox。希望它能帮助您。
created () {
this.submitted = true
return this.$v.$touch()
},
computed: {
isDisabled () {
return this.$v.$invalid
}
},