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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With