javascript Vue 3中的密码验证无法正常工作

kknvjkwl  于 2022-11-20  发布在  Java
关注(0)|答案(2)|浏览(198)

使用Vue 3制作一个网站的注册表。我有一个方法,获取密码和密码确认字段的值,并进行比较。如果它们是真的-什么都不会发生,否则-一个红色标 checkout 现,提交按钮被禁用。我已经在Vue 3中实现了这一点。但当密码相等时,它不工作,但有时当他们不相等时,它显示他们是。

<template>
    <div>
        <label for="password">Пароль</label>
        <input type="text" v-model="password" name="password" id="password" placeholder="••••••••" required="">
    </div>
    <div>
        <label for="confirm-password">Подтвердите Пароль</label>
        <input @keydown="confirmPassword" type="confirm-password" v-model="confirm" name="confirm-password" id="confirm-password" placeholder="••••••••" required="">
        <label for="confirm-password" v-if="invalidPasswords">Пароли не совпадают</label>
    </div>
    <button :disabled="submitDisabled" type="submit">Создать аккаунт</button>
</template>

<script>
    export default {
        name: "RegistrationView",
            data () {
              return {
                ...
                password: '',
                confirm: '',
                invalidPasswords: false,
                submitDisabled: false,
              }
          },
          methods: {
            confirmPassword() {
              if (this.password !== this.confirm){
                this.invalidPasswords = true
                this.submitDisabled = true
              } else {
                this.invalidPasswords = false
                this.submitDisabled = false
              }
            },
        },
    }
</script>

截图:https://i.stack.imgur.com/3eOB1.pnghttps://i.stack.imgur.com/ein5h.pnghttps://i.stack.imgur.com/ein5h.png

ehxuflar

ehxuflar1#

只需将@keydown事件更改为@input

<input @input="confirmPassword" type="confirm-password" v-model="confirm" name="confirm-password" id="confirm-password" placeholder="••••••••" required="">
6ojccjat

6ojccjat2#

您可以在确认密码中使用@keyup或@input来代替@keydown:

<input @keyup="confirmPassword" type="confirm-password" v-model="confirm" name="confirm-password" id="confirm-password" placeholder="••••••••" required="">

<input @input="confirmPassword" type="confirm-password" v-model="confirm" name="confirm-password" id="confirm-password" placeholder="••••••••" required="">

两者都工作正常。

相关问题