Vuelidate密码验证始终无效

Question

这个问题真的让我吃了一惊。出于未知的原因(对我而言)，Vuelidate不会验证密码字段。不管你输入什么，它总是无效的，我不确定为什么。我尝试了不同的解决方案，但我总是返回密码无效。有人知道问题出在哪里吗？

下面是我使用的代码：

<template>
    <form
        @submit="checkForm"
        :action="this.action"
        method="post"
        novalidate="true"
    >
        <div class="app-form-wrapper mb-3 mb-md-0 pt-3 pb-1 py-md-0 rounded">
            <!-- Email address -->
            <div
                class="form-group mb-3"
                :class="{ 'form-error': $v.user.email.$error }"
            >
                <label for="email_login">Email address</label>
                <input
                    type="email"
                    name="email"
                    class="form-control py-2 h-auto"
                    id="email_login"
                    ref="email"
                    placeholder="Your email"
                    aria-describedby="email_error"
                    v-model.trim.lazy="$v.user.email.$model"
                    autocomplete="off"
                    autofocus
                />
                <div v-if="$v.user.email.$error">
                    <div
                        class="error mt-1"
                        id="email_error"
                        aria-live="assertive"
                        v-if="!$v.user.email.required"
                    >
                        Email address is required
                    </div>
                </div>
            </div>

            <!-- Password -->
            <div
                class="form-group position-relative mb-0 mb-md-3"
                :class="{ 'form-error': $v.user.password.$error }"
            >
                <div class="d-flex justify-content-between">
                    <label for="password_login">Password</label>
                    <a :href="this.forgotUrl" class=" mr-3 mr-md-0 text-muted"
                        ><u>Forgot your password?</u></a
                    >
                </div>
                <input
                    :type="passwordFieldType"
                    name="password"
                    class="form-control py-2 h-auto"
                    id="password_login"
                    ref="password"
                    placeholder="Password"
                    aria-describedby="password_error"
                    v-model.trim.lazy="$v.user.password.$model"
                    autocomplete="off"
                />
                <button
                    type="button"
                    id="switchVisibility"
                    class="position-absolute"
                    @click="switchVisibility"
                ></button>
                <div v-if="$v.user.password.$error">
                    <div
                        class="error mt-1"
                        id="password_error"
                        aria-live="assertive"
                        v-if="$v.user.password.$dirty && !$v.user.password.required"
                    >
                        Password is required
                    </div>
                </div>
            </div>
        </div>

        <!-- CSRF -->
        <input type="hidden" name="_token" :value="csrf" />

        <!-- Submit -->
        <button
            class="btn btn-primary btn-lg btn-block"
            type="submit"
            id="loginBtn"
            :disabled="submitStatus === 'PENDING'"
        >
            Login
        </button>
        <div class="text-center mt-2">
            <a href="/register" class="d-md-none">Don't have an account yet? Sign up here!</a>
        </div>

        <div
            class="bottom-validation--ok mt-2 text-center"
            v-if="submitStatus === 'OK'"
        >
            Thanks for logging in!
        </div>
        <div
            class="bottom-validation--error mt-2 text-center"
            v-if="submitStatus === 'ERROR'"
        >
            Please fill the form correctly.
        </div>
        <div
            class="bottom-validation--sending mt-2 text-center"
            v-if="submitStatus === 'PENDING'"
        >
            Sending...
        </div>
        <div class="bottom-validation--error mt-2 text-center" v-if="errors">
            <div v-for="value in errors">
                {{ value }}
            </div>
        </div>
        <hr />
        <a
            :href="googleUrl"
            role="button"
            id="btn-google"
            class="btn btn-social btn-white btn-block border"
        >
            <svg
                version="1.1"
                id="google"
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
                x="0px"
                y="0px"
                viewBox="0 0 533.5 544.3"
                style="enable-background: new 0 0 533.5 544.3"
                xml:space="preserve"
                class="mr-2"
            >
                <path
                    class="st0"
                    d="M533.5,278.4c0-18.5-1.5-37.1-4.7-55.3H272.1v104.8h147c-6.1,33.8-25.7,63.7-54.4,82.7v68h87.7
                   C503.9,431.2,533.5,361.2,533.5,278.4L533.5,278.4z"
                />
                <path
                    class="st1"
                    d="M272.1,544.3c73.4,0,135.3-24.1,180.4-65.7l-87.7-68c-24.4,16.6-55.9,26-92.6,26c-71,0-131.2-47.9-152.8-112.3
                   H28.9v70.1C75.1,486.3,169.2,544.3,272.1,544.3z"
                />
                <path
                    class="st2"
                    d="M119.3,324.3c-11.4-33.8-11.4-70.4,0-104.2V150H28.9c-38.6,76.9-38.6,167.5,0,244.4L119.3,324.3z"
                />
                <path
                    class="st3"
                    d="M272.1,107.7c38.8-0.6,76.3,14,104.4,40.8l77.7-77.7C405,24.6,339.7-0.8,272.1,0C169.2,0,75.1,58,28.9,150
                   l90.4,70.1C140.8,155.6,201.1,107.7,272.1,107.7z"
                />
            </svg>
            <span>Log in with Google</span>
        </a>
        <a
            :href="facebookUrl"
            role="button"
            id="btn-facebook"
            class="btn btn-social btn-facebook btn-block shadow-sm border"
        >
            <svg
                id="facebook"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                class="mr-2"
            >
                <path
                    class="st0"
                    d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"
                />
            </svg>
            <span>Log in with Facebook</span>
        </a>
    </form>
