QInput validation rules give incorrect result for certain numbers

[scottbrodersen]

What happened?

I have a QInput field of type number using v-model.number. The component has a rule that tests the input value against the regular expression ^[0-9][.][0-9]$ however when the decimal is a 0 the rule fails, e.g. 3.0 fails. Any other decimal number passes, e.g. 3.3.

What did you expect to happen?

Any value that matches the regular expression passes the rule, including 0-decimal values.

Reproduction URL

https://codepen.io/scottbro/pen/GRbRbbB

How to reproduce?

1. Go to the provided reproduction link.
2. Enter 3.1 in the input --> rule correctly evaluates the value as valid
3. Enter 3.0 in the input --> rule incorrectly evaluates the value as invalid

Flavour

Vite Plugin (@quasar/vite-plugin)

Areas

Components (quasar)

Platforms/Browsers

Chrome

Quasar info output

No response

Relevant log output

No response

Additional context

No response

[RamonDonadeu]

First of all, your codepen is not working, for me at least.
Second. If instead of v-model.number, you use v-model="thenumber" and type="number" it works perfectly with 1.0
https://codepen.io/RamonDonadeu/pen/qBzdZLw?editors=101

[yusufkandemir]

@RamonDonadeu is right. When you use the number modifier, Vue parses the string to a number. So, the regex would be executed against a number, not a string, and will fail to behave the way you want. So, you can either don't use the number modifier, or update your rules to validate numbers instead of strings.