I am trying to validate a textfield value in order to have maximum 4 characters not including '.' character.
<v-text-field
v-model="diagnoseCode"
style="height: 38px"
outlined
dense
maxLength="4">
</v-text-field>
I have tried this, but this doesnt take into account checking for '.' character. Any help would be appriciated.
You can use method to set max length:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
diagnoseCode: null,
max: null
}
},
methods: {
clear() {
this.max = null
},
check(e) {
str = this.diagnoseCode
if (str.replaceAll('.', '').length > 4 && !this.diagnoseCode.endsWith('.')) {
this.diagnoseCode = this.diagnoseCode.slice(0,-1)
this.max = this.diagnoseCode.length
}
}
},
})<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
<v-app>
<v-main>
<v-container>
<v-text-field v-model="diagnoseCode"
style="height: 38px"
outlined
dense
:maxLength="max"
@keyup="check($event.target.value)"
@keydown="clear">
</v-text-field>
</v-container>
</v-main>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>