我有点新vuelidate,一切都很好,除了我不知道如何运行验证时,只有按钮提交已被点击。现在它标记触摸字段红色,当你开始提供任何输入,我希望它等待,直到用户要提交填写的表单。
这是我目前的进展:
Vue.use(window.vuelidate.default)
const { required, minLength, sameAs } = window.validators
new Vue({
el: "#app",
data: {
user: {
login: '',
password: '',
repeatedPassword: ''
}
},
validations: {
user: {
login: {
required,
minLength: minLength(5)
},
password: {
required,
minLength: minLength(8)
},
repeatedPassword: {
required,
sameAs: sameAs('password')
}
}
}
})
input {
border: 1px solid silver;
border-radius: 4px;
background: white;
padding: 5px 10px;
}
.error {
border-color: red;
background: #FDD;
}
.error:focus {
outline-color: #F99;
}
.valid {
border-color: #5A5;
background: #EFE;
}
.valid:focus {
outline-color: #8E8;
}
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuelidate/dist/validators.min.js"></script>
<script src="https://unpkg.com/vuelidate/dist/vuelidate.min.js"></script>
`<div id="app">
<input type="text" placeholder="login"
v-model="user.login"
v-on:input="$v.user.login.$touch"
v-bind:class="{error: $v.user.login.$error, valid: $v.user.login.$dirty && !$v.user.login.$invalid}">
<br/>
<input type="password" placeholder="password"
v-model="user.password"
v-on:input="$v.user.password.$touch"
v-bind:class="{error: $v.user.password.$error, valid: $v.user.password.$dirty && !$v.user.password.$invalid}">
<br/>
<input type="password" placeholder="repeat password"
v-model="user.repeatedPassword"
v-on:input="$v.user.repeatedPassword.$touch"
v-bind:class="{error: $v.user.repeatedPassword.$error, valid: $v.user.repeatedPassword.$dirty && !$v.user.repeatedPassword.$invalid}"
>
<button :disabled="$v.user.$error" @click="$v.user.$touch()">
Submit!
</button>
</div>`
4条答案
按热度按时间c9x0cxw01#
我从来没有真正习惯过Vuelidate的做事方式,但是,一般来说,它是这样工作的:https://monterail.github.io/vuelidate/#sub-basic-form
像这样设置它允许您对每个表单输入/元素进行验证,然后进行全面检查,以查看表单是否“脏”和/或“无效”
至于在实践中使用它,一种选择是在提交时调用validateform事件。
然后在vue示例中创建一个validateform方法来检查
然后显示错误或调用实际的submit方法
lnlaulya2#
然后,在设置了验证之后,你唯一需要做的事情就是调用一个方法来验证错误。
方法:
erhoui1w3#
现在,当您开始提供任何输入时,它会将已触摸字段标记为红色
这意味着字段会自动变“脏”,但作为最后一个版本(Vuelidate 2),这不是默认行为。
请检查您是否有
$autoDirty: true
并将其删除或设置为“false”要使用Vuelidate 2完成你需要的任务,你只需要在submit click事件上调用$touch(),因为
$autoDirty
默认为false
。vmdwslir4#
下面是我对VeeValidate 3的操作:
和方法内: