使用 Vuelidate 的表单验证不在屏幕上显示错误
Form validation not displaying error on screen with Vuelidate
我正在尝试使用 Vuelidate 向登录表单添加一些验证。当我将用户名字段留空时,我希望看到一条警告显示“需要姓名”,但什么也没有显示。
它没有进入下一步(这是我想要的),所以我假设验证工作正常,我只是没有在屏幕上显示消息。我 运行 它处于调试模式并且我没有收到任何错误,是不是我做错了什么?
<template>
<div>
<h3>Sign in</h3>
<div class="row" v-if="errorMessage">
<div class="alert alert-danger"><p>{{ errorMessage }}</p></div>
</div>
<div class="row" v-if="successMessage">
<div class="alert alert-success"><p>{{ successMessage }}</p></div>
</div>
<form @submit.prevent="OnLogin">
<div class="form-group">
<label for="userSigninLogin">Email</label>
<input name="username" type="text"
class="form-control"
:class="{ 'is-invalid': submitted && $v.apiRequest.username.$error }"
placeholder="Enter your email" v-model="apiRequest.username">
</div>
<div class="form-group">
<label for="userSigninPassword">Password</label>
<input name="password" type="password"
class="form-control" id="userSigninPassword"
placeholder="Enter your password" v-model="apiRequest.password">
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
<div v-if="submitted" && !$v.apiRequest.username.required
class="alert alert-danger"><p>Name is required</p></div>
<div class="row" v-if="submitted" && !$v.apiRequest.username.required>
<div class="alert alert-danger"><p>Name is required</p></div>
</div>
</form>
</div>
</template>
<script>
import { required, minLength } from 'vuelidate/lib/validators';
export default {
data() {
return {
apiRequest: new this.$request({
username: '',
password: '',
}),
errorMessage: '',
successMessage: '',
submitted: false,
};
},
validations: {
apiRequest: {
username: {
required,
minLength: minLength(2),
},
},
},
methods: {
OnLogin() {
this.submitted = true;
this.apiRequest.addStore(this.$store);
this.apiRequest.post('login')
.then((response) => {
this.successMessage = response;
this.errorMessage = '';
})
.catch((errors) => {
this.errorMessage = errors;
this.successMessage = '';
});
},
},
};
</script>
按照它可以帮助您解决问题的步骤进行操作。您忘记在单击按钮时添加验证,并且在显示错误消息时也存在模板错误。
第 1 步:HTMLtemplate
<div id="app">
<h3>Sign in</h3>
<div class="row" v-if="errorMessage">
<div class="alert alert-danger">
<p>{{ errorMessage }}</p>
</div>
</div>
<div class="row" v-if="successMessage">
<div class="alert alert-success">
<p>{{ successMessage }}</p>
</div>
</div>
<form @submit.prevent="OnLogin">
<div class="form-group">
<label for="userSigninLogin">Email</label>
<input name="username"
type="text" class="form-control" :class="{ 'is-invalid': submitted && $v.apiRequest.username.$error }"
placeholder="Enter your email" v-model="apiRequest.username" />
<div v-if="submitted && $v.apiRequest.username.$error" class="alert alert-danger">
<span v-if="!$v.apiRequest.username.required">Username is Required</span>
<span v-if="!$v.apiRequest.username.minLength">Enter Minimum 6 character</span>
<span v-if="$v.apiRequest.username.minLength && !$v.apiRequest.username.email">Enter Valid Email address</span>
</div>
</div>
<div class="form-group">
<label for="userSigninPassword">Password</label>
<input name="password" type="password" class="form-control"
id="userSigninPassword" placeholder="Enter your password" v-model="apiRequest.password" />
<div class="row" v-if="submitted && !$v.apiRequest.password.required">
<span class="alert alert-danger">Password is required</span>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
</div>
第 2 步:初始化您的 modal
数据
data() {
return {
apiRequest: {
username: "",
password: "",
},
errorMessage: "",
successMessage: "",
submitted: false,
};
},
第 3 步:添加 validations
规则
validations: {
apiRequest: {
username: {
required,
minLength: minLength(6),
email,
},
password: { required },
},
},
第 4 步:添加表单 submit
方法
methods: {
OnLogin() {
this.submitted = true;
this.$v.$touch();
if (this.$v.$invalid) {
return; // stop here if form is invalid
}
this.apiRequest
.post("login")
.then((response) => {
this.successMessage = response;
this.errorMessage = "";
})
.catch((errors) => {
this.errorMessage = errors;
this.successMessage = "";
});
},
},
我正在尝试使用 Vuelidate 向登录表单添加一些验证。当我将用户名字段留空时,我希望看到一条警告显示“需要姓名”,但什么也没有显示。
它没有进入下一步(这是我想要的),所以我假设验证工作正常,我只是没有在屏幕上显示消息。我 运行 它处于调试模式并且我没有收到任何错误,是不是我做错了什么?
<template>
<div>
<h3>Sign in</h3>
<div class="row" v-if="errorMessage">
<div class="alert alert-danger"><p>{{ errorMessage }}</p></div>
</div>
<div class="row" v-if="successMessage">
<div class="alert alert-success"><p>{{ successMessage }}</p></div>
</div>
<form @submit.prevent="OnLogin">
<div class="form-group">
<label for="userSigninLogin">Email</label>
<input name="username" type="text"
class="form-control"
:class="{ 'is-invalid': submitted && $v.apiRequest.username.$error }"
placeholder="Enter your email" v-model="apiRequest.username">
</div>
<div class="form-group">
<label for="userSigninPassword">Password</label>
<input name="password" type="password"
class="form-control" id="userSigninPassword"
placeholder="Enter your password" v-model="apiRequest.password">
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
<div v-if="submitted" && !$v.apiRequest.username.required
class="alert alert-danger"><p>Name is required</p></div>
<div class="row" v-if="submitted" && !$v.apiRequest.username.required>
<div class="alert alert-danger"><p>Name is required</p></div>
</div>
</form>
</div>
</template>
<script>
import { required, minLength } from 'vuelidate/lib/validators';
export default {
data() {
return {
apiRequest: new this.$request({
username: '',
password: '',
}),
errorMessage: '',
successMessage: '',
submitted: false,
};
},
validations: {
apiRequest: {
username: {
required,
minLength: minLength(2),
},
},
},
methods: {
OnLogin() {
this.submitted = true;
this.apiRequest.addStore(this.$store);
this.apiRequest.post('login')
.then((response) => {
this.successMessage = response;
this.errorMessage = '';
})
.catch((errors) => {
this.errorMessage = errors;
this.successMessage = '';
});
},
},
};
</script>
按照它可以帮助您解决问题的步骤进行操作。您忘记在单击按钮时添加验证,并且在显示错误消息时也存在模板错误。
第 1 步:HTMLtemplate
<div id="app">
<h3>Sign in</h3>
<div class="row" v-if="errorMessage">
<div class="alert alert-danger">
<p>{{ errorMessage }}</p>
</div>
</div>
<div class="row" v-if="successMessage">
<div class="alert alert-success">
<p>{{ successMessage }}</p>
</div>
</div>
<form @submit.prevent="OnLogin">
<div class="form-group">
<label for="userSigninLogin">Email</label>
<input name="username"
type="text" class="form-control" :class="{ 'is-invalid': submitted && $v.apiRequest.username.$error }"
placeholder="Enter your email" v-model="apiRequest.username" />
<div v-if="submitted && $v.apiRequest.username.$error" class="alert alert-danger">
<span v-if="!$v.apiRequest.username.required">Username is Required</span>
<span v-if="!$v.apiRequest.username.minLength">Enter Minimum 6 character</span>
<span v-if="$v.apiRequest.username.minLength && !$v.apiRequest.username.email">Enter Valid Email address</span>
</div>
</div>
<div class="form-group">
<label for="userSigninPassword">Password</label>
<input name="password" type="password" class="form-control"
id="userSigninPassword" placeholder="Enter your password" v-model="apiRequest.password" />
<div class="row" v-if="submitted && !$v.apiRequest.password.required">
<span class="alert alert-danger">Password is required</span>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
</div>
第 2 步:初始化您的 modal
数据
data() {
return {
apiRequest: {
username: "",
password: "",
},
errorMessage: "",
successMessage: "",
submitted: false,
};
},
第 3 步:添加 validations
规则
validations: {
apiRequest: {
username: {
required,
minLength: minLength(6),
email,
},
password: { required },
},
},
第 4 步:添加表单 submit
方法
methods: {
OnLogin() {
this.submitted = true;
this.$v.$touch();
if (this.$v.$invalid) {
return; // stop here if form is invalid
}
this.apiRequest
.post("login")
.then((response) => {
this.successMessage = response;
this.errorMessage = "";
})
.catch((errors) => {
this.errorMessage = errors;
this.successMessage = "";
});
},
},