在Vuejs中Vuelidate密码和确认密码?

在Vuejs中Vuelidate密码和确认密码

关注

发信

关注(28)粉丝(399)

本文介绍了在Vuejs中Vuelidate密码和确认密码?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

导出默认{name: "你好世界",数据:函数(){返回 {isHidden:假，isWelcome: 假,isFadeout: 假，}}<div v-if="!isHidden">//screen1的一些代码<button v-on:click="isHidden = true">你好</button>

<div v-else-if="isHidden && !isFadeout">//屏幕2的一些代码<button v-on:click="isFadeout = true">嗨</按钮>

<div v-else-if="isFadeout && isHidden && !isWelcome">

<button v-on:click="isWelcome = user.confirmPassword.length >= 8">提交</按钮>

<div v-else-if="isWelcome">//屏幕4的一些代码<按钮>精细</按钮>

问题是，最初如果我点击 screen3 中的提交按钮，验证工作正常，但在密码确认字段中，如果我输入的密码不匹配，但超过 8 个字符.它正在重定向到第四个屏幕.但我想要做的是，如果密码与确认密码字段匹配，则只需要重定向到第 4 个屏幕.

解决方案

尝试以下步骤将帮助您解决问题.

第 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模板

 <div><form @submit.prevent="submitRegistration";没有验证><div class="form-group"><div class="form-group"><div v-if="this.submitted &&$v.user.email.$error"类=无效反馈左"><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"><span v-if="!$v.user.password.required">需要密码</span><span v-if="user.password &&!$v.user.password.minLength">密码必须至少为 6 个字符</span>

<div class="form-group"><span v-if="!$v.user.confirmPassword.required">需要确认密码</span><span v-if="user.confirmPassword &&!$v.user.confirmPassword.sameAsPassword>密码和确认密码应该匹配</span>

</模板>

第 6 步:在表单有效之前禁用按钮

created () {this.submitted = 真返回 this.$v.$touch()},计算:{被禁用 () {返回 this.$v.$invalid}},

演示

export default {
  name: "HelloWworld",

  data: function () {
    return {

      isHidden: false,
      isWelcome: false,
      isFadeout: false,

      }
      }

<div  v-if="!isHidden">
 //some code for screen1

  <button v-on:click="isHidden = true"> HELLO</button>
  </div>

   <div  v-else-if="isHidden && !isFadeout">
 //some code for screen 2

  <button v-on:click="isFadeout = true"> Hi</button>
  </div>

   <div  v-else-if="isFadeout && isHidden && !isWelcome">
 <input
            :type="passwordFieldType"
            v-model="user.password"
            id="password"
            name="password"
            class="input-section-three"
            :class="{ 'is-invalid': submitted && $v.user.password.$error }"
            placeholder="Enter new password"
            :maxlength="maxpassword"
            v-on:keypress="isPassword($event)"
          />

<div
            v-if="submitted && $v.user.password.$error"
            class="invalid-feedback-two"
          >
            <span v-if="!$v.user.password.required">Password is required</span>
            <span v-if="!$v.user.password.minLength"
              >Minimum 8 character with
                        alphanumeric along with 1 capital letter, 1 small letter
                        and 1 special character at least</span
            >
          </div>

   <input
            :type="passwordFieldTypetwo"
            v-model="user.confirmPassword"
            id="confirmPassword"
            name="confirmPassword"
            class="input-section-three"
            :class="{
              'is-invalid': submitted && $v.user.confirmPassword.$error
            }"
            placeholder="Confirm password"
            :maxlength="maxconfirmpassword"
            v-on:keypress="isconfirmPassword($event)"
            :disabled="user.password.length < 8"
          />
           <div
            v-if="submitted && $v.user.confirmPassword.$error"
            class="invalid-feedback-two"
          >
            <span v-if="!$v.user.confirmPassword.required"
              >Confirm Password is required</span
            >
            <span v-else-if="!$v.user.confirmPassword.sameAsPassword"
              >Password must match</span
            >
          </div>

 <button             v-on:click="isWelcome = user.confirmPassword.length >= 8"
 > SUBMIT </button>
  </div>

   <div  v-else-if="isWelcome">
 //some code for screen 4

  <button>Fine</button>
  </div>

The issue is, Initially if i click on submit button in screen3, validations are working fine but in the password confirmation field if i enter password which is not matching, but if exceed 8 characters. it is redirecting to 4th screen. But what i am trying to do is if password is matching with confirm password field then only need to redirect to 4th screen.

解决方案

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: Import required, 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
  }
},

DEMO

这篇关于在Vuejs中Vuelidate密码和确认密码?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-04 06:33