Пароль Vuelidate и подтверждение пароля в Vuejs?

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>

Проблема в том, что изначально, если я нажимаю кнопку отправки на экране 3, проверки работают нормально, но в поле подтверждения пароля, если я ввожу пароль, который не совпадает, но превышает 8 символов. он перенаправляется на 4-й экран. Но я пытаюсь сделать, если пароль совпадает с полем подтверждения пароля, тогда нужно только перенаправить на 4-й экран.


vue.js vuelidate
person taneeru dhanunjay    schedule 28.02.2021    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Попробуйте следующие шаги, это поможет вам решить проблему.

Шаг 1. Установите vuelidate, используя npm install --save vuelidate

Шаг 2. Зарегистрируйте vuelidate в main.js

import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

Шаг 3. Импортируйте required, email, minLength, sameAs из vuelidate/lib/validators

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>

Шаг 6: кнопка отключена до тех пор, пока форма не станет действительной

created () {
  this.submitted = true
  return this.$v.$touch()
},
computed: {
  isDisabled () {
    return this.$v.$invalid
  }
},

ДЕМО

person Jebasuthan    schedule 17.03.2021