最小/最大验证 - Vuetify答案

【问题标题】：Min / Max validation - Vuetify最小/最大验证 - Vuetify
【发布时间】：2019-07-01 12:27:13
【问题描述】：

我需要确保只能输入 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>

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

【问题讨论】：

我建议您使用 vee-validate 对一个字段进行多个规则。它很容易集成并且超级友好。

标签： javascript vue.js vuejs2 vuetify.js

【解决方案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",
],

【讨论】：

【解决方案2】：

我找到了另一个解决方案。

<v-text-field
    v-model="myNumber"
    :min="minValue"
    :max="maxValue"
    hide-details
    single-line
    type="number"
/>

其中 minValue 和 maxValue 在您的数据中定义。

【讨论】：

您的解决方案完美无缺，但是......如何避免在该字段中写入高于最大值的值？在较小的值（例如 20）中，您可以向上/向下使用选择器，但像 4000 这样的最大值可能会很乏味......有什么想法吗？
我认为您应该添加上面答案中定义的“规则”。

【解决方案3】：

Vue：

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

脚本：

rules: [
         v => !!v || 'Required',
         v => v >= 5000 || 'Loan should be above £5000',
         v => v <= 50000 || 'Max should not be above £50,000',
    ],

【讨论】：

【解决方案4】：

你有一些错误。你有rules.loanMaxMax,，应该是rules.loanMax,。此外，您的规则需要用符号颠倒：

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',
 }

见codepen

【讨论】：

【解决方案5】：

需要自定义文本字段规则和自定义最小值和最大值。

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

rules: {
   loanMin(value,min,currency) {
        return (value || "") >= min || `Loan must be at least ${min} {currency}`;
   },
   loanMaxMax(value,max,currency) {
        return (value || "") <= max || `Loan may not be greater than ${max} ${currency}.`;
   }
}

【讨论】：

【解决方案6】：

我在this SO 页面中回答了这个问题。

只需将 v-model 变量作为第二个参数传递给您的规则。

<template>
  <v-input :rules=[rules.min(20, field1), rules.max(200, field1)] v-model="field1" />
</template>

<script>    
  data() {
    rules: {
      min(min, v) { 
        return (v || '').length >= min || `Value must be at least ${min}`;
      },

      max(max, v) { 
        return (v || '').length <= max || `Value may not be greater than ${max}.`;
      }
    }
  }
</script>

【讨论】：