最小/最大验证 \- Vuetify

Question

我需要确保只能输入 5,000 到 50,000 之间的数字。我目前正在使用以下代码，

 rules: {
     required: value => !!value || 'Required.',
     loanMin: value => value <= 5000 || 'Loan should be above £5000',
     loanMax: value => value >= 50000 || 'Max should not be above £50,000',
}

将规则应用于该字段如下：

 <v-text-field
  height="5"
  :rules="[rules.loanMin, rules.loanMaxMax, rules.required]"
  editable
  v-model="sliderLoan"
  @change="principleLogger(sliderLoan)"
  persistent-hint
  outline
  label="Loan Amount"
  type="number"
></v-text-field>

如何将多个规则应用于一个字段？

原文由 Mtlj1991 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在你的模板中

<v-text-field
    label="Example"
    v-model="example"
    :rules="exampleRules"
></v-text-field>

在数据

example: "",
exampleRules: [
    v => !!v || "This field is required",
    v => ( v && v >= 5000 ) || "Loan should be above £5000",
    v => ( v && v <= 50000 ) || "Max should not be above £50,000",
],

参考： https ://vuetifyjs.com/en/components/forms/，查看playground下的示例代码。

奖励： 不是这个问题的一部分，而是相关的，稍作更改后，您可以使用相同的最小/最大长度验证。

 example: "",
exampleRules: [
    v => !!v || "This field is required",
    v => ( v && v.length >= 10 ) || "This field must have atleast 10 characters",
    v => ( v && v.length <= 100 ) || "This field exceeds maximum allowed characters",
],

原文由 Shahbaz A. 发布，翻译遵循 CC BY-SA 4.0 许可协议