How to validate a string that contains 4 letter not including '.' character?-CodePudding

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.

CodePudding user response：

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/[email protected]/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/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>