看看官方的 Vuetify 表单验证example。
第一个例子，如果你点击一个字段然后在它外面，它会被自动验证。整个字段变为红色，您会得到红色文本的提示。
我想要的是基于内置/本机验证在完全独立的 HTML 元素上添加或删除类（将文本变为红色）。
如果存在像hint-for="" 这样的东西，那将是理想的。将单独的 HTML 元素与表单字段验证连接起来的某种方式。
我尝试使用表单元素的“有效”属性来调节类，如下所示：this.$refs.form.$children[1].valid，但这在页面加载时不存在并引发错误。
现在我基本上通过双重验证获得了一些结果，正常的一个根据表单字段上的“规则”属性自动验证，一个自定义的我在@input 和@987654325 上调用我自己@ 的表单字段，但这在很大程度上是低效的，所以我希望有更好的方法。
【问题讨论】：
标签： vue.js vuetify.js
这是我想出来的。
我在验证立即处于活动状态并且页面加载时不存在的文本字段时遇到了一些问题，但是通过此设置，它可以工作。
因此，一旦验证启动，如果字段无效，本地 Vuetify 验证将变为红色，并且我使用自定义函数在完全独立的 HTML 片段上切换“无效”类。重要的是每个文本字段都有自己的“副标题”，只有当单个连接的文本文件无效时才会变为红色，而不是整个表单。
<template>
<v-form
ref="form"
lazy-validation
>
<v-subheader v-bind:class="passwordValid()">
Password *
</v-subheader>
<v-text-field
:rules="rules.password"
ref="password"
></v-text-field>
<v-subheader v-bind:class="passwordAgainValid()">
Password Again *
</v-subheader>
<v-text-field
:rules="rules.passwordAgain"
ref="passwordAgain"
></v-text-field>
</v-form>
<v-btn
v-on:click="save"
>
Save
</v-btn>
</template>
<script>
export default {
methods: {
save() {
let self = this
self.activateRules()
self.$nextTick(function () {
if (self.$refs.form.validate()) {
self.rules = {}
// submit...
}
})
},
activateRules () {
this.rules = {
password: [
v => v.length > 0 || ''
],
passwordAgain: [
v => v.length > 0 || ''
]
}
},
passwordValid: function () {
let passwordValid = true
if (this.$refs.password) {
passwordValid = this.$refs.password.valid
}
return {
'error--text': !passwordValid
}
},
passwordAgainValid: function () {
let passwordAgainValid = true
if (this.$refs.passwordAgain) {
passwordAgainValid = this.$refs.passwordAgain.valid
}
return {
'error--text': !passwordAgainValid
}
}
}
}
</script>
【讨论】：
您可以使用 v-form 的值来跟踪表单的有效性。为了收听更改，您可以像这样使用输入事件
<template>
<div>
<v-form lazy-validation v-model="valid" @input="updateOtherElement">
<v-text-field
v-model="email"
:rules="emailRules"
label="Email"
required
></v-text-field>
</v-form>
</div>
</template>
<script>
export default {
data () {
return {
valid: true,
email: "",
emailRules: [
v => /.+@.+/.test(v) || 'E-mail must be valid',
],
}
},
methods: {
updateOtherElement(valid) {
// update other elements css
}
}
}
</script>
另一种方法是使用观察者跟踪更改
【讨论】：