【发布时间】：2021-06-13 03:07:48
【问题描述】：
我真的遇到了这个问题。由于未知原因（对我而言）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>
【问题讨论】：