Vue.js 在Vuetify中基于单个表单元素验证动态更新类

看看官方的Vuetify表单验证

第一个示例是，如果在字段内单击，然后在字段外单击，则会自动验证该字段。整个字段变为红色，您将得到红色文本的提示

我希望基于内置/本机验证在一个完全独立的HTML元素上添加或删除一个类（将文本变成红色）

如果存在类似于

hint for=“”

的东西，这将是理想的选择。将单独的HTML元素与表单字段验证连接起来的某种方法

我试图用表单元素的“valid”属性来限定该类，如下所示：

this.$refs.form.$children[1]。valid

，但这在页面加载中不存在，并引发错误

---

现在我有了一些结果，基本上是通过双重验证，正常的验证是基于表单字段的“规则”属性自动验证的，自定义的验证是在表单字段的

@input

和

@blur

上调用的，但是这在很大程度上是低效的，所以我希望有更好的方法。

您可以使用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>

导出默认值{
数据（）{
返回{
有效：对，
电邮：“，
电子邮件规则：[
v=>/.+@.+/.test（v）| |“电子邮件必须有效”，
],
}
},
方法：{
updateOtherElement（有效）{
//更新css中的其他元素
}
}
}

---

另一种方法是使用观察者跟踪更改，您可以使用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>

导出默认值{
数据（）{
返回{
有效：对，
电邮：“，
电子邮件规则：[
v=>/.+@.+/.test（v）| |“电子邮件必须有效”，
],
}
},
方法：{
updateOtherElement（有效）{
//更新css中的其他元素
}
}
}

---

另一种方法是用观察者跟踪变化，这就是我想到的

我遇到了一些问题，验证立即处于活动状态，页面加载上不存在文本字段，但通过这种设置，它可以工作

因此，一旦验证启动，如果本地Vuetify验证无效，则字段将变为红色，并且我在一个完全独立的HTML片段上使用自定义函数切换“invalid”类。这里重要的是，每个文本字段都有自己的“副标题”，只有当单个连接的文本字段无效时，才会变为红色，而不是整个表单

<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>

密码*
再次输入密码*
拯救
导出默认值{
方法：{
保存（）{
让self=这个
自激活菌（）
self.$nextTick（函数（）{
if（self.$refs.form.validate（））{
self.rules={}
//提交。。。
}
})
},
活化菌（）{
这条规则={
密码：[
v=>v.length>0 | |”
],
再次输入密码：[
v=>v.length>0 | |”
]
}
},
passwordValid:函数（）{
设passwordValid=true
如果（此$refs.密码）{
passwordValid=this.$refs.password.valid
}
返回{
“错误--文本”：！passwordValid
}
},
passwordAgainValid:函数（）{
让passwordagavalid=true
if（此.$refs.password再次出现）{
PasswordAgavalid=此值。$refs.passwordreach.valid
}
返回{
“错误--文本”：！PasswordAgavalid
}
}
}
}

这就是我想到的

我遇到了一些问题，验证立即处于活动状态，页面加载上不存在文本字段，但通过这种设置，它可以工作

因此，一旦验证启动，如果本地Vuetify验证无效，则字段将变为红色，并且我在一个完全独立的HTML片段上使用自定义函数切换“invalid”类。这里重要的是，每个文本字段都有自己的“副标题”，只有当单个连接的文本字段无效时，才会变为红色，而不是整个表单

<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>

密码*
再次输入密码*
拯救
导出默认值{
方法：{
保存（）{
让self=这个
自激活菌（）
self.$nextTick（函数（）{
if（self.$refs.form.validate（））{
self.rules={}
//提交。。。
}
})
},
活化菌（）{
这条规则={
密码：[
v=>v.length>0 | |”
],
再次输入密码：[
v=>v.length>0 | |”
]
}
},
passwordValid:函数（）{
设passwordValid=true
如果（此$refs.密码）{
passwordValid=this.$refs.password.valid
}
返回{
“错误--文本”：！passwordValid
}
},
密码