javascript - Vuetify 验证消息变量
问题描述
我想以两种不同的语言提供我的网站。我使用 vuetify 进行表单验证。问题是,我不知道如何将“规则文本”放入变量中。大家可以帮忙吗。
我有以下设置:
<v-form ref="form" v-model="valid" lazy-validation @submit.prevent="submit">
<v-text-field class="mt-5"
v-model="id"
color= "orange"
label="Enter ID"
:rules="IdRule"
counter
maxlength="30"
required
clearable
outlined
v-on:keyup.enter="comp"
></v-text-field>
</v-form>
...
IdRule: [
v => !!v || 'ID is required',
v => /^[a-zA-Z0-9\s]*$/.test(v) || 'Only letters and numbers allowed, no special characters',
],
如何将“需要 ID”和“只允许字母和数字,不允许特殊字符”这两个字符串放入变量中,这样当用户更改语言时,这些字符串的语言也会发生变化。
非常感谢!
基督教
解决方案
您需要为文本分配一个变量。并根据您的需要使用语言。这是我在演示中的想法:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
title: '',
email: '',
languages: ['english', 'bangla'],
language: 'english',
rulesText: {
bangla: {
minLen: 'অন্তত ২০',
required: 'প্রয়োজন'
},
english: {
minLen: 'At least 20',
required: 'Required'
}
},
rules: {
required: value => !!value || this.rulesText[this.language].required,
counter: value => value.length >= 20 || this.rulesText[this.language].minLen,
},
}
},
})
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.3.18/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@2.3.18/dist/vuetify.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css">
<div id="app">
<v-app id="inspire">
<v-form>
<v-container>
<v-row>
<v-col cols="12" sm="6">
<v-select :items="languages" v-model="language"></v-select>
</v-col>
<v-col cols="12" sm="6">
<v-text-field v-model="title" :rules="[rules.required, rules.counter]" label="Title" counter maxlength="20"></v-text-field>
</v-col>
</v-row>
</v-container>
</v-form>
</v-app>
</div>
推荐阅读
- dll - 浏览器在唤醒 Electron 之前加载 DLL 文件
- python - For Loop Pandas 中的滚动过滤器
- google-sheets - GoogleSheet:从两个表中交叉数据
- java - 了解 Java 使用 Arrays.sort() 对二维数组进行排序
- django - 现有用户的 Django-allauth 手动链接
- flutter - 如何在子小部件中定义 Navigator.pop() 响应类型
- java - 如何在 mongo-template 中为 $in 聚合编写 mongo cli 查询
- discord.py - 当我们传递命名参数时出现 discord.py 错误
- python - 如何在不打开文件的情况下初始化 Python file_object
- github - 如何在 sonarqube 中分析来自 GitHub 存储库的代码