最小/最大验证 - 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>

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

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",
],

Answer 2

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

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

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

Answer 3

你有几个错误。你已经拥有了rules.loanMaxMax,应该的rules.loanMax,。此外，您的规则需要在符号上颠倒：

\n\n

rules: {\n   required: value => !!value || \'Required.\',\n   loanMin: value => value >= 5000 || \'Loan should be above \xc2\xa35000\',\n   loanMax: value => value <= 50000 || \'Max should not be above \xc2\xa350,000\',\n }\n

\n\n

参见代码笔

\n