本文介绍了验证在 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、sameAs

import { 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模板

 

第 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 中有问题的电子邮件地址?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

10-23 22:53