</template>

<script>
import Vuelidate from "vuelidate";
import { required } from "vuelidate/lib/validators";
//import './useragent.js';
Vue.use(Vuelidate);

export default {
    props: {
        action: String,
        old: Object,
        forgotUrl: String,
        errors: Array,
        facebookUrl: String,
        googleUrl: String
    },
    data() {
        return {
            user: {
                email: "",
                password: ""
            },
            passwordFieldType: "password",
            csrf: document
                .querySelector('meta[name="csrf-token"]')
                .getAttribute("content"),
            submitStatus: null
        };
    },
    validations: {
        user: {
            email: {
                required
            },
            password: {
                required
            }
        }
    },
    methods: {
        checkForm(e) {
            this.$v.user.$touch();
            // For accessibility: focusing on the field with an error
            if (this.$v.user.$invalid) {
                e.preventDefault();
                for (let key in Object.keys(this.$v.user)) {
                    const input = Object.keys(this.$v.user)[key];
                    if (input.includes("$")) return false;
                    if (this.$v.user[input].$error) {
                        this.$refs[input].focus();
                        break;
                    }
                }
                this.submitStatus = "ERROR";
            } else {
                return true;
            }
        },
        switchVisibility() {
            this.passwordFieldType =
                this.passwordFieldType === "password" ? "text" : "password";
        }
    },
    created() {
        this.user = this.old;
    }
};
</script>

<style scoped>
.form-error input {
    border-color: #c91547;
}
.error,
.bottom-validation--error {
    color: #c91547;
}
#switchVisibility {
    bottom: 10px;
    right: 10px;
    background-color: transparent;
    border: none;
    opacity: 0.4;
    font-size: 14px;
    font-weight: 600;
}
#switchVisibility:focus,
#switchVisibility:active,
#switchVisibility:hover {
    box-shadow: none;
    outline: none;
}
input[type="password"] + button:before {
    content: "Show";
}
input[type="text"] + button:before {
    content: "Hide";
}
</style>

Answer 1

请尝试以下步骤，它将帮助您解决此问题。

步骤1:忘记从vuelidate/lib/validators导入email

import { required, email } from 'vuelidate/lib/validators'

第2步：

validations: {
  user: {
    email: { required, email },
    password: { required }
  }
},

第3步:在单击按钮时进行验证

checkForm(e) {
  this.$v.$touch();
  if (this.$v.$invalid) {
    return // stop here if form is invalid
  }
},

第4步:在html模板中显示错误消息

<div class="form-group mb-3" :class="{ 'form-error': $v.user.email.$error }">
  <label for="email_login">Email address</label>
  <input
  type="email"
  name="email"
  class="form-control py-2 h-auto"
  id="email_login"
  ref="email"
  placeholder="Your email"
  aria-describedby="email_error"
  v-model.trim.lazy="$v.user.email.$model"
  autocomplete="off"
  autofocus />
  <div v-if="!$v.user.email.required" class="error mt-1" id="email_error" aria-live="assertive">
  Email address is required
  </div>
  <div v-if="!$v.user.email.email" class="error mt-1" id="email_error" aria-live="assertive">
  Invalid Email address
  </div>
</div>

你可以在Vue-vuex-vuelidate-i18n-registration-login-todo上为Vue，Vuex，Vuelidate，翻译结账