javascript - Vuetify 表单验证规则方法范围
问题描述
有什么方法可以从表单验证方法中访问组件的范围?(this.min, this.max)
我有一些依赖于其他组件数据的复杂验证。从规则的方法中访问数据是正确的方法吗?如果没有,有人可以推荐一个更好的方法吗?谢谢!
<template>
<v-form ref="form" v-model="valid">
<v-text-field
v-model="age"
:rules="[myRules.age]"
label="Label"
required
>
</v-text-field>
<v-btn
color="primary"
:disabled="!valid"
@click="submit"
>
submit
</v-btn>
<v-btn
@click="clear"
>
clear
</v-btn>
</v-form>
</template>
<script>
data(){
return{
min: 21,
max: 65,
valid: true,
myRules: {
age: (value) => {
return this.min < value < this.max
}
}
}
},
methods:{
clear() {
this.$refs.form.reset()
}
}
</script>
解决方案
是的,您可以为此使用一种方法。例如:
<template>
<v-form ref="form" v-model="valid">
<v-text-field
v-model="age"
:rules="[age]"
label="Label"
required
>
</v-text-field>
<v-btn
color="primary"
:disabled="!valid"
@click="submit"
>
submit
</v-btn>
<v-btn
@click="clear"
>
clear
</v-btn>
</v-form>
</template>
<script>
data(){
return{
min: 21,
max: 65,
valid: true,
}
},
methods:{
clear() {
this.$refs.form.reset()
},
age: (value) => {
return this.min < value < this.max
}
}
</script>
显然,在这里(在方法中)您可以访问所有数据属性,甚至可以访问其他方法来执行非常复杂的验证。
此外,如果您负担得起第三方软件包,我建议使用已经与vuetify集成的 vuelidate,这样您就可以轻松集成和应用复杂的验证(使用其各种内置验证器)。
推荐阅读
- firebase - Flutter从路径显示firebase存储图像
- javascript - 如何使带有 js 的引导模式在多个网站上独立于独特样式工作?
- python - 我需要 Python 中的列表方法的一些帮助,存储系统自动给出的输入并在调用时执行
- android - 函数在android中返回负值,但在flutter应用程序中返回正值
- sql-server - SQL Server:如果我同时运行相同的存储过程,该存储过程具有对同一个临时表的选择,会发生什么情况
- javascript - 节点 JS:TypeError:无法读取未定义的属性“forEach”
- android - 同一应用程序的调试和发布版本面临奇怪的问题
- powershell - 为什么 sha256 哈希键与命令提示符和 Powershell 不同
- flutter - 在颤振中,我希望容器内的图标占据容器的最大大小
- selenium - 使用 Selenium Java 在 Linux 中通过 Google Chrome RemoteWebDriver-headless 模式下载文件