I need to make sure that only numbers between 5,000 and 50,000 can be entered. I'm currently using the following code,
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',
}
With the rules applied to the field as follows:
<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>
How to apply multiple rules to one field?
In your template
<v-text-field
label="Example"
v-model="example"
:rules="exampleRules"
></v-text-field>
In data
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",
],
Reference: https://vuetifyjs.com/en/components/forms/ , check example code under playground.
Bonus: Not a part of this question but related, after a slight change you can use the same for min/max length validation.
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",
],
Vue:
<v-text-field
height="5"
:rules="rules"
editable
v-model="sliderLoan"
@change="principleLogger(sliderLoan)"
persistent-hint
outline
label="Loan Amount"
type="number"
/>
Script:
rules: [
v => !!v || 'Required',
v => v >= 5000 || 'Loan should be above £5000',
v => v <= 50000 || 'Max should not be above £50,000',
],
I found a another solution.
<v-text-field v-model="myNumber" :min="minValue" :max="maxValue" hide-details single-line type="number" />
Where minValue and maxValue are defined in your data.
You have a few mistakes. You have rules.loanMaxMax,
which should be rules.loanMax,
. Also you rules need to be reversed in signs:
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',
}
See codepen
Custom text-fields rules required and Custom Min and Max filed.
<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}.`;
}
}
I replied this question in this SO page.
just pass v-model variable as second parameter to your rule.
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